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

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

@@ -184,7 +184,7 @@ export const NavHorizontalWithSubnav: React.FunctionComponent = () => {
                   onClick={onKebabDropdownToggle}
                   variant="plain"
                   aria-label="Settings and help"
-                  icon={<EllipsisVIcon aria-hidden="true" />}
+                  icon={<EllipsisVIcon />}
                 />
               )}
             >
@@ -204,7 +204,7 @@ export const NavHorizontalWithSubnav: React.FunctionComponent = () => {
                   onClick={onFullKebabToggle}
                   variant="plain"
                   aria-label="Toolbar menu"
-                  icon={<EllipsisVIcon aria-hidden="true" />}
+                  icon={<EllipsisVIcon />}
                 />
               )}
             >
@@ -258,7 +258,21 @@ export const NavHorizontalWithSubnav: 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>

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

@@ -151,7 +151,7 @@ export const NavManual: React.FunctionComponent = () => {
                   onClick={onKebabDropdownToggle}
                   variant="plain"
                   aria-label="Settings and help"
-                  icon={<EllipsisVIcon aria-hidden="true" />}
+                  icon={<EllipsisVIcon />}
                 />
               )}
             >
@@ -171,7 +171,7 @@ export const NavManual: React.FunctionComponent = () => {
                   onClick={onFullKebabToggle}
                   variant="plain"
                   aria-label="Toolbar menu"
-                  icon={<EllipsisVIcon aria-hidden="true" />}
+                  icon={<EllipsisVIcon />}
                 />
               )}
             >
@@ -234,7 +234,21 @@ export const NavManual: React.FunctionComponent = () => {
     </PageSidebar>
   );
   const pageId = 'main-content-page-layout-manual-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/NavWithSubnav.tsx

@@ -69,7 +69,21 @@ export const NavWithSubnav: 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 SubNav = (
     <Nav onSelect={onSubNavSelect} aria-label="Subnav" variant="horizontal-subnav">

package/src/demos/examples/Page/PageContextSelector.tsx

@@ -164,7 +164,7 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
                   isExpanded={isKebabDropdownOpen}
                   variant="plain"
                   aria-label="Settings and help"
-                  icon={<EllipsisVIcon aria-hidden="true" />}
+                  icon={<EllipsisVIcon />}
                 />
               )}
             >
@@ -184,7 +184,7 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
                   isExpanded={isFullKebabDropdownOpen}
                   variant="plain"
                   aria-label="Toolbar menu"
-                  icon={<EllipsisVIcon aria-hidden="true" />}
+                  icon={<EllipsisVIcon />}
                 />
               )}
             >
@@ -284,7 +284,20 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
 
   const mainContainerId = 'main-content';
 
-  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/Page/PageStickySectionBreadcrumb.tsx

@@ -147,7 +147,7 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
                   isExpanded={isKebabDropdownOpen}
                   variant="plain"
                   aria-label="Settings and help"
-                  icon={<EllipsisVIcon aria-hidden="true" />}
+                  icon={<EllipsisVIcon />}
                 />
               )}
             >
@@ -167,7 +167,7 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
                   isExpanded={isFullKebabDropdownOpen}
                   variant="plain"
                   aria-label="Toolbar menu"
-                  icon={<EllipsisVIcon aria-hidden="true" />}
+                  icon={<EllipsisVIcon />}
                 />
               )}
             >
@@ -251,7 +251,20 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
 
   const mainContainerId = 'main-content';
 
-  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/Page/PageStickySectionGroup.tsx

@@ -147,7 +147,7 @@ export const PageStickySectionGroup: React.FunctionComponent = () => {
                   isExpanded={isKebabDropdownOpen}
                   variant="plain"
                   aria-label="Settings and help"
-                  icon={<EllipsisVIcon aria-hidden="true" />}
+                  icon={<EllipsisVIcon />}
                 />
               )}
             >
@@ -167,7 +167,7 @@ export const PageStickySectionGroup: React.FunctionComponent = () => {
                   isExpanded={isFullKebabDropdownOpen}
                   variant="plain"
                   aria-label="Toolbar menu"
-                  icon={<EllipsisVIcon aria-hidden="true" />}
+                  icon={<EllipsisVIcon />}
                 />
               )}
             >
@@ -251,7 +251,20 @@ export const PageStickySectionGroup: React.FunctionComponent = () => {
 
   const mainContainerId = 'main-content';
 
-  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/Page/PageStickySectionGroupAlternate.tsx

@@ -139,7 +139,7 @@ export const PageStickySectionGroupAlternate: React.FunctionComponent = () => {
                   isExpanded={isKebabDropdownOpen}
                   variant="plain"
                   aria-label="Settings and help"
-                  icon={<EllipsisVIcon aria-hidden="true" />}
+                  icon={<EllipsisVIcon />}
                 />
               )}
             >
@@ -159,7 +159,7 @@ export const PageStickySectionGroupAlternate: React.FunctionComponent = () => {
                   isExpanded={isFullKebabDropdownOpen}
                   variant="plain"
                   aria-label="Toolbar menu"
-                  icon={<EllipsisVIcon aria-hidden="true" />}
+                  icon={<EllipsisVIcon />}
                 />
               )}
             >
@@ -243,7 +243,20 @@ export const PageStickySectionGroupAlternate: React.FunctionComponent = () => {
 
   const mainContainerId = 'main-content';
 
-  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/PrimaryDetail/PrimaryDetailCardView.tsx

@@ -467,7 +467,7 @@ export const PrimaryDetailCardView: React.FunctionComponent = () => {
               variant="plain"
               onClick={onToolbarKebabDropdownToggle}
               aria-label="Toolbar actions"
-              icon={<EllipsisVIcon aria-hidden="true" />}
+              icon={<EllipsisVIcon />}
             />
           )}
         >

package/src/demos/examples/Tabs/TabsAndTable.tsx

@@ -184,7 +184,7 @@ export const TablesAndTabs = () => {
           </ToolbarItem>
         </ToolbarToggleGroup>
         <ToolbarItem>
-          <MenuToggle variant="plain" aria-label="Sort columns" icon={<SortAmountDownIcon aria-hidden="true" />} />
+          <MenuToggle variant="plain" aria-label="Sort columns" icon={<SortAmountDownIcon />} />
         </ToolbarItem>
         <OverflowMenu breakpoint="md">
           <OverflowMenuContent>

package/src/demos/examples/Wizard/InPageWithDrawer.tsx

@@ -104,7 +104,21 @@ export const WizardFullPageWithDrawerDemo: React.FunctionComponent = () => {
   );
 
   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>

package/src/demos/examples/Wizard/InPageWithDrawerInformationalStep.tsx

@@ -105,7 +105,20 @@ export const WizardFullPageWithDrawerInfoStepDemo: React.FunctionComponent = ()
 
   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>

package/src/deprecated/components/DualListSelector/DualListSelectorTreeItem.tsx

@@ -119,7 +119,7 @@ const DualListSelectorTreeItemBase: React.FunctionComponent<DualListSelectorTree
                 tabIndex={-1}
               >
                 <span className={css(styles.dualListSelectorItemToggleIcon)}>
-                  <AngleRightIcon aria-hidden />
+                  <AngleRightIcon />
                 </span>
               </div>
             )}

package/src/deprecated/components/Wizard/WizardHeader.tsx

@@ -36,12 +36,7 @@ export const WizardHeader: React.FunctionComponent<WizardHeaderProps> = ({
   <div className={css(styles.wizardHeader)}>
     {!hideClose && (
       <div className={css(styles.wizardClose)}>
-        <Button
-          variant="plain"
-          aria-label={closeButtonAriaLabel}
-          onClick={onClose}
-          icon={<TimesIcon aria-hidden="true" />}
-        />
+        <Button variant="plain" aria-label={closeButtonAriaLabel} onClick={onClose} icon={<TimesIcon />} />
       </div>
     )}
     <div className={css(styles.wizardTitle)}>

package/src/deprecated/components/Wizard/WizardToggle.tsx

@@ -88,12 +88,12 @@ export const WizardToggle: React.FunctionComponent<WizardToggleProps> = ({
         <span className={css(styles.wizardToggleList)}>
           <span className={css(styles.wizardToggleListItem)}>
             <span className={css(styles.wizardToggleNum)}>{activeStepIndex}</span> {activeStepName}
-            {activeStepSubName && <AngleRightIcon className={css(styles.wizardToggleSeparator)} aria-hidden="true" />}
+            {activeStepSubName && <AngleRightIcon className={css(styles.wizardToggleSeparator)} />}
           </span>
           {activeStepSubName && <span className={css(styles.wizardToggleListItem)}>{activeStepSubName}</span>}
         </span>
         <span className={css(styles.wizardToggleIcon)}>
-          <CaretDownIcon aria-hidden="true" />
+          <CaretDownIcon />
         </span>
       </button>
       <div className={css(styles.wizardOuterWrap)}>

package/src/demos/examples/DashboardWrapper.js

@@ -1,126 +0,0 @@
-import React from 'react';
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  Content,
-  Nav,
-  NavItem,
-  NavList,
-  Page,
-  PageSection,
-  PageSidebar,
-  PageSidebarBody,
-  SkipToContent
-} from '@patternfly/react-core';
-import DashboardHeader from '@patternfly/react-core/src/demos/examples/DashboardHeader';
-
-export const DashboardBreadcrumb = (
-  <Breadcrumb>
-    <BreadcrumbItem>Section home</BreadcrumbItem>
-    <BreadcrumbItem to="#">Section title</BreadcrumbItem>
-    <BreadcrumbItem to="#">Section title</BreadcrumbItem>
-    <BreadcrumbItem to="#" isActive>
-      Section landing
-    </BreadcrumbItem>
-  </Breadcrumb>
-);
-
-export const PageTemplateTitle = (
-  <PageSection>
-    <Content>
-      <h1>Main title</h1>
-      <p>This is a full page demo.</p>
-    </Content>
-  </PageSection>
-);
-
-export default class DashboardWrapper extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      activeItem: 1
-    };
-
-    this.onNavSelect = (_event, result) => {
-      this.setState({
-        activeItem: result.itemId
-      });
-    };
-  }
-
-  render() {
-    const { activeItem } = this.state;
-    const {
-      children,
-      mainContainerId,
-      breadcrumb,
-      masthead,
-      sidebar,
-      sidebarNavOpen,
-      onPageResize = () => {},
-      hasNoBreadcrumb,
-      notificationDrawer,
-      isNotificationDrawerExpanded,
-      hasPageTemplateTitle,
-      ...pageProps
-    } = this.props;
-
-    let renderedBreadcrumb;
-    if (!hasNoBreadcrumb) {
-      renderedBreadcrumb = breadcrumb !== undefined ? breadcrumb : DashboardBreadcrumb;
-    }
-
-    const PageNav = (
-      <Nav onSelect={this.onNavSelect} aria-label="Nav">
-        <NavList>
-          <NavItem itemId={0} isActive={activeItem === 0} to="#system-panel">
-            System panel
-          </NavItem>
-          <NavItem itemId={1} isActive={activeItem === 1} to="#policy">
-            Policy
-          </NavItem>
-          <NavItem itemId={2} isActive={activeItem === 2} to="#auth">
-            Authentication
-          </NavItem>
-          <NavItem itemId={3} isActive={activeItem === 3} to="#network">
-            Network services
-          </NavItem>
-          <NavItem itemId={4} isActive={activeItem === 4} to="#server">
-            Server
-          </NavItem>
-        </NavList>
-      </Nav>
-    );
-
-    const _sidebar = (
-      <PageSidebar isSidebarOpen={sidebarNavOpen || false}>
-        <PageSidebarBody>{PageNav}</PageSidebarBody>
-      </PageSidebar>
-    );
-    const PageSkipToContent = (
-      <SkipToContent href={`#${mainContainerId ? mainContainerId : 'main-content-page-layout-default-nav'}`}>
-        Skip to content
-      </SkipToContent>
-    );
-
-    return (
-      <Page
-        masthead={masthead !== undefined ? masthead : <DashboardHeader />}
-        sidebar={sidebar !== undefined ? sidebar : _sidebar}
-        isManagedSidebar
-        skipToContent={PageSkipToContent}
-        breadcrumb={renderedBreadcrumb}
-        mainContainerId={mainContainerId ? mainContainerId : 'main-content-page-layout-default-nav'}
-        notificationDrawer={notificationDrawer}
-        isNotificationDrawerExpanded={isNotificationDrawerExpanded}
-        {...(typeof onPageResize === 'function' && {
-          onPageResize: (event, resizeObject) => onPageResize(event, resizeObject)
-        })}
-        {...pageProps}
-      >
-        {hasPageTemplateTitle && PageTemplateTitle}
-        {children}
-      </Page>
-    );
-  }
-}