@patternfly/react-core 6.1.0-prerelease.9 → 6.1.1-prerelease.0

package/src/demos/DashboardWrapper.tsx

@@ -98,8 +98,19 @@ export const DashboardWrapper: React.FC<DashboardWrapperProps> = ({
     </PageSidebar>
   );
 
+  const defaultContainerId = 'main-content-page-layout-default-nav';
+
+  const handleClick = (event: React.MouseEvent) => {
+    event.preventDefault();
+
+    const mainContentElement = document.getElementById(mainContainerId ?? defaultContainerId);
+    if (mainContentElement) {
+      mainContentElement.focus();
+    }
+  };
+
   const PageSkipToContent = (
-    <SkipToContent href={`#${mainContainerId ?? 'main-content-page-layout-default-nav'}`}>
+    <SkipToContent onClick={handleClick} href={`#${mainContainerId ?? defaultContainerId}`}>
       Skip to content
     </SkipToContent>
   );
@@ -112,7 +123,7 @@ export const DashboardWrapper: React.FC<DashboardWrapperProps> = ({
       skipToContent={PageSkipToContent}
       banner={banner}
       breadcrumb={renderedBreadcrumb}
-      mainContainerId={mainContainerId ?? 'main-content-page-layout-default-nav'}
+      mainContainerId={mainContainerId ?? defaultContainerId}
       notificationDrawer={notificationDrawer}
       isNotificationDrawerExpanded={isNotificationDrawerExpanded}
       {...(typeof onPageResize === 'function' && {

package/src/demos/DataList/examples/DataListExpandableControlInToolbar.tsx

@@ -182,7 +182,7 @@ export const DataListExpandableControlInToolbar: React.FunctionComponent = () =>
                         isExpanded={isOpen1}
                         variant="plain"
                         aria-label="Primary content kebab toggle"
-                        icon={<EllipsisVIcon aria-hidden="true" />}
+                        icon={<EllipsisVIcon />}
                       />
                     )}
                   >
@@ -258,7 +258,7 @@ export const DataListExpandableControlInToolbar: React.FunctionComponent = () =>
                         isExpanded={isOpen2}
                         variant="plain"
                         aria-label="Secondary content kebab toggle"
-                        icon={<EllipsisVIcon aria-hidden="true" />}
+                        icon={<EllipsisVIcon />}
                       />
                     )}
                   >
@@ -334,7 +334,7 @@ export const DataListExpandableControlInToolbar: React.FunctionComponent = () =>
                         isExpanded={isOpen3}
                         variant="plain"
                         aria-label="Tertiary content kebab toggle"
-                        icon={<EllipsisVIcon aria-hidden="true" />}
+                        icon={<EllipsisVIcon />}
                       />
                     )}
                   >

package/src/demos/ExpandableSection/examples/ExpandableTextDemo.tsx

@@ -8,13 +8,7 @@ export const ExpandableTextDemo: React.FunctionComponent = () => {
     setIsExpanded(isExpanded);
   };
 
-  const content = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec dignissim turpis, et tristique purus.
-  Phasellus efficitur ante quis dolor viverra imperdiet. Orci varius natoque penatibus et magnis dis parturient
-  montes, nascetur ridiculus mus. Pellentesque laoreet, sem ac elementum semper, lectus mauris vestibulum nulla,
-  eget volutpat massa neque vel turpis. Donec finibus enim eu leo accumsan consectetur. Praesent massa diam,
-  tincidunt eu dui ac, ullamcorper elementum est. Phasellus metus felis, venenatis vitae semper nec, porta a metus.
-  Vestibulum justo nisi, imperdiet id eleifend at, varius nec lorem. Fusce porttitor mollis nibh, ut elementum ante
-  commodo tincidunt. Integer tincidunt at ipsum non aliquet.`;
+  const content = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec dignissim turpis, et tristique purus. Phasellus efficitur ante quis dolor viverra imperdiet. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque laoreet, sem ac elementum semper, lectus mauris vestibulum nulla, eget volutpat massa neque vel turpis. Donec finibus enim eu leo accumsan consectetur. Praesent massa diam, tincidunt eu dui ac, ullamcorper elementum est. Phasellus metus felis, venenatis vitae semper nec, porta a metus. Vestibulum justo nisi, imperdiet id eleifend at, varius nec lorem. Fusce porttitor mollis nibh, ut elementum ante commodo tincidunt. Integer tincidunt at ipsum non aliquet.`;
 
   return (
     <ExpandableSection

package/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx

@@ -221,7 +221,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                     onClick={onKebabDropdownToggle}
                     variant="plain"
                     aria-label="Settings and help"
-                    icon={<EllipsisVIcon aria-hidden="true" />}
+                    icon={<EllipsisVIcon />}
                   />
                 )}
               >
@@ -279,7 +279,21 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
     </PageSidebar>
   );
   const pageId = 'main-content-page-layout-default-nav';
-  const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;
+
+  const handleClick = (event) => {
+    event.preventDefault();
+
+    const mainContentElement = document.getElementById(pageId);
+    if (mainContentElement) {
+      mainContentElement.focus();
+    }
+  };
+
+  const PageSkipToContent = (
+    <SkipToContent onClick={handleClick} href={`#${pageId}`}>
+      Skip to content
+    </SkipToContent>
+  );
 
   const PageBreadcrumb = (
     <Breadcrumb>
@@ -340,7 +354,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
               variant="plain"
               onClick={() => onToggle('toggle-id-0')}
               isExpanded={isActionsMenuOpen['toggle-id-0'] || false}
-              icon={<EllipsisVIcon aria-hidden="true" />}
+              icon={<EllipsisVIcon />}
             />
           )}
         >
@@ -374,7 +388,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                       variant="plain"
                       onClick={() => onToggle('toggle-id-1')}
                       isExpanded={isActionsMenuOpen['toggle-id-1'] || false}
-                      icon={<EllipsisVIcon aria-hidden="true" />}
+                      icon={<EllipsisVIcon />}
                     />
                   )}
                 >
@@ -409,7 +423,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                       variant="plain"
                       onClick={() => onToggle('toggle-id-2')}
                       isExpanded={isActionsMenuOpen['toggle-id-2'] || false}
-                      icon={<EllipsisVIcon aria-hidden="true" />}
+                      icon={<EllipsisVIcon />}
                     />
                   )}
                 >
@@ -445,7 +459,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                       variant="plain"
                       onClick={() => onToggle('toggle-id-3')}
                       isExpanded={isActionsMenuOpen['toggle-id-3'] || false}
-                      icon={<EllipsisVIcon aria-hidden="true" />}
+                      icon={<EllipsisVIcon />}
                     />
                   )}
                 >
@@ -480,7 +494,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                       variant="plain"
                       onClick={() => onToggle('toggle-id-4')}
                       isExpanded={isActionsMenuOpen['toggle-id-4'] || false}
-                      icon={<EllipsisVIcon aria-hidden="true" />}
+                      icon={<EllipsisVIcon />}
                     />
                   )}
                 >

package/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx

@@ -271,7 +271,7 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
                     onClick={onKebabDropdownToggle}
                     variant="plain"
                     aria-label="Settings and help"
-                    icon={<EllipsisVIcon aria-hidden="true" />}
+                    icon={<EllipsisVIcon />}
                   />
                 )}
               >
@@ -329,7 +329,21 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
     </PageSidebar>
   );
   const pageId = 'main-content-page-layout-default-nav';
-  const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;
+
+  const handleClick = (event) => {
+    event.preventDefault();
+
+    const mainContentElement = document.getElementById(pageId);
+    if (mainContentElement) {
+      mainContentElement.focus();
+    }
+  };
+
+  const PageSkipToContent = (
+    <SkipToContent onClick={handleClick} href={`#${pageId}`}>
+      Skip to content
+    </SkipToContent>
+  );
 
   const PageBreadcrumb = (
     <Breadcrumb>
@@ -391,7 +405,7 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
               variant="plain"
               onClick={() => onToggle('toggle-id-0')}
               isExpanded={isActionsMenuOpen['toggle-id-0'] || false}
-              icon={<EllipsisVIcon aria-hidden="true" />}
+              icon={<EllipsisVIcon />}
             />
           )}
         >
@@ -432,7 +446,7 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
                           variant="plain"
                           onClick={() => onToggle('toggle-id-5')}
                           isExpanded={isActionsMenuOpen['toggle-id-5'] || false}
-                          icon={<EllipsisVIcon aria-hidden="true" />}
+                          icon={<EllipsisVIcon />}
                         />
                       )}
                     >
@@ -467,7 +481,7 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
                           variant="plain"
                           onClick={() => onToggle('toggle-id-6')}
                           isExpanded={isActionsMenuOpen['toggle-id-6'] || false}
-                          icon={<EllipsisVIcon aria-hidden="true" />}
+                          icon={<EllipsisVIcon />}
                         />
                       )}
                     >
@@ -503,7 +517,7 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
                           variant="plain"
                           onClick={() => onToggle('toggle-id-7')}
                           isExpanded={isActionsMenuOpen['toggle-id-7'] || false}
-                          icon={<EllipsisVIcon aria-hidden="true" />}
+                          icon={<EllipsisVIcon />}
                         />
                       )}
                     >
@@ -538,7 +552,7 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
                           variant="plain"
                           onClick={() => onToggle('toggle-id-8')}
                           isExpanded={isActionsMenuOpen['toggle-id-8'] || false}
-                          icon={<EllipsisVIcon aria-hidden="true" />}
+                          icon={<EllipsisVIcon />}
                         />
                       )}
                     >
@@ -582,7 +596,7 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
                           variant="plain"
                           onClick={() => onToggle('toggle-id-9')}
                           isExpanded={isActionsMenuOpen['toggle-id-9'] || false}
-                          icon={<EllipsisVIcon aria-hidden="true" />}
+                          icon={<EllipsisVIcon />}
                         />
                       )}
                     >
@@ -617,7 +631,7 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
                           variant="plain"
                           onClick={() => onToggle('toggle-id-10')}
                           isExpanded={isActionsMenuOpen['toggle-id-10'] || false}
-                          icon={<EllipsisVIcon aria-hidden="true" />}
+                          icon={<EllipsisVIcon />}
                         />
                       )}
                     >
@@ -653,7 +667,7 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
                           variant="plain"
                           onClick={() => onToggle('toggle-id-11')}
                           isExpanded={isActionsMenuOpen['toggle-id-11'] || false}
-                          icon={<EllipsisVIcon aria-hidden="true" />}
+                          icon={<EllipsisVIcon />}
                         />
                       )}
                     >
@@ -688,7 +702,7 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
                           variant="plain"
                           onClick={() => onToggle('toggle-id-12')}
                           isExpanded={isActionsMenuOpen['toggle-id-12'] || false}
-                          icon={<EllipsisVIcon aria-hidden="true" />}
+                          icon={<EllipsisVIcon />}
                         />
                       )}
                     >

package/src/demos/PasswordGenerator.md

@@ -151,7 +151,7 @@ const PasswordGenerator: React.FunctionComponent = () => {
             itemId={0}
             actions={
               <MenuItemAction
-                icon={<RedoIcon aria-hidden />}
+                icon={<RedoIcon />}
                 onClick={(e) => {
                   setGeneratedPassword(generatePassword());
                 }}

package/src/demos/RTL/examples/PaginatedTable.jsx

@@ -374,7 +374,7 @@ export const PaginatedTableAction = () => {
                       onClick={onKebabDropdownToggle}
                       variant="plain"
                       aria-label={translation.kebabDropdown.settingsAndHelp}
-                      icon={<EllipsisVIcon aria-hidden="true" />}
+                      icon={<EllipsisVIcon />}
                     />
                   )}
                 >
@@ -394,7 +394,7 @@ export const PaginatedTableAction = () => {
                       onClick={onFullKebabToggle}
                       variant="plain"
                       aria-label={translation.kebabAndUserDropdown.toolbarMenuAriaLabel}
-                      icon={<EllipsisVIcon aria-hidden="true" />}
+                      icon={<EllipsisVIcon />}
                     />
                   )}
                 >

package/src/demos/RTL/examples/PaginatedTable.tsx

@@ -398,7 +398,7 @@ export const PaginatedTableAction: React.FunctionComponent = () => {
                       onClick={onKebabDropdownToggle}
                       variant="plain"
                       aria-label={translation.kebabDropdown.settingsAndHelp}
-                      icon={<EllipsisVIcon aria-hidden="true" />}
+                      icon={<EllipsisVIcon />}
                     />
                   )}
                 >
@@ -418,7 +418,7 @@ export const PaginatedTableAction: React.FunctionComponent = () => {
                       onClick={onFullKebabToggle}
                       variant="plain"
                       aria-label={translation.kebabAndUserDropdown.toolbarMenuAriaLabel}
-                      icon={<EllipsisVIcon aria-hidden="true" />}
+                      icon={<EllipsisVIcon />}
                     />
                   )}
                 >

package/src/demos/assets/PF-IconLogo.svg

@@ -0,0 +1,17 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Logo">
+<path id="Rectangle-Copy-17" fill-rule="evenodd" clip-rule="evenodd" d="M15.6522 0H40V24.3478H37.3913C25.3851 24.3478 15.6522 14.6149 15.6522 2.6087V0Z" fill="#0066CC"/>
+<path id="Path-2" fill-rule="evenodd" clip-rule="evenodd" d="M40 0.869568L16.5217 40H34.9367C37.7331 40 40 37.7331 40 34.9367V0.869568Z" fill="url(#paint0_linear_6460_7774)"/>
+<path id="Path-2_2" fill-rule="evenodd" clip-rule="evenodd" d="M39.1304 9.53674e-06L-3.8147e-06 23.4783V5.0633C-3.8147e-06 2.26692 2.26691 9.53674e-06 5.06329 9.53674e-06L39.1304 9.53674e-06Z" fill="url(#paint1_linear_6460_7774)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_6460_7774" x1="1613.04" y1="0.869504" x2="-337.034" y2="3251" gradientUnits="userSpaceOnUse">
+<stop stop-color="#2B9AF3"/>
+<stop offset="1" stop-color="#73BCF7" stop-opacity="0.502213"/>
+</linearGradient>
+<linearGradient id="paint1_linear_6460_7774" x1="39.1305" y1="-1573.04" x2="-3211" y2="377.033" gradientUnits="userSpaceOnUse">
+<stop stop-color="#2B9AF3"/>
+<stop offset="1" stop-color="#73BCF7" stop-opacity="0.502213"/>
+</linearGradient>
+</defs>
+</svg>

package/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx

@@ -248,7 +248,7 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
               variant="plain"
               onClick={() => onDropdownToggle('dropdown-toggle-id-0')}
               aria-label="Notification drawer actions"
-              icon={<EllipsisVIcon aria-hidden="true" />}
+              icon={<EllipsisVIcon />}
             />
           )}
         >
@@ -279,7 +279,7 @@ export const AlertGroupToastWithNotificationDrawer: React.FunctionComponent = ()
                         variant="plain"
                         onClick={() => onDropdownToggle(key)}
                         aria-label={`Notification ${index + 1} actions`}
-                        icon={<EllipsisVIcon aria-hidden="true" />}
+                        icon={<EllipsisVIcon />}
                       />
                     )}
                   >

package/src/demos/examples/Card/CardEventsView.tsx

@@ -78,7 +78,7 @@ export const CardEventsView: React.FunctionComponent = () => {
                   <Flex flexWrap={{ default: 'nowrap' }}>
                     <FlexItem>
                       <Icon status="danger">
-                        <ExclamationCircleIcon aria-hidden="true" />
+                        <ExclamationCircleIcon />
                       </Icon>
                     </FlexItem>
                     <FlexItem>
@@ -99,7 +99,7 @@ export const CardEventsView: React.FunctionComponent = () => {
                   <Flex flexWrap={{ default: 'nowrap' }}>
                     <FlexItem>
                       <Icon status="success">
-                        <CheckCircleIcon aria-hidden="true" />
+                        <CheckCircleIcon />
                       </Icon>
                     </FlexItem>
                     <FlexItem>
@@ -135,7 +135,7 @@ export const CardEventsView: React.FunctionComponent = () => {
                   <Flex flexWrap={{ default: 'nowrap' }}>
                     <FlexItem>
                       <Icon status="success">
-                        <CheckCircleIcon aria-hidden="true" />
+                        <CheckCircleIcon />
                       </Icon>
                     </FlexItem>
                     <FlexItem>

package/src/demos/examples/Card/CardHorizontalGrid.tsx

@@ -63,7 +63,7 @@ export const CardHorizontalGrid: React.FunctionComponent = () => {
           onClick={onActionToggle}
           variant="plain"
           aria-label="Horizontal card grid demo kebab toggle"
-          icon={<EllipsisVIcon aria-hidden="true" />}
+          icon={<EllipsisVIcon />}
         />
       )}
     >

package/src/demos/examples/Card/CardUtilizationDemo3.tsx

@@ -81,7 +81,7 @@ export const CardUtilizationDemo3: React.FunctionComponent = () => {
                 </FlexItem>
                 <Flex>
                   <Icon status="danger">
-                    <ExclamationCircleIcon aria-hidden />
+                    <ExclamationCircleIcon />
                   </Icon>
                   <a href="#">25 incidents detected</a>
                 </Flex>

package/src/demos/examples/DateTimePicker/DateTimePicker.tsx

@@ -65,7 +65,7 @@ export const DateTimePicker: React.FunctionComponent = () => {
           onClick={onToggleTime}
           isExpanded={isTimeOpen}
           aria-label="Time picker"
-          icon={<OutlinedClockIcon aria-hidden="true" />}
+          icon={<OutlinedClockIcon />}
         />
       )}
     >

package/src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx

@@ -211,7 +211,7 @@ export const MastheadWithHorizontalNav: React.FunctionComponent = () => {
                   isExpanded={isKebabDropdownOpen}
                   variant="plain"
                   aria-label="Settings and help"
-                  icon={<EllipsisVIcon aria-hidden="true" />}
+                  icon={<EllipsisVIcon />}
                 />
               )}
             >
@@ -231,7 +231,7 @@ export const MastheadWithHorizontalNav: React.FunctionComponent = () => {
                   isExpanded={isFullKebabDropdownOpen}
                   variant="plain"
                   aria-label="Toolbar menu"
-                  icon={<EllipsisVIcon aria-hidden="true" />}
+                  icon={<EllipsisVIcon />}
                 />
               )}
             >
@@ -282,7 +282,20 @@ export const MastheadWithHorizontalNav: React.FunctionComponent = () => {
 
   const mainContainerId = 'main-content-page-layout-tertiary-nav';
 
-  const pageSkipToContent = <SkipToContent href={`#${mainContainerId}`}>Skip to content</SkipToContent>;
+  const handleClick = (event) => {
+    event.preventDefault();
+
+    const mainContentElement = document.getElementById(mainContainerId);
+    if (mainContentElement) {
+      mainContentElement.focus();
+    }
+  };
+
+  const pageSkipToContent = (
+    <SkipToContent onClick={handleClick} href={`#${mainContainerId}`}>
+      Skip to content
+    </SkipToContent>
+  );
 
   return (
     <Page

package/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx

@@ -411,7 +411,7 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
                   isExpanded={isKebabDropdownOpen}
                   variant="plain"
                   aria-label="Settings and help"
-                  icon={<EllipsisVIcon aria-hidden="true" />}
+                  icon={<EllipsisVIcon />}
                 />
               )}
             >
@@ -431,7 +431,7 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
                   isExpanded={isFullKebabDropdownOpen}
                   variant="plain"
                   aria-label="Toolbar menu"
-                  icon={<EllipsisVIcon aria-hidden="true" />}
+                  icon={<EllipsisVIcon />}
                 />
               )}
             >
@@ -515,7 +515,20 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
 
   const mainContainerId = 'main-content-page-layout-tertiary-nav';
 
-  const pageSkipToContent = <SkipToContent href={`#${mainContainerId}`}>Skip to content</SkipToContent>;
+  const handleClick = (event) => {
+    event.preventDefault();
+
+    const mainContentElement = document.getElementById(mainContainerId);
+    if (mainContentElement) {
+      mainContentElement.focus();
+    }
+  };
+
+  const pageSkipToContent = (
+    <SkipToContent onClick={handleClick} href={`#${mainContainerId}`}>
+      Skip to content
+    </SkipToContent>
+  );
 
   return (
     <Page

package/src/demos/examples/Nav/NavDefault.tsx

@@ -58,7 +58,21 @@ export const NavDefault: React.FunctionComponent = () => {
     </PageSidebar>
   );
   const pageId = 'main-content-page-layout-default-nav';
-  const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;
+
+  const handleClick = (event) => {
+    event.preventDefault();
+
+    const mainContentElement = document.getElementById(pageId);
+    if (mainContentElement) {
+      mainContentElement.focus();
+    }
+  };
+
+  const PageSkipToContent = (
+    <SkipToContent onClick={handleClick} href={`#${pageId}`}>
+      Skip to content
+    </SkipToContent>
+  );
 
   return (
     <>

package/src/demos/examples/Nav/NavExpandable.tsx

@@ -84,7 +84,21 @@ export const NavExpandableDemo: React.FunctionComponent = () => {
     </PageSidebar>
   );
   const pageId = 'main-content-page-layout-expandable-nav';
-  const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;
+
+  const handleClick = (event) => {
+    event.preventDefault();
+
+    const mainContentElement = document.getElementById(pageId);
+    if (mainContentElement) {
+      mainContentElement.focus();
+    }
+  };
+
+  const PageSkipToContent = (
+    <SkipToContent onClick={handleClick} href={`#${pageId}`}>
+      Skip to content
+    </SkipToContent>
+  );
 
   return (
     <React.Fragment>

package/src/demos/examples/Nav/NavFlyout.tsx

@@ -157,7 +157,7 @@ export const NavFlyout: React.FunctionComponent = () => {
                   onClick={onKebabDropdownToggle}
                   variant="plain"
                   aria-label="Settings and help"
-                  icon={<EllipsisVIcon aria-hidden="true" />}
+                  icon={<EllipsisVIcon />}
                 />
               )}
             >
@@ -177,7 +177,7 @@ export const NavFlyout: React.FunctionComponent = () => {
                   onClick={onFullKebabToggle}
                   variant="plain"
                   aria-label="Toolbar menu"
-                  icon={<EllipsisVIcon aria-hidden="true" />}
+                  icon={<EllipsisVIcon />}
                 />
               )}
             >
@@ -259,7 +259,21 @@ export const NavFlyout: React.FunctionComponent = () => {
   );
 
   const pageId = 'main-content-page-layout-flyout-nav';
-  const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to Content</SkipToContent>;
+
+  const handleClick = (event) => {
+    event.preventDefault();
+
+    const mainContentElement = document.getElementById(pageId);
+    if (mainContentElement) {
+      mainContentElement.focus();
+    }
+  };
+
+  const PageSkipToContent = (
+    <SkipToContent onClick={handleClick} href={`#${pageId}`}>
+      Skip to content
+    </SkipToContent>
+  );
 
   return (
     <Page

package/src/demos/examples/Nav/NavGrouped.tsx

@@ -67,7 +67,21 @@ export const NavGrouped: React.FunctionComponent = () => {
     </PageSidebar>
   );
   const pageId = 'main-content-page-layout-group-nav';
-  const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to Content</SkipToContent>;
+
+  const handleClick = (event) => {
+    event.preventDefault();
+
+    const mainContentElement = document.getElementById(pageId);
+    if (mainContentElement) {
+      mainContentElement.focus();
+    }
+  };
+
+  const PageSkipToContent = (
+    <SkipToContent onClick={handleClick} href={`#${pageId}`}>
+      Skip to content
+    </SkipToContent>
+  );
 
   return (
     <>

package/src/demos/examples/Nav/NavHorizontal.tsx

@@ -135,7 +135,7 @@ export const NavHorizontal: React.FunctionComponent = () => {
                   onClick={onKebabDropdownToggle}
                   variant="plain"
                   aria-label="Settings and help"
-                  icon={<EllipsisVIcon aria-hidden="true" />}
+                  icon={<EllipsisVIcon />}
                 />
               )}
             >
@@ -155,7 +155,7 @@ export const NavHorizontal: React.FunctionComponent = () => {
                   onClick={onFullKebabToggle}
                   variant="plain"
                   aria-label="Toolbar menu"
-                  icon={<EllipsisVIcon aria-hidden="true" />}
+                  icon={<EllipsisVIcon />}
                 />
               )}
             >
@@ -204,7 +204,21 @@ export const NavHorizontal: React.FunctionComponent = () => {
   );
 
   const pageId = 'main-content-page-layout-horizontal-nav';
-  const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;
+
+  const handleClick = (event) => {
+    event.preventDefault();
+
+    const mainContentElement = document.getElementById(pageId);
+    if (mainContentElement) {
+      mainContentElement.focus();
+    }
+  };
+
+  const PageSkipToContent = (
+    <SkipToContent onClick={handleClick} href={`#${pageId}`}>
+      Skip to content
+    </SkipToContent>
+  );
 
   return (
     <React.Fragment>