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

package/src/components/MenuToggle/__tests__/__snapshots__/MenuToggle.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`menu toggle passes additional classes 1`] = `
+exports[`Old Snapshot tests - remove when refactoring passes additional classes 1`] = `
 <DocumentFragment>
   <button
     aria-expanded="false"
@@ -40,7 +40,7 @@ exports[`menu toggle passes additional classes 1`] = `
 </DocumentFragment>
 `;
 
-exports[`menu toggle renders successfully 1`] = `
+exports[`Old Snapshot tests - remove when refactoring renders successfully 1`] = `
 <DocumentFragment>
   <button
     aria-expanded="false"
@@ -80,7 +80,7 @@ exports[`menu toggle renders successfully 1`] = `
 </DocumentFragment>
 `;
 
-exports[`menu toggle shows badge 1`] = `
+exports[`Old Snapshot tests - remove when refactoring shows badge 1`] = `
 <DocumentFragment>
   <button
     aria-expanded="false"
@@ -129,7 +129,7 @@ exports[`menu toggle shows badge 1`] = `
 </DocumentFragment>
 `;
 
-exports[`menu toggle shows icon 1`] = `
+exports[`Old Snapshot tests - remove when refactoring shows icon 1`] = `
 <DocumentFragment>
   <button
     aria-expanded="false"
@@ -186,7 +186,7 @@ exports[`menu toggle shows icon 1`] = `
 </DocumentFragment>
 `;
 
-exports[`menu toggle shows isDisabled 1`] = `
+exports[`Old Snapshot tests - remove when refactoring shows isDisabled 1`] = `
 <DocumentFragment>
   <button
     aria-expanded="false"
@@ -227,7 +227,7 @@ exports[`menu toggle shows isDisabled 1`] = `
 </DocumentFragment>
 `;
 
-exports[`menu toggle shows isExpanded 1`] = `
+exports[`Old Snapshot tests - remove when refactoring shows isExpanded 1`] = `
 <DocumentFragment>
   <button
     aria-expanded="true"
@@ -267,7 +267,7 @@ exports[`menu toggle shows isExpanded 1`] = `
 </DocumentFragment>
 `;
 
-exports[`menu toggle shows isPlain 1`] = `
+exports[`Old Snapshot tests - remove when refactoring shows isPlain 1`] = `
 <DocumentFragment>
   <button
     aria-expanded="false"
@@ -298,7 +298,7 @@ exports[`menu toggle shows isPlain 1`] = `
 </DocumentFragment>
 `;
 
-exports[`menu toggle shows isPrimary 1`] = `
+exports[`Old Snapshot tests - remove when refactoring shows isPrimary 1`] = `
 <DocumentFragment>
   <button
     aria-expanded="false"
@@ -338,7 +338,7 @@ exports[`menu toggle shows isPrimary 1`] = `
 </DocumentFragment>
 `;
 
-exports[`menu toggle shows plain text 1`] = `
+exports[`Old Snapshot tests - remove when refactoring shows plain text 1`] = `
 <DocumentFragment>
   <button
     aria-expanded="false"

package/src/components/MenuToggle/examples/MenuToggle.md

@@ -8,7 +8,7 @@ propComponents: ['MenuToggle', 'MenuToggleAction', 'MenuToggleCheckbox']
 
 import { Fragment, useState } from 'react';
 import './MenuToggle.css'
-import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
+import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-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 TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
@@ -70,38 +70,22 @@ import { MenuToggle, Badge } from '@patternfly/react-core';
 </Fragment>
 ```
 
-### With icons
+### Settings toggle
+
+To create a "settings" menu toggle that will animate on hover and focus, you can pass the `isSettings` property in. Doing so will override the `icon` property, as a specific icon is used internally for the animations.
 
-To add a recognizable icon to a menu toggle, use the `icon` property. The following example adds a `CogIcon` to the toggle.
+```ts file="./MenuToggleSettings.tsx"
+
+```
+
+### Custom icons
+
+To add a recognizable icon to a menu toggle, use the `icon` property. The following example adds a `PlusIcon` to the toggle.
 
 For most basic icons, it is recommended to wrap it inside our [icon component](/components/icon).
 
-```ts
-import { Fragment } from 'react';
-import { MenuToggle } from '@patternfly/react-core';
-import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
+```ts file="./MenuToggleCustomIcon.tsx"
 
-<Fragment>
-  <MenuToggle
-    icon={<CogIcon />}
-    variant="primary"
-  >
-    Icon
-  </MenuToggle>{' '}
-  <MenuToggle
-    icon={<CogIcon />}
-    variant="secondary"
-  >
-    Icon
-  </MenuToggle>{' '}
-  <MenuToggle
-    icon={<CogIcon />}
-    variant="secondary"
-    isDisabled
-  >
-    Icon
-  </MenuToggle>
-</Fragment>;
 ```
 
 ### With avatar and text
@@ -202,13 +186,13 @@ Variant styling can be applied to split button toggles to adjust their appearanc
 
 You can allow users to select a toggle checkbox by clicking either the checkbox or the text label.
 
-To link a split toggle label to the toggle's checkbox, pass both the label and the `<MenuToggleCheckbox>` component to `splitButtonItems`. 
+To link a split toggle label to the toggle's checkbox, pass both the label and the `<MenuToggleCheckbox>` component to `splitButtonItems`.
 
 ```ts file='MenuToggleSplitButtonCheckboxWithText.tsx'
 
 ```
 
-### Split toggle with checkbox and toggle text 
+### Split toggle with checkbox and toggle text
 
 To link a split toggle label to the toggle button itself, pass the label to the `<MenuToggle>` component, instead of `splitButtonItems`.
 

package/src/components/MenuToggle/examples/MenuToggleCustomIcon.tsx

@@ -0,0 +1,17 @@
+import { Fragment } from 'react';
+import { MenuToggle } from '@patternfly/react-core';
+import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
+
+export const MenuToggleCustomIcon: React.FC = () => (
+  <Fragment>
+    <MenuToggle icon={<PlusIcon />} variant="primary">
+      Icon
+    </MenuToggle>{' '}
+    <MenuToggle icon={<PlusIcon />} variant="secondary">
+      Icon
+    </MenuToggle>{' '}
+    <MenuToggle icon={<PlusIcon />} variant="secondary" isDisabled>
+      Icon
+    </MenuToggle>
+  </Fragment>
+);

package/src/components/MenuToggle/examples/MenuToggleSettings.tsx

@@ -0,0 +1,8 @@
+import { Fragment } from 'react/jsx-runtime';
+import { MenuToggle } from '@patternfly/react-core';
+
+export const MenuToggleSettings: React.FunctionComponent = () => (
+  <Fragment>
+    <MenuToggle isSettings>Settings</MenuToggle> <MenuToggle isSettings variant="plain" aria-label="Settings" />
+  </Fragment>
+);

package/src/components/Nav/NavExpandable.tsx

@@ -141,7 +141,12 @@ class NavExpandable extends Component<NavExpandableProps, NavExpandableState> {
                 </button>
               )}
             </PageSidebarContext.Consumer>
-            <section className={css(styles.navSubnav)} aria-labelledby={this.id} hidden={expandedState ? null : true}>
+            <section
+              className={css(styles.navSubnav)}
+              aria-labelledby={this.id}
+              hidden={expandedState ? null : true}
+              {...(!expandedState && { inert: '' })}
+            >
               {srText && (
                 <h2 className="pf-v6-screen-reader" id={this.id}>
                   {srText}

package/src/components/Nav/__tests__/Generated/__snapshots__/NavExpandable.test.tsx.snap

@@ -39,6 +39,7 @@ exports[`NavExpandable should match snapshot (auto-generated) 1`] = `
       aria-labelledby="''"
       class="pf-v6-c-nav__subnav"
       hidden=""
+      inert=""
     >
       <h2
         class="pf-v6-screen-reader"

package/src/components/Nav/__tests__/NavExpandable.test.tsx

@@ -0,0 +1,15 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { NavExpandable } from '../NavExpandable';
+
+test('Renders with the inert attribute by default', () => {
+  render(<NavExpandable id="grp-1" title="NavExpandable"></NavExpandable>);
+
+  expect(screen.getByLabelText('NavExpandable')).toHaveAttribute('inert', '');
+});
+
+test('Does not render with the inert attribute when isExpanded is true', () => {
+  render(<NavExpandable id="grp-1" title="NavExpandable" isExpanded={true}></NavExpandable>);
+
+  expect(screen.getByLabelText('NavExpandable')).not.toHaveAttribute('inert', '');
+});

package/src/components/Nav/__tests__/__snapshots__/Nav.test.tsx.snap

@@ -223,6 +223,7 @@ exports[`Nav Expandable Nav List - Trigger toggle 1`] = `
           aria-labelledby="grp-1"
           class="pf-v6-c-nav__subnav"
           hidden=""
+          inert=""
         >
           <ul
             class="pf-v6-c-nav__list"
@@ -355,6 +356,7 @@ exports[`Nav Expandable Nav List 1`] = `
           aria-labelledby="grp-1"
           class="pf-v6-c-nav__subnav"
           hidden=""
+          inert=""
         >
           <ul
             class="pf-v6-c-nav__list"
@@ -486,6 +488,7 @@ exports[`Nav Expandable Nav List with aria label 1`] = `
           aria-labelledby="grp-1"
           class="pf-v6-c-nav__subnav"
           hidden=""
+          inert=""
         >
           <h2
             class="pf-v6-screen-reader"

package/src/components/Page/PageToggleButton.tsx

@@ -10,6 +10,10 @@ export interface PageToggleButtonProps extends ButtonProps {
   onSidebarToggle?: () => void;
   /** Button id */
   id?: string;
+  /** Adds an accessible name to the toggle button. */
+  'aria-label'?: string;
+  /** Flag indicating whether the hamburger button variation with animations should be used. */
+  isHamburgerButton?: boolean;
 }
 
 export const PageToggleButton: React.FunctionComponent<PageToggleButtonProps> = ({
@@ -17,6 +21,8 @@ export const PageToggleButton: React.FunctionComponent<PageToggleButtonProps> =
   isSidebarOpen = true,
   onSidebarToggle = () => undefined as any,
   id = 'nav-toggle',
+  'aria-label': ariaLabel = 'Side navigation toggle',
+  isHamburgerButton,
   ...props
 }: PageToggleButtonProps) => (
   <PageContextConsumer>
@@ -32,12 +38,13 @@ export const PageToggleButton: React.FunctionComponent<PageToggleButtonProps> =
         <Button
           id={id}
           onClick={sidebarToggle}
-          aria-label="Side navigation toggle"
+          aria-label={ariaLabel}
           aria-expanded={sidebarOpen ? 'true' : 'false'}
           variant={ButtonVariant.plain}
+          isHamburger={isHamburgerButton}
           {...props}
         >
-          {children}
+          {!isHamburgerButton && children}
         </Button>
       );
     }}

package/src/components/Page/examples/Page.md

@@ -8,7 +8,7 @@ propComponents:
 
 import { useState } from 'react';
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
-import c_page_section_m_limit_width_MaxWidth from '@patternfly/react-tokens/dist/esm/c_page_section_m_limit_width_MaxWidth';
+import pageSectionWidthLimitMaxWidth from '@patternfly/react-tokens/dist/esm/c_page_section_m_limit_width_MaxWidth';
 
 ## Examples
 

package/src/components/Page/examples/PageCenteredSection.tsx

@@ -17,9 +17,7 @@ import {
   Card,
   CardBody
 } from '@patternfly/react-core';
-import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
-/* eslint-disable camelcase */
-import c_page_section_m_limit_width_MaxWidth from '@patternfly/react-tokens/dist/esm/c_page_section_m_limit_width_MaxWidth';
+import pageSectionWidthLimitMaxWidth from '@patternfly/react-tokens/dist/esm/c_page_section_m_limit_width_MaxWidth';
 
 export const PageCenteredSection: React.FunctionComponent = () => {
   const [isSidebarOpen, setIsSidebarOpen] = useState(true);
@@ -41,14 +39,12 @@ export const PageCenteredSection: React.FunctionComponent = () => {
       <MastheadMain>
         <MastheadToggle>
           <PageToggleButton
-            variant="plain"
             aria-label="Global navigation"
             isSidebarOpen={isSidebarOpen}
             onSidebarToggle={onSidebarToggle}
             id="centered-nav-toggle"
-          >
-            <BarsIcon />
-          </PageToggleButton>
+            isHamburgerButton
+          />
         </MastheadToggle>
         <MastheadBrand>
           <MastheadLogo href="https://patternfly.org" target="_blank">
@@ -68,11 +64,11 @@ export const PageCenteredSection: React.FunctionComponent = () => {
 
   return (
     <Page masthead={masthead} sidebar={sidebar}>
-      <PageSection isWidthLimited isCenterAligned>
+      <PageSection isWidthLimited isCenterAligned aria-label="width limited page section">
         <Card>
           <CardBody>
             When a width limited page section is wider than the value of
-            <code>{c_page_section_m_limit_width_MaxWidth.name}</code>, the section will be centered in the main section.
+            <code>{pageSectionWidthLimitMaxWidth.name}</code>, the section will be centered in the main section.
             <br />
             <br />
             The content in this example is placed in a card to better illustrate how the section behaves when it is

package/src/components/Page/examples/PageGroupSection.tsx

@@ -22,7 +22,6 @@ import {
   ToolbarContent,
   ToolbarItem
 } from '@patternfly/react-core';
-import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 
 export const PageGroupSection: React.FunctionComponent = () => {
   const [isSidebarOpen, setIsSidebarOpen] = useState(true);
@@ -44,14 +43,12 @@ export const PageGroupSection: React.FunctionComponent = () => {
       <MastheadMain>
         <MastheadToggle>
           <PageToggleButton
-            variant="plain"
             aria-label="Global navigation"
             isSidebarOpen={isSidebarOpen}
             onSidebarToggle={onSidebarToggle}
             id="group-section-nav-toggle"
-          >
-            <BarsIcon />
-          </PageToggleButton>
+            isHamburgerButton
+          />
         </MastheadToggle>
         <MastheadBrand>
           <MastheadLogo href="https://patternfly.org" target="_blank">
@@ -101,10 +98,16 @@ export const PageGroupSection: React.FunctionComponent = () => {
             </BreadcrumbItem>
           </Breadcrumb>
         </PageBreadcrumb>
-        <PageSection>Grouped section</PageSection>
+        <PageSection aria-labelledby="grouped-section">
+          <h2 id="grouped-section">Grouped section</h2>
+        </PageSection>
       </PageGroup>
-      <PageSection>Section 1</PageSection>
-      <PageSection>Section 2</PageSection>
+      <PageSection aria-labelledby="section-1">
+        <h2 id="section-1">Grouped example section 1</h2>
+      </PageSection>
+      <PageSection aria-labelledby="section-2">
+        <h2 id="section-2">Grouped example section 2</h2>
+      </PageSection>
     </Page>
   );
 };

package/src/components/Page/examples/PageHorizontalNav.tsx

@@ -36,9 +36,15 @@ export const PageHorizontalNav: React.FunctionComponent = () => {
 
   return (
     <Page masthead={masthead}>
-      <PageSection>Section 1</PageSection>
-      <PageSection variant="secondary">Section 2 with secondary variant styling</PageSection>
-      <PageSection>Section 3</PageSection>
+      <PageSection aria-labelledby="section-1">
+        <h2 id="section-1">Horizontal nav example section 1</h2>
+      </PageSection>
+      <PageSection variant="secondary" aria-labelledby="section-2">
+        <h2 id="section-2">Horizontal nav example section 2 with secondary variant styling</h2>
+      </PageSection>
+      <PageSection aria-labelledby="section-3">
+        <h2 id="section-3">Horizontal nav example section 3</h2>
+      </PageSection>
     </Page>
   );
 };

package/src/components/Page/examples/PageMainSectionPadding.tsx

@@ -15,7 +15,6 @@ import {
   ToolbarContent,
   ToolbarItem
 } from '@patternfly/react-core';
-import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 
 export const PageMainSectionPadding: React.FunctionComponent = () => {
   const [isSidebarOpen, setIsSidebarOpen] = useState(true);
@@ -37,14 +36,12 @@ export const PageMainSectionPadding: React.FunctionComponent = () => {
       <MastheadMain>
         <MastheadToggle>
           <PageToggleButton
-            variant="plain"
             aria-label="Global navigation"
             isSidebarOpen={isSidebarOpen}
             onSidebarToggle={onSidebarToggle}
             id="main-padding-nav-toggle"
-          >
-            <BarsIcon />
-          </PageToggleButton>
+            isHamburgerButton
+          />
         </MastheadToggle>
         <MastheadBrand>
           <MastheadLogo href="https://patternfly.org" target="_blank">
@@ -64,10 +61,18 @@ export const PageMainSectionPadding: React.FunctionComponent = () => {
 
   return (
     <Page masthead={masthead} sidebar={sidebar}>
-      <PageSection>Section with default padding</PageSection>
-      <PageSection padding={{ default: 'noPadding' }}>Section with no padding</PageSection>
-      <PageSection padding={{ default: 'noPadding', md: 'padding' }}>Section with padding on medium</PageSection>
-      <PageSection padding={{ md: 'noPadding' }}>Section with no padding on medium</PageSection>
+      <PageSection aria-labelledby="section-1">
+        <h2 id="section-1">Section with default padding</h2>
+      </PageSection>
+      <PageSection padding={{ default: 'noPadding' }} aria-labelledby="section-2">
+        <h2 id="section-2">Section with no padding</h2>
+      </PageSection>
+      <PageSection padding={{ default: 'noPadding', md: 'padding' }} aria-labelledby="section-3">
+        <h2 id="section-3">Section with padding on medium</h2>
+      </PageSection>
+      <PageSection padding={{ md: 'noPadding' }} aria-labelledby="section-4">
+        <h2 id="section-4">Section with no padding on medium</h2>
+      </PageSection>
     </Page>
   );
 };

package/src/components/Page/examples/PageMainSectionVariations.tsx

@@ -15,7 +15,6 @@ import {
   ToolbarContent,
   ToolbarItem
 } from '@patternfly/react-core';
-import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 
 export const PageMainSectionPadding: React.FunctionComponent = () => {
   const [isSidebarOpen, setIsSidebarOpen] = useState(true);
@@ -37,14 +36,12 @@ export const PageMainSectionPadding: React.FunctionComponent = () => {
       <MastheadMain>
         <MastheadToggle>
           <PageToggleButton
-            variant="plain"
             aria-label="Global navigation"
             isSidebarOpen={isSidebarOpen}
             onSidebarToggle={onSidebarToggle}
             id="main-variations-nav-toggle"
-          >
-            <BarsIcon />
-          </PageToggleButton>
+            isHamburgerButton
+          />
         </MastheadToggle>
         <MastheadBrand>
           <MastheadLogo href="https://patternfly.org" target="_blank">
@@ -64,22 +61,22 @@ export const PageMainSectionPadding: React.FunctionComponent = () => {
 
   return (
     <Page header={header} sidebar={sidebar}>
-      <PageSection type="subnav">
+      <PageSection type="subnav" aria-label="With subnav type">
         Section with <code>type="subnav"</code> for horizontal subnav navigation
       </PageSection>
-      <PageSection type="nav">
+      <PageSection type="nav" aria-label="With nav type">
         Section with <code>type="nav"</code> for tertiary navigation
       </PageSection>
-      <PageSection type="tabs">
+      <PageSection type="tabs" aria-label="With tabs type">
         Section with <code>type="tabs"</code> for tabs
       </PageSection>
-      <PageSection type="breadcrumb">
+      <PageSection type="breadcrumb" aria-label="With breadcrumb type">
         Section with <code>type="breadcrumb"</code> for breadcrumbs
       </PageSection>
-      <PageSection>
+      <PageSection aria-label="With default type">
         Section without <code>type</code> prop or <code>type="default"</code> for main sections
       </PageSection>
-      <PageSection type="wizard">
+      <PageSection type="wizard" aria-label="With wizard type">
         Section with <code>type="wizard"</code> for wizards
       </PageSection>
     </Page>

package/src/components/Page/examples/PageMultipleSidebarBody.tsx

@@ -15,7 +15,6 @@ import {
   ToolbarContent,
   ToolbarItem
 } from '@patternfly/react-core';
-import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 
 export const PageMultipleSidebarBody: React.FunctionComponent = () => {
   const [isSidebarOpen, setIsSidebarOpen] = useState(true);
@@ -37,14 +36,12 @@ export const PageMultipleSidebarBody: React.FunctionComponent = () => {
       <MastheadMain>
         <MastheadToggle>
           <PageToggleButton
-            variant="plain"
             aria-label="Global navigation"
             isSidebarOpen={isSidebarOpen}
             onSidebarToggle={onSidebarToggle}
             id="multiple-sidebar-body-nav-toggle"
-          >
-            <BarsIcon />
-          </PageToggleButton>
+            isHamburgerButton
+          />
         </MastheadToggle>
         <MastheadBrand>
           <MastheadLogo href="https://patternfly.org" target="_blank">
@@ -71,9 +68,15 @@ export const PageMultipleSidebarBody: React.FunctionComponent = () => {
 
   return (
     <Page masthead={masthead} sidebar={sidebar}>
-      <PageSection>Section 1</PageSection>
-      <PageSection>Section 2</PageSection>
-      <PageSection>Section 3</PageSection>
+      <PageSection aria-labelledby="section-1">
+        <h2 id="section-1">Multiple sidebar body example section 1</h2>
+      </PageSection>
+      <PageSection aria-labelledby="section-2">
+        <h2 id="section-2">Multiple sidebar body example section 2</h2>
+      </PageSection>
+      <PageSection aria-labelledby="section-3">
+        <h2 id="section-3">Multiple sidebar body example section 3</h2>
+      </PageSection>
     </Page>
   );
 };

package/src/components/Page/examples/PageUncontrolledNav.tsx

@@ -14,7 +14,6 @@ import {
   ToolbarContent,
   ToolbarItem
 } from '@patternfly/react-core';
-import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 
 export const PageUncontrolledNav: React.FunctionComponent = () => {
   const headerToolbar = (
@@ -29,9 +28,7 @@ export const PageUncontrolledNav: React.FunctionComponent = () => {
     <Masthead>
       <MastheadMain>
         <MastheadToggle>
-          <PageToggleButton variant="plain" aria-label="Global navigation" id="uncontrolled-nav-toggle">
-            <BarsIcon />
-          </PageToggleButton>
+          <PageToggleButton isHamburgerButton aria-label="Global navigation" id="uncontrolled-nav-toggle" />
         </MastheadToggle>
         <MastheadBrand>
           <MastheadLogo href="https://patternfly.org" target="_blank">
@@ -51,9 +48,15 @@ export const PageUncontrolledNav: React.FunctionComponent = () => {
 
   return (
     <Page isManagedSidebar masthead={masthead} sidebar={sidebar}>
-      <PageSection>Section 1</PageSection>
-      <PageSection>Section 2</PageSection>
-      <PageSection>Section 3</PageSection>
+      <PageSection aria-labelledby="section-1">
+        <h2 id="section-1">Uncontrolled nav example section 1</h2>
+      </PageSection>
+      <PageSection aria-labelledby="section-2">
+        <h2 id="section-2">Uncontrolled nav example section 2</h2>
+      </PageSection>
+      <PageSection aria-labelledby="section-3">
+        <h2 id="section-3">Uncontrolled nav example section 3</h2>
+      </PageSection>
     </Page>
   );
 };

package/src/components/Page/examples/PageVerticalNav.tsx

@@ -15,7 +15,6 @@ import {
   ToolbarContent,
   ToolbarItem
 } from '@patternfly/react-core';
-import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 
 export const PageVerticalNav: React.FunctionComponent = () => {
   const [isSidebarOpen, setIsSidebarOpen] = useState(true);
@@ -37,14 +36,12 @@ export const PageVerticalNav: React.FunctionComponent = () => {
       <MastheadMain>
         <MastheadToggle>
           <PageToggleButton
-            variant="plain"
+            isHamburgerButton
             aria-label="Global navigation"
             isSidebarOpen={isSidebarOpen}
             onSidebarToggle={onSidebarToggle}
             id="vertical-nav-toggle"
-          >
-            <BarsIcon />
-          </PageToggleButton>
+          />
         </MastheadToggle>
         <MastheadBrand>
           <MastheadLogo href="https://patternfly.org" target="_blank">
@@ -64,9 +61,15 @@ export const PageVerticalNav: React.FunctionComponent = () => {
 
   return (
     <Page masthead={masthead} sidebar={sidebar}>
-      <PageSection>Section 1</PageSection>
-      <PageSection variant="secondary">Section 2 with secondary variant styling</PageSection>
-      <PageSection>Section 3</PageSection>
+      <PageSection aria-labelledby="section-1">
+        <h2 id="section-1">Vertical nav example section 1</h2>
+      </PageSection>
+      <PageSection variant="secondary" aria-labelledby="section-2">
+        <h2 id="section-2">Vertical nav example section 2 with secondary variant styling</h2>
+      </PageSection>
+      <PageSection aria-labelledby="section-3">
+        <h2 id="section-3">Vertical nav example section 3</h2>
+      </PageSection>
     </Page>
   );
 };