diff --git a/packages/react-core/src/demos/HighContrast.md b/packages/react-core/src/demos/HighContrast.md
index 81dd5143228..d0939ead922 100644
--- a/packages/react-core/src/demos/HighContrast.md
+++ b/packages/react-core/src/demos/HighContrast.md
@@ -22,8 +22,11 @@ import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import { useState } from 'react';
 
 ### High contrast
+
 ```js file='./examples/HighContrast/HighContrast.tsx' isFullscreen
 
 ```
diff --git a/packages/react-core/src/demos/examples/HighContrast/HighContrast.tsx b/packages/react-core/src/demos/examples/HighContrast/HighContrast.tsx
index d878165e6ee..6633e56fcef 100644
--- a/packages/react-core/src/demos/examples/HighContrast/HighContrast.tsx
+++ b/packages/react-core/src/demos/examples/HighContrast/HighContrast.tsx
@@ -8,10 +8,6 @@ import {
   TabTitleText,
   Title,
   Content,
-  DrawerHead,
-  DrawerActions,
-  DrawerPanelDescription,
-  DrawerCloseButton,
   PageSidebar,
   PageSidebarBody,
   Nav,
@@ -29,7 +25,6 @@ import {
   Button,
   FormGroupLabelHelp,
   Dropdown,
-  DropdownItem,
   DropdownList,
   Toolbar,
   ToolbarContent,
@@ -44,30 +39,142 @@ import {
   MastheadContent,
   MastheadLogo,
   ButtonVariant,
-  DrawerPanelBody,
   NotificationBadge,
-  NotificationBadgeVariant
+  NotificationBadgeVariant,
+  NotificationDrawer,
+  NotificationDrawerBody,
+  NotificationDrawerHeader,
+  NotificationDrawerList,
+  NotificationDrawerListItem,
+  NotificationDrawerListItemBody,
+  NotificationDrawerListItemHeader,
+  MenuToggleElement,
+  DropdownItem
 } from '@patternfly/react-core';
-import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import { Ref, RefObject, useState, MouseEvent as ReactMouseEvent, FormEvent } from 'react';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
+
+type Validate = 'success' | 'warning' | 'error' | 'default';
+const emailRegex = /^[^@]+@[^@]+\.[a-zA-Z]+$/i;
+const nameRegex = /^[a-zA-ZÀ-ÿ\u0100-\u017F\u0180-\u024F\s\-'.]{2,50}$/i;
 
 export const TabsOpenDemo = () => {
-  const [activeTabKey, setActiveTabKey] = React.useState(0);
-  const [isNavOpen, setIsNavOpen] = React.useState(true);
-  const [isDrawerOpen, setIsDrawerOpen] = React.useState(true);
+  const [activeTabKey, setActiveTabKey] = useState(0);
+  const [isNavOpen, setIsNavOpen] = useState(true);
+  const [isDrawerOpen, setIsDrawerOpen] = useState(true);
+  const [isOpenMap, setIsOpenMap] = useState(new Array(7).fill(false));
+  const [name, setName] = useState('');
+  const [validatedName, setValidatedName] = useState<Validate>('default');
+  const [nameHelperText, setNameHelperText] = useState('Enter your name to continue');
+  const [email, setEmail] = useState('');
+  const [validatedEmail, setValidatedEmail] = useState<Validate>('default');
+  const [emailHelperText, setEmailHelperText] = useState('Enter your email to continue');
+
+  const onToggle = (index: number) => () => {
+    const newState = [...isOpenMap.slice(0, index), !isOpenMap[index], ...isOpenMap.slice(index + 1)];
+    setIsOpenMap(newState);
+  };
+
+  const onSelect = () => {
+    setIsOpenMap(new Array(7).fill(false));
+  };
+
+  const onDrawerClose = (_event: ReactMouseEvent<Element, MouseEvent> | KeyboardEvent) => {
+    setIsOpenMap(new Array(7).fill(false));
+    setIsDrawerOpen(false);
+  };
+
+  const [isOpen0, isOpen1, isOpen2, isOpen3, isOpen4, isOpen5, isOpen6] = isOpenMap;
+  const dropdownItems = (
+    <>
+      <DropdownItem>Action</DropdownItem>
+      <DropdownItem
+        to="#default-link2"
+        // Prevent the default onClick functionality for example purposes
+        onClick={(ev: any) => ev.preventDefault()}
+      >
+        Link
+      </DropdownItem>
+      <DropdownItem isDisabled>Disabled Action</DropdownItem>
+      <DropdownItem isDisabled to="#default-link4">
+        Disabled Link
+      </DropdownItem>
+    </>
+  );
 
   // Toggle currently active tab
   const handleTabClick = (event, tabIndex) => {
     setActiveTabKey(tabIndex);
   };
 
-  const onCloseClick = () => {
-    setIsDrawerOpen(false);
+  const [isChecked, setIsChecked] = useState(true);
+
+  const validateEmail = () => {
+    if (!emailRegex.test(email)) {
+      setEmailHelperText('Invalid email address');
+      setValidatedEmail('error');
+      return;
+    }
+    setEmailHelperText('Valid email address');
+    setValidatedEmail('success');
+  };
+
+  const validateName = () => {
+    if (!nameRegex.test(name)) {
+      setNameHelperText('Invalid name');
+      setValidatedName('error');
+      return;
+    }
+    setNameHelperText('Valid name');
+    setValidatedName('success');
   };
 
-  const [isChecked, setIsChecked] = React.useState(true);
+  const handleEmailChange = (_event, newEmail: string) => {
+    setEmail(newEmail);
+  };
+
+  const handleNameChange = (_event, newName: string) => {
+    setName(newName);
+  };
+
+  const resetForm = () => {
+    setName('');
+    setEmail('');
+    setValidatedName('default');
+    setValidatedEmail('default');
+    setNameHelperText('Enter your name to continue');
+    setEmailHelperText('Enter your email to continue');
+  };
+
+  const handleSubmit = (_event) => {
+    if (emailRegex.test(email) && nameRegex.test(name)) {
+      resetForm();
+    } else {
+      validateEmail();
+      validateName();
+    }
+  };
+
+  const handleCancel = () => {
+    resetForm();
+  };
+
+  const generateAlertContent = () => {
+    if (validatedEmail === 'error' && validatedName === 'error') {
+      return 'Please provide a valid name and email address';
+    }
+    if (validatedEmail === 'error') {
+      return 'Please provide a valid email address';
+    }
+    if (validatedName === 'error') {
+      return 'Please provide a valid name';
+    }
+  };
 
   const pageForm = (
     <Form>
@@ -78,11 +185,18 @@ export const TabsOpenDemo = () => {
           id="horizontal-form-name"
           aria-describedby="horizontal-form-name-helper"
           name="horizontal-form-name"
-          value="John Doe"
+          value={name}
+          onChange={handleNameChange}
+          validated={validatedName}
         />
         <FormHelperText>
           <HelperText>
-            <HelperTextItem variant="success">Valid name</HelperTextItem>
+            <HelperTextItem
+              variant={validatedName}
+              {...(validatedName === 'error' && { icon: <ExclamationCircleIcon /> })}
+            >
+              {nameHelperText}
+            </HelperTextItem>
           </HelperText>
         </FormHelperText>
       </FormGroup>
@@ -92,11 +206,18 @@ export const TabsOpenDemo = () => {
           type="text"
           id="horizontal-form-email"
           name="horizontal-form-email"
-          value="John_doe@gmail"
+          value={email}
+          onChange={handleEmailChange}
+          validated={validatedEmail}
         />
         <FormHelperText>
           <HelperText>
-            <HelperTextItem variant="error">Invalid email</HelperTextItem>
+            <HelperTextItem
+              variant={validatedEmail}
+              {...(validatedEmail === 'error' && { icon: <ExclamationCircleIcon /> })}
+            >
+              {emailHelperText}
+            </HelperTextItem>
           </HelperText>
         </FormHelperText>
       </FormGroup>
@@ -127,27 +248,222 @@ export const TabsOpenDemo = () => {
         <TextArea autoResize />
       </FormGroup>
       <ActionGroup>
-        <Button variant="primary">Submit</Button>
-        <Button variant="link">Cancel</Button>
+        <Button variant="primary" onClick={handleSubmit}>
+          Submit
+        </Button>
+        <Button variant="link" onClick={handleCancel}>
+          Cancel
+        </Button>
       </ActionGroup>
     </Form>
   );
 
   const drawer = (
     <>
-      <DrawerHead>
-        <Content component="h2">Drawer title</Content>
-        <DrawerActions>
-          <DrawerCloseButton onClick={onCloseClick} />
-        </DrawerActions>
-      </DrawerHead>
-      <DrawerPanelDescription>Drawer panel description</DrawerPanelDescription>
-      <DrawerPanelBody>Drawer panel body</DrawerPanelBody>
+      <NotificationDrawer>
+        <NotificationDrawerHeader count={3} onClose={onDrawerClose}>
+          <Dropdown
+            onSelect={onSelect}
+            isOpen={isOpen0}
+            onOpenChange={() => setIsOpenMap(new Array(7).fill(false))}
+            popperProps={{ position: 'right' }}
+            toggle={(toggleRef: Ref<MenuToggleElement>) => (
+              <MenuToggle
+                ref={toggleRef}
+                isExpanded={isOpen0}
+                onClick={onToggle(0)}
+                variant="plain"
+                aria-label={`Basic example header kebab toggle`}
+                icon={<EllipsisVIcon />}
+              />
+            )}
+          >
+            <DropdownList>{dropdownItems}</DropdownList>
+          </Dropdown>
+        </NotificationDrawerHeader>
+        <NotificationDrawerBody>
+          <NotificationDrawerList aria-label="Notifications in the basic example">
+            <NotificationDrawerListItem variant="info">
+              <NotificationDrawerListItemHeader
+                variant="info"
+                title="Unread info notification title"
+                srTitle="Info notification:"
+              >
+                <Dropdown
+                  onSelect={onSelect}
+                  isOpen={isOpen1}
+                  onOpenChange={() => setIsOpenMap(new Array(7).fill(false))}
+                  popperProps={{ position: 'right' }}
+                  toggle={(toggleRef: Ref<MenuToggleElement>) => (
+                    <MenuToggle
+                      ref={toggleRef}
+                      isExpanded={isOpen0}
+                      onClick={onToggle(1)}
+                      variant="plain"
+                      aria-label={`Basic example notification 1 kebab toggle`}
+                      icon={<EllipsisVIcon />}
+                    />
+                  )}
+                >
+                  <DropdownList>{dropdownItems}</DropdownList>
+                </Dropdown>
+              </NotificationDrawerListItemHeader>
+              <NotificationDrawerListItemBody timestamp="5 minutes ago">
+                This is an info notification description.
+              </NotificationDrawerListItemBody>
+            </NotificationDrawerListItem>
+            <NotificationDrawerListItem variant="danger">
+              <NotificationDrawerListItemHeader
+                variant="danger"
+                title="Unread danger notification title. This is a long title to show how the title will wrap if it is long and wraps to multiple lines."
+                srTitle="Danger notification:"
+              >
+                <Dropdown
+                  onSelect={onSelect}
+                  isOpen={isOpen2}
+                  onOpenChange={() => setIsOpenMap(new Array(7).fill(false))}
+                  popperProps={{ position: 'right' }}
+                  toggle={(toggleRef: Ref<MenuToggleElement>) => (
+                    <MenuToggle
+                      ref={toggleRef}
+                      isExpanded={isOpen2}
+                      onClick={onToggle(2)}
+                      variant="plain"
+                      aria-label={`Basic example notification 2 kebab toggle`}
+                      icon={<EllipsisVIcon />}
+                    />
+                  )}
+                >
+                  <DropdownList>{dropdownItems}</DropdownList>
+                </Dropdown>
+              </NotificationDrawerListItemHeader>
+              <NotificationDrawerListItemBody timestamp="10 minutes ago">
+                This is a danger notification description. This is a long description to show how the title will wrap if
+                it is long and wraps to multiple lines.
+              </NotificationDrawerListItemBody>
+            </NotificationDrawerListItem>
+            <NotificationDrawerListItem variant="danger">
+              <NotificationDrawerListItemHeader
+                truncateTitle={1}
+                variant="danger"
+                title="Unread danger notification title. This is a long title to show how the title will be truncated if it is long and will be shown in a single line."
+                srTitle="Danger notification:"
+              >
+                <Dropdown
+                  onSelect={onSelect}
+                  isOpen={isOpen3}
+                  onOpenChange={() => setIsOpenMap(new Array(7).fill(false))}
+                  popperProps={{ position: 'right' }}
+                  toggle={(toggleRef: Ref<MenuToggleElement>) => (
+                    <MenuToggle
+                      ref={toggleRef}
+                      isExpanded={isOpen3}
+                      onClick={onToggle(3)}
+                      variant="plain"
+                      aria-label={`Basic example notification 3 kebab toggle`}
+                      icon={<EllipsisVIcon />}
+                    />
+                  )}
+                >
+                  <DropdownList>{dropdownItems}</DropdownList>
+                </Dropdown>
+              </NotificationDrawerListItemHeader>
+              <NotificationDrawerListItemBody timestamp="10 minutes ago">
+                This is a danger notification description. This is a long description to show how the title will wrap if
+                it is long and wraps to multiple lines.
+              </NotificationDrawerListItemBody>
+            </NotificationDrawerListItem>
+            <NotificationDrawerListItem variant="warning" isRead>
+              <NotificationDrawerListItemHeader
+                variant="warning"
+                title="Read warning notification title"
+                srTitle="Warning notification:"
+              >
+                <Dropdown
+                  onSelect={onSelect}
+                  isOpen={isOpen4}
+                  onOpenChange={() => setIsOpenMap(new Array(7).fill(false))}
+                  popperProps={{ position: 'right' }}
+                  toggle={(toggleRef: Ref<MenuToggleElement>) => (
+                    <MenuToggle
+                      ref={toggleRef}
+                      isExpanded={isOpen4}
+                      onClick={onToggle(4)}
+                      variant="plain"
+                      aria-label={`Basic example notification 4 kebab toggle`}
+                      icon={<EllipsisVIcon />}
+                    />
+                  )}
+                >
+                  <DropdownList>{dropdownItems}</DropdownList>
+                </Dropdown>
+              </NotificationDrawerListItemHeader>
+              <NotificationDrawerListItemBody timestamp="20 minutes ago">
+                This is a warning notification description.
+              </NotificationDrawerListItemBody>
+            </NotificationDrawerListItem>
+            <NotificationDrawerListItem variant="success" isRead>
+              <NotificationDrawerListItemHeader
+                variant="success"
+                title="Read success notification title"
+                srTitle="Success notification:"
+              >
+                <Dropdown
+                  onSelect={onSelect}
+                  isOpen={isOpen5}
+                  onOpenChange={() => setIsOpenMap(new Array(7).fill(false))}
+                  popperProps={{ position: 'right' }}
+                  toggle={(toggleRef: Ref<MenuToggleElement>) => (
+                    <MenuToggle
+                      ref={toggleRef}
+                      isExpanded={isOpen5}
+                      onClick={onToggle(5)}
+                      variant="plain"
+                      aria-label={`Basic example notification 5 kebab toggle`}
+                      icon={<EllipsisVIcon />}
+                    />
+                  )}
+                >
+                  <DropdownList>{dropdownItems}</DropdownList>
+                </Dropdown>
+              </NotificationDrawerListItemHeader>
+              <NotificationDrawerListItemBody timestamp="30 minutes ago">
+                This is a success notification description.
+              </NotificationDrawerListItemBody>
+            </NotificationDrawerListItem>
+            <NotificationDrawerListItem isRead>
+              <NotificationDrawerListItemHeader title="Read (default) notification title" srTitle="notification:">
+                <Dropdown
+                  onSelect={onSelect}
+                  isOpen={isOpen6}
+                  onOpenChange={() => setIsOpenMap(new Array(7).fill(false))}
+                  popperProps={{ position: 'right' }}
+                  toggle={(toggleRef: Ref<MenuToggleElement>) => (
+                    <MenuToggle
+                      ref={toggleRef}
+                      isExpanded={isOpen6}
+                      onClick={onToggle(6)}
+                      variant="plain"
+                      aria-label={`Basic example notification 6 kebab toggle`}
+                      icon={<EllipsisVIcon />}
+                    />
+                  )}
+                >
+                  <DropdownList>{dropdownItems}</DropdownList>
+                </Dropdown>
+              </NotificationDrawerListItemHeader>
+              <NotificationDrawerListItemBody timestamp="35 minutes ago">
+                This is a default notification description.
+              </NotificationDrawerListItemBody>
+            </NotificationDrawerListItem>
+          </NotificationDrawerList>
+        </NotificationDrawerBody>
+      </NotificationDrawer>
     </>
   );
 
-  const [activeItem, setActiveItem] = React.useState(4);
-  const onNavSelect = (_event: React.FormEvent<HTMLInputElement>, result: any) => {
+  const [activeItem, setActiveItem] = useState(4);
+  const onNavSelect = (_event: FormEvent<HTMLInputElement>, result: any) => {
     setActiveItem(result.itemId);
   };
   const PageNav = (
@@ -196,10 +512,10 @@ export const TabsOpenDemo = () => {
     </PageSidebar>
   );
 
-  const [isUserDropdownOpen, setIsUserDropdownOpen] = React.useState(false);
+  const [isUserDropdownOpen, setIsUserDropdownOpen] = useState(false);
 
-  const [isRoleDropdownOpen, setIsRoleDropdownOpen] = React.useState(false);
-  const [selectedRole, setSelectedRole] = React.useState('Administrator');
+  const [isRoleDropdownOpen, setIsRoleDropdownOpen] = useState(false);
+  const [selectedRole, setSelectedRole] = useState('Administrator');
 
   const roles = ['Administrator', 'Member', 'Guest'];
   const roleDropdownItems = roles.map((role) => (
@@ -285,7 +601,7 @@ export const TabsOpenDemo = () => {
                 isOpen={isRoleDropdownOpen}
                 onSelect={onRoleDropdownSelect}
                 onOpenChange={setIsRoleDropdownOpen}
-                toggle={(toggleRef: React.RefObject<any>) => (
+                toggle={(toggleRef: RefObject<any>) => (
                   <MenuToggle
                     ref={toggleRef}
                     // icon={<MagicIcon color="var(--pf-t--global--color--brand--default)" />}
@@ -313,20 +629,10 @@ export const TabsOpenDemo = () => {
               </ToolbarItem>
               <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
                 <ToolbarItem>
-                  <Button
-                    aria-label="Settings"
-                    variant={ButtonVariant.plain}
-                    icon={<CogIcon />}
-                    onClick={() => setIsDrawerOpen(!isDrawerOpen)}
-                  />
+                  <Button aria-label="Settings" variant={ButtonVariant.plain} icon={<CogIcon />} />
                 </ToolbarItem>
                 <ToolbarItem>
-                  <Button
-                    aria-label="Help"
-                    variant={ButtonVariant.plain}
-                    icon={<QuestionCircleIcon />}
-                    onClick={() => setIsDrawerOpen(!isDrawerOpen)}
-                  />
+                  <Button aria-label="Help" variant={ButtonVariant.plain} icon={<QuestionCircleIcon />} />
                 </ToolbarItem>
               </ToolbarGroup>
             </ToolbarGroup>
@@ -336,7 +642,7 @@ export const TabsOpenDemo = () => {
                 onSelect={onUserDropdownSelect}
                 onOpenChange={setIsUserDropdownOpen}
                 popperProps={{ position: 'right' }}
-                toggle={(toggleRef: React.RefObject<any>) => (
+                toggle={(toggleRef: RefObject<any>) => (
                   <MenuToggle ref={toggleRef} isExpanded={isUserDropdownOpen} onClick={onUserDropdownToggle}>
                     John Doe
                   </MenuToggle>
@@ -374,7 +680,9 @@ export const TabsOpenDemo = () => {
       <PageSection isWidthLimited padding={{ default: 'noPadding' }}>
         <TabContent key={0} eventKey={0} id={`tabContent${0}`} activeKey={activeTabKey} hidden={0 !== activeTabKey}>
           <PageSection>
-            <Alert isInline variant="danger" title="Danger alert title" ouiaId="DangerAlert" />
+            {(validatedEmail === 'error' || validatedName === 'error') && (
+              <Alert isInline variant="danger" title={generateAlertContent()} ouiaId="DangerAlert" />
+            )}
           </PageSection>
           <PageSection>{pageForm}</PageSection>
         </TabContent>