@patternfly/react-core 6.3.0-prerelease.3 → 6.3.0-prerelease.31

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

@@ -49,7 +49,6 @@ import {
   SearchInput,
   Tooltip
 } from '@patternfly/react-core';
-import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
@@ -394,7 +393,7 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
               <Popper trigger={toggle} triggerRef={toggleRef} popper={menu} popperRef={menuRef} isVisible={isOpen} />
             </ToolbarItem>
             <ToolbarItem>
-              <Button aria-label="Settings" variant={ButtonVariant.plain} icon={<CogIcon />} />
+              <Button aria-label="Settings" isSettings variant="plain" />
             </ToolbarItem>
             <ToolbarItem>
               <Button aria-label="Help" variant={ButtonVariant.plain} icon={<QuestionCircleIcon />} />
@@ -473,9 +472,7 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
     <Masthead>
       <MastheadMain>
         <MastheadToggle>
-          <PageToggleButton variant="plain" aria-label="Global navigation">
-            <BarsIcon />
-          </PageToggleButton>
+          <PageToggleButton isHamburgerButton aria-label="Global navigation" />
         </MastheadToggle>
         <MastheadBrand>
           <MastheadLogo>
@@ -544,15 +541,15 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
       isBreadcrumbWidthLimited
       isBreadcrumbGrouped
       additionalGroupedContent={
-        <PageSection>
+        <PageSection aria-labelledby="main-title">
           <Content>
-            <h1>Main title</h1>
+            <h1 id="main-title">Main title</h1>
             <p>This is a full page demo.</p>
           </Content>
         </PageSection>
       }
     >
-      <PageSection>
+      <PageSection aria-label="Card gallery">
         <Gallery hasGutter>
           {Array.from({ length: 10 }).map((_value, index) => (
             <GalleryItem key={index}>

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

@@ -84,16 +84,16 @@ export const NavDefault: React.FunctionComponent = () => {
         breadcrumb={DashboardBreadcrumb}
         mainContainerId={pageId}
       >
-        <PageSection>
+        <PageSection aria-labelledby="main-title">
           <Content>
-            <h1>Main title</h1>
+            <h1 id="main-title">Main title</h1>
             <p>
               Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because <br />
               of its relative line height of 1.5.
             </p>
           </Content>
         </PageSection>
-        <PageSection>
+        <PageSection aria-label="Card gallery">
           <Gallery hasGutter>
             {Array.from({ length: 10 }).map((_value, index) => (
               <GalleryItem key={index}>

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

@@ -129,7 +129,7 @@ export const NavDrilldown: React.FunctionComponent = () => {
 
   return (
     <Page masthead={<DashboardHeader />} sidebar={sidebar}>
-      <PageSection>
+      <PageSection aria-label="Navigation layer">
         <strong>Nav Layer: </strong>
         {navLayer}
       </PageSection>

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

@@ -110,16 +110,16 @@ export const NavExpandableDemo: React.FunctionComponent = () => {
         breadcrumb={DashboardBreadcrumb}
         mainContainerId={pageId}
       >
-        <PageSection>
+        <PageSection aria-labelledby="main-title">
           <Content>
-            <h1>Main title</h1>
+            <h1 id="main-title">Main title</h1>
             <p>
               Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because <br />
               of its relative line height of 1.5.
             </p>
           </Content>
         </PageSection>
-        <PageSection>
+        <PageSection aria-label="Card gallery">
           <Gallery hasGutter>
             {Array.from({ length: 10 }).map((_value, index) => (
               <GalleryItem key={index}>

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

@@ -36,7 +36,6 @@ import {
   ToolbarGroup,
   ToolbarItem
 } from '@patternfly/react-core';
-import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
@@ -139,7 +138,7 @@ export const NavFlyout: React.FunctionComponent = () => {
           </ToolbarItem>
           <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
             <ToolbarItem>
-              <Button aria-label="Settings" variant={ButtonVariant.plain} icon={<CogIcon />} />
+              <Button aria-label="Settings" isSettings variant="plain" />
             </ToolbarItem>
             <ToolbarItem>
               <Button aria-label="Help" variant={ButtonVariant.plain} icon={<QuestionCircleIcon />} />
@@ -220,11 +219,9 @@ export const NavFlyout: React.FunctionComponent = () => {
         <MastheadToggle>
           <PageToggleButton
             onSidebarToggle={isMobileView ? onSidebarToggleMobile : onSidebarToggleDesktop}
-            variant="plain"
+            isHamburgerButton
             aria-label="Global navigation"
-          >
-            <BarsIcon />
-          </PageToggleButton>
+          />
         </MastheadToggle>
         <MastheadBrand>
           <MastheadLogo>
@@ -284,9 +281,15 @@ export const NavFlyout: React.FunctionComponent = () => {
       skipToContent={PageSkipToContent}
       mainContainerId={pageId}
     >
-      <PageSection>Section 1</PageSection>
-      <PageSection>Section 2</PageSection>
-      <PageSection>Section 3</PageSection>
+      <PageSection aria-labelledby="section-1">
+        <h2 id="section-1">Section 1</h2>
+      </PageSection>
+      <PageSection aria-labelledby="section-2">
+        <h2 id="section-2">Section 2</h2>
+      </PageSection>
+      <PageSection aria-labelledby="section-3">
+        <h2 id="section-3">Section 3</h2>
+      </PageSection>
     </Page>
   );
 };

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

@@ -92,19 +92,27 @@ export const NavGrouped: React.FunctionComponent = () => {
         skipToContent={PageSkipToContent}
         mainContainerId={pageId}
       >
-        <PageSection>
+        <PageSection aria-labelledby="main-title">
           <Content>
-            <h1>Main title</h1>
+            <h1 id="main-title">Main title</h1>
             <p>
               Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because <br />
               of its relative line height of 1.5.
             </p>
           </Content>
         </PageSection>
-        <PageSection>Section 1</PageSection>
-        <PageSection>Section 2</PageSection>
-        <PageSection>Section 3</PageSection>
-        <PageSection>Content</PageSection>
+        <PageSection aria-labelledby="section-1">
+          <h2 id="section-1">Section 1</h2>
+        </PageSection>
+        <PageSection aria-labelledby="section-2">
+          <h2 id="section-2">Section 2</h2>
+        </PageSection>
+        <PageSection aria-labelledby="section-3">
+          <h2 id="section-3">Section 3</h2>
+        </PageSection>
+        <PageSection aria-labelledby="content">
+          <h2 id="content">Content</h2>
+        </PageSection>
       </Page>
     </>
   );

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

@@ -117,7 +117,7 @@ export const NavHorizontal: React.FunctionComponent = () => {
           </ToolbarItem>
           <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
             <ToolbarItem>
-              <Button aria-label="Settings" variant={ButtonVariant.plain} icon={<CogIcon />} />
+              <Button aria-label="Settings" isSettings variant="plain" />
             </ToolbarItem>
             <ToolbarItem>
               <Button aria-label="Help" variant={ButtonVariant.plain} icon={<QuestionCircleIcon />} />
@@ -229,16 +229,16 @@ export const NavHorizontal: React.FunctionComponent = () => {
         breadcrumb={DashboardBreadcrumb}
         mainContainerId={pageId}
       >
-        <PageSection>
+        <PageSection aria-labelledby="main-title">
           <Content>
-            <h1>Main title</h1>
+            <h1 id="main-title">Main title</h1>
             <p>
               Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because <br />
               of its relative line height of 1.5.
             </p>
           </Content>
         </PageSection>
-        <PageSection>
+        <PageSection aria-label="Card gallery">
           <Gallery hasGutter>
             {Array.from({ length: 10 }).map((_value, index) => (
               <GalleryItem key={index}>

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

@@ -39,7 +39,6 @@ import {
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-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 imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';
@@ -166,7 +165,7 @@ export const NavHorizontalWithSubnav: React.FunctionComponent = () => {
           </ToolbarItem>
           <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
             <ToolbarItem>
-              <Button aria-label="Settings" variant={ButtonVariant.plain} icon={<CogIcon />} />
+              <Button aria-label="Settings" isSettings variant="plain" />
             </ToolbarItem>
             <ToolbarItem>
               <Button aria-label="Help" variant={ButtonVariant.plain} icon={<QuestionCircleIcon />} />
@@ -244,9 +243,7 @@ export const NavHorizontalWithSubnav: React.FunctionComponent = () => {
     <Masthead>
       <MastheadMain>
         <MastheadToggle>
-          <PageToggleButton variant="plain" aria-label="Global navigation">
-            <BarsIcon />
-          </PageToggleButton>
+          <PageToggleButton isHamburgerButton aria-label="Global navigation" />
         </MastheadToggle>
         <MastheadBrand>
           <MastheadLogo>
@@ -278,22 +275,22 @@ export const NavHorizontalWithSubnav: React.FunctionComponent = () => {
   return (
     <Fragment>
       <Page masthead={masthead} skipToContent={PageSkipToContent} mainContainerId={pageId}>
-        <PageSection type={PageSectionTypes.subNav} isWidthLimited>
+        <PageSection type={PageSectionTypes.subNav} isWidthLimited aria-label="Subnav">
           {SubNav}
         </PageSection>
-        <PageSection type={PageSectionTypes.breadcrumb} isWidthLimited>
+        <PageSection type={PageSectionTypes.breadcrumb} isWidthLimited aria-label="Breadcrumb">
           {DashboardBreadcrumb}
         </PageSection>
-        <PageSection>
+        <PageSection aria-labelledby="main-title">
           <Content>
-            <h1>Main title</h1>
+            <h1 id="main-title">Main title</h1>
             <p>
               Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because <br />
               of it’s relative line height of 1.5.
             </p>
           </Content>
         </PageSection>
-        <PageSection>
+        <PageSection aria-label="Card gallery">
           <Gallery hasGutter>
             {Array.from({ length: 10 }).map((_value, index) => (
               <GalleryItem key={index}>

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

@@ -41,7 +41,6 @@ import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';
 
@@ -133,7 +132,7 @@ export const NavManual: React.FunctionComponent = () => {
           </ToolbarItem>
           <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
             <ToolbarItem>
-              <Button aria-label="Settings" variant={ButtonVariant.plain} icon={<CogIcon />} />
+              <Button aria-label="Settings" isSettings variant="plain" />
             </ToolbarItem>
             <ToolbarItem>
               <Button aria-label="Help" variant={ButtonVariant.plain} icon={<QuestionCircleIcon />} />
@@ -213,11 +212,9 @@ export const NavManual: React.FunctionComponent = () => {
         <MastheadToggle>
           <PageToggleButton
             onSidebarToggle={isMobileView ? onSidebarToggleMobile : onSidebarToggleDesktop}
-            variant="plain"
+            isHamburgerButton
             aria-label="Global navigation"
-          >
-            <BarsIcon />
-          </PageToggleButton>
+          />
         </MastheadToggle>
         <MastheadBrand>
           <MastheadLogo>
@@ -260,16 +257,16 @@ export const NavManual: React.FunctionComponent = () => {
         skipToContent={PageSkipToContent}
         mainContainerId={pageId}
       >
-        <PageSection>
+        <PageSection aria-labelledby="main-title">
           <Content>
-            <h1>Main title</h1>
+            <h1 id="main-title">Main title</h1>
             <p>
               Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because <br />
               of its relative line height of 1.5.
             </p>
           </Content>
         </PageSection>
-        <PageSection>
+        <PageSection aria-label="Card gallery">
           <Gallery hasGutter>
             {Array.from({ length: 10 }).map((_value, index) => (
               <GalleryItem key={index}>

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

@@ -122,22 +122,22 @@ export const NavWithSubnav: React.FunctionComponent = () => {
         skipToContent={PageSkipToContent}
         mainContainerId={pageId}
       >
-        <PageSection type={PageSectionTypes.subNav} isWidthLimited>
+        <PageSection type={PageSectionTypes.subNav} isWidthLimited aria-label="Subnav">
           {SubNav}
         </PageSection>
-        <PageSection type={PageSectionTypes.breadcrumb} isWidthLimited>
+        <PageSection type={PageSectionTypes.breadcrumb} isWidthLimited aria-label="Breadcrumb">
           {DashboardBreadcrumb}
         </PageSection>
-        <PageSection>
+        <PageSection aria-labelledby="main-title">
           <Content>
-            <h1>Main title</h1>
+            <h1 id="main-title">Main title</h1>
             <p>
               Body text should be Red Hat Text at 1rem(16px). It should have leading of 1.5rem(24px) because <br />
               of it’s relative line height of 1.5.
             </p>
           </Content>
         </PageSection>
-        <PageSection>
+        <PageSection aria-label="Card gallery">
           <Gallery hasGutter>
             {Array.from({ length: 10 }).map((_value, index) => (
               <GalleryItem key={index}>

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

@@ -40,7 +40,6 @@ import {
   ToolbarGroup,
   ToolbarItem
 } from '@patternfly/react-core';
-import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
@@ -151,7 +150,7 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
           </ToolbarItem>
           <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
             <ToolbarItem>
-              <Button aria-label="Settings" variant={ButtonVariant.plain} icon={<CogIcon />} />
+              <Button aria-label="Settings" isSettings variant="plain" />
             </ToolbarItem>
             <ToolbarItem>
               <Button aria-label="Help" variant={ButtonVariant.plain} icon={<QuestionCircleIcon />} />
@@ -231,13 +230,11 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
       <MastheadMain>
         <MastheadToggle>
           <PageToggleButton
-            variant="plain"
+            isHamburgerButton
             aria-label="Global navigation"
             isSidebarOpen={isSidebarOpen}
             onSidebarToggle={onSidebarToggle}
-          >
-            <BarsIcon />
-          </PageToggleButton>
+          />
         </MastheadToggle>
         <MastheadBrand>
           <MastheadLogo>

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

@@ -40,7 +40,6 @@ import {
   ToolbarGroup,
   ToolbarItem
 } from '@patternfly/react-core';
-import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
@@ -129,7 +128,7 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
           </ToolbarItem>
           <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
             <ToolbarItem>
-              <Button aria-label="Settings" variant={ButtonVariant.plain} icon={<CogIcon />} />
+              <Button aria-label="Settings" isSettings variant="plain" />
             </ToolbarItem>
             <ToolbarItem>
               <Button aria-label="Help" variant={ButtonVariant.plain} icon={<QuestionCircleIcon />} />
@@ -208,9 +207,7 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
     <Masthead>
       <MastheadMain>
         <MastheadToggle>
-          <PageToggleButton variant="plain" aria-label="Global navigation">
-            <BarsIcon />
-          </PageToggleButton>
+          <PageToggleButton isHamburgerButton aria-label="Global navigation" />
         </MastheadToggle>
         <MastheadBrand>
           <MastheadLogo>

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

@@ -40,7 +40,6 @@ import {
   ToolbarGroup,
   ToolbarItem
 } from '@patternfly/react-core';
-import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
@@ -129,7 +128,7 @@ export const PageStickySectionGroup: React.FunctionComponent = () => {
           </ToolbarItem>
           <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
             <ToolbarItem>
-              <Button aria-label="Settings" variant={ButtonVariant.plain} icon={<CogIcon />} />
+              <Button aria-label="Settings" isSettings variant="plain" />
             </ToolbarItem>
             <ToolbarItem>
               <Button aria-label="Help" variant={ButtonVariant.plain} icon={<QuestionCircleIcon />} />
@@ -208,9 +207,7 @@ export const PageStickySectionGroup: React.FunctionComponent = () => {
     <Masthead>
       <MastheadMain>
         <MastheadToggle>
-          <PageToggleButton variant="plain" aria-label="Global navigation">
-            <BarsIcon />
-          </PageToggleButton>
+          <PageToggleButton isHamburgerButton aria-label="Global navigation" />
         </MastheadToggle>
         <MastheadBrand>
           <MastheadLogo>

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

@@ -42,7 +42,6 @@ import {
   ToolbarGroup,
   ToolbarItem
 } from '@patternfly/react-core';
-import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
@@ -121,7 +120,7 @@ export const PageStickySectionGroupAlternate: React.FunctionComponent = () => {
           </ToolbarItem>
           <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
             <ToolbarItem>
-              <Button aria-label="Settings" variant={ButtonVariant.plain} icon={<CogIcon />} />
+              <Button aria-label="Settings" isSettings variant="plain" />
             </ToolbarItem>
             <ToolbarItem>
               <Button aria-label="Help" variant={ButtonVariant.plain} icon={<QuestionCircleIcon />} />
@@ -200,9 +199,7 @@ export const PageStickySectionGroupAlternate: React.FunctionComponent = () => {
     <Masthead>
       <MastheadMain>
         <MastheadToggle>
-          <PageToggleButton variant="plain" aria-label="Global navigation">
-            <BarsIcon />
-          </PageToggleButton>
+          <PageToggleButton isHamburgerButton aria-label="Global navigation" />
         </MastheadToggle>
         <MastheadBrand>
           <MastheadLogo>

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

@@ -73,13 +73,13 @@ export const ModalTabs: React.FunctionComponent = () => {
   return (
     <Fragment>
       <DashboardWrapper mainContainerId="main-content-card-view-default-nav">
-        <PageSection>
+        <PageSection aria-labelledby="projects-heading">
           <Content>
-            <h1>Projects</h1>
+            <h1 id="projects-heading">Projects</h1>
             <p>Click any project card to view tabs within modals.</p>
           </Content>
         </PageSection>
-        <PageSection isFilled>
+        <PageSection isFilled aria-label="Selectable card gallery">
           <Gallery hasGutter aria-label="Selectable card container">
             {products.map((product) => (
               <Card

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

@@ -133,7 +133,7 @@ export const NestedTabs: React.FunctionComponent = () => {
 
   return (
     <DashboardWrapper hasPageTemplateTitle>
-      <PageSection type="tabs" isWidthLimited>
+      <PageSection type="tabs" isWidthLimited aria-label="Cluster navigation tabs">
         <Tabs
           activeKey={activeTabKey}
           onSelect={(_event, tabIndex) => handleTabClick(Number(tabIndex))}
@@ -144,7 +144,7 @@ export const NestedTabs: React.FunctionComponent = () => {
           <Tab eventKey={1} title={<TabTitleText>Cluster 2</TabTitleText>} tabContentId={`tabContent${1}`} />
         </Tabs>
       </PageSection>
-      <PageSection isWidthLimited>
+      <PageSection isWidthLimited aria-label="Cluster tab panel content">
         <TabContent key={0} eventKey={0} id={`tabContent${0}`} activeKey={activeTabKey} hidden={0 !== activeTabKey}>
           <TabContentBody>{tabContent}</TabContentBody>
         </TabContent>

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

@@ -124,7 +124,7 @@ export const NestedUnindentedTabs: React.FunctionComponent = () => {
 
   return (
     <DashboardWrapper hasPageTemplateTitle>
-      <PageSection type="tabs" isWidthLimited>
+      <PageSection type="tabs" isWidthLimited aria-label="Primary navigation tabs">
         <Tabs
           activeKey={activeTabKey}
           onSelect={(_event, tabIndex) => handleTabClick(Number(tabIndex))}
@@ -137,7 +137,7 @@ export const NestedUnindentedTabs: React.FunctionComponent = () => {
           <Tab eventKey={3} title={<TabTitleText>Support</TabTitleText>} tabContentId={`tabContent${3}`} />
         </Tabs>
       </PageSection>
-      <PageSection isWidthLimited>
+      <PageSection isWidthLimited aria-label="Primary tab content">
         <TabContent key={0} eventKey={0} id={`tabContent${0}`} activeKey={activeTabKey} hidden={0 !== activeTabKey}>
           <TabContentBody>What's new panel</TabContentBody>
         </TabContent>

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

@@ -385,12 +385,12 @@ export const TablesAndTabs = () => {
   return (
     <DashboardWrapper>
       <Fragment>
-        <PageSection>
-          <Title headingLevel="h1" size="2xl">
+        <PageSection aria-labelledby="nodes">
+          <Title headingLevel="h1" size="2xl" id="nodes">
             Nodes
           </Title>
         </PageSection>
-        <PageSection padding={{ default: 'noPadding' }}>
+        <PageSection padding={{ default: 'noPadding' }} aria-label="Nodes toolbar and content">
           {toolbar}
           <Divider />
           {tabContent}

package/src/demos/examples/Toolbar/ConsoleLogViewerToolbar.tsx

@@ -25,7 +25,6 @@ import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 import ExpandIcon from '@patternfly/react-icons/dist/esm/icons/expand-icon';
 import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
 import DownloadIcon from '@patternfly/react-icons/dist/esm/icons/download-icon';
-import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
 export const ConsoleLogViewerToolbar: React.FC = () => {
@@ -301,7 +300,7 @@ export const ConsoleLogViewerToolbar: React.FC = () => {
           onOpenChangeKeys={['Escape']}
           onSelect={onOptionSelect}
           toggle={(toggleRef) => (
-            <MenuToggle ref={toggleRef} isExpanded={optionExpanded} onClick={onOptionToggle} icon={<CogIcon />}>
+            <MenuToggle ref={toggleRef} isExpanded={optionExpanded} onClick={onOptionToggle} isSettings>
               Options
             </MenuToggle>
           )}
@@ -355,7 +354,7 @@ export const ConsoleLogViewerToolbar: React.FC = () => {
                 ref={toggleRef}
                 isExpanded={optionExpandedMobile}
                 onClick={onOptionToggleMobile}
-                icon={<CogIcon />}
+                isSettings
                 aria-label="Options"
               />
             )}

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

@@ -31,7 +31,6 @@ import {
   WizardStep
 } from '@patternfly/react-core';
 import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';
-import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 
 export const WizardFullPageWithDrawerDemo: React.FunctionComponent = () => {
   const [isDrawerExpanded, setIsDrawerExpanded] = useState(false);
@@ -83,9 +82,7 @@ export const WizardFullPageWithDrawerDemo: React.FunctionComponent = () => {
     <Masthead id="basic">
       <MastheadMain>
         <MastheadToggle>
-          <PageToggleButton variant="plain" aria-label="Global navigation">
-            <BarsIcon />
-          </PageToggleButton>
+          <PageToggleButton isHamburgerButton aria-label="Global navigation" />
         </MastheadToggle>
         <MastheadBrand>
           <MastheadLogo>

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

@@ -31,7 +31,6 @@ import {
   WizardStep
 } from '@patternfly/react-core';
 import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';
-import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 
 export const WizardFullPageWithDrawerInfoStepDemo: React.FunctionComponent = () => {
   const [isDrawerExpanded, setIsDrawerExpanded] = useState(false);
@@ -83,9 +82,7 @@ export const WizardFullPageWithDrawerInfoStepDemo: React.FunctionComponent = ()
     <Masthead id="basic">
       <MastheadMain>
         <MastheadToggle>
-          <PageToggleButton variant="plain" aria-label="Global navigation">
-            <BarsIcon />
-          </PageToggleButton>
+          <PageToggleButton isHamburgerButton aria-label="Global navigation" />
         </MastheadToggle>
         <MastheadBrand>
           <MastheadLogo>