@patternfly/react-core 4.225.0 → 4.225.3

package/src/components/Nav/examples/Nav.md

@@ -32,19 +32,19 @@ class NavDefaultList extends React.Component {
   render() {
     const { activeItem } = this.state;
     return (
-      <Nav onSelect={this.onSelect}>
+      <Nav onSelect={this.onSelect} aria-label="Default global nav">
         <NavList>
           <NavItem id="default-link1" to="#default-link1" itemId={0} isActive={activeItem === 0}>
-            Link 1
+            Default Link 1
           </NavItem>
           <NavItem id="default-link2" to="#default-link2" itemId={1} isActive={activeItem === 1}>
-            Link 2
+            Default Link 2
           </NavItem>
           <NavItem id="default-link3" to="#default-link3" itemId={2} isActive={activeItem === 2}>
-            Link 3
+            Default Link 3
           </NavItem>
           <NavItem id="default-link4" to="#default-link4" itemId={3} isActive={activeItem === 3}>
-            Link 4
+            Default Link 4
           </NavItem>
         </NavList>
       </Nav>
@@ -77,27 +77,27 @@ class NavGroupedList extends React.Component {
   render() {
     const { activeItem } = this.state;
     return (
-      <Nav onSelect={this.onSelect}>
+      <Nav onSelect={this.onSelect} aria-label="Grouped global nav">
         <NavGroup title="Section title 1">
           <NavItem preventDefault to="#grouped-1" itemId="grp-1_itm-1" isActive={activeItem === 'grp-1_itm-1'}>
-            Link 1
+            Group 1 Link 1
           </NavItem>
           <NavItem preventDefault to="#grouped-2" itemId="grp-1_itm-2" isActive={activeItem === 'grp-1_itm-2'}>
-            Link 2
+            Group 1 Link 2
           </NavItem>
           <NavItem preventDefault to="#grouped-3" itemId="grp-1_itm-3" isActive={activeItem === 'grp-1_itm-3'}>
-            Link 3
+            Group 1 Link 3
           </NavItem>
         </NavGroup>
         <NavGroup title="Section title 2">
           <NavItem preventDefault to="#grouped-4" itemId="grp-2_itm-1" isActive={activeItem === 'grp-2_itm-1'}>
-            Link 1
+            Group 2 Link 1
           </NavItem>
           <NavItem preventDefault to="#grouped-5" itemId="grp-2_itm-2" isActive={activeItem === 'grp-2_itm-2'}>
-            Link 2
+            Group 2 Link 2
           </NavItem>
           <NavItem preventDefault to="#grouped-6" itemId="grp-2_itm-3" isActive={activeItem === 'grp-2_itm-3'}>
-            Link 3
+            Group 2 Link 3
           </NavItem>
         </NavGroup>
       </Nav>
@@ -138,9 +138,9 @@ class NavExpandableList extends React.Component {
   render() {
     const { activeGroup, activeItem } = this.state;
     return (
-      <Nav onSelect={this.onSelect} onToggle={this.onToggle}>
+      <Nav onSelect={this.onSelect} onToggle={this.onToggle} aria-label="Expandable global nav">
         <NavList>
-          <NavExpandable title="Link 1" groupId="grp-1" isActive={activeGroup === 'grp-1'} isExpanded>
+          <NavExpandable title="Expandable Group 1" groupId="grp-1" isActive={activeGroup === 'grp-1'} isExpanded>
             <NavItem
               preventDefault
               to="#expandable-1"
@@ -148,17 +148,17 @@ class NavExpandableList extends React.Component {
               itemId="grp-1_itm-1"
               isActive={activeItem === 'grp-1_itm-1'}
             >
-              Subnav Link 1
+              Subnav 1 Link 1
             </NavItem>
             <NavItemSeparator />
             <NavItem preventDefault groupId="grp-1" itemId="grp-1_itm-2" isActive={activeItem === 'grp-1_itm-2'}>
-              Subnav Link 2
+              Subnav 1 Link 2
             </NavItem>
             <NavItem to="#expandable-3" groupId="grp-1" itemId="grp-1_itm-3" isActive={activeItem === 'grp-1_itm-3'}>
-              Subnav Link 3
+              Subnav 1 Link 3
             </NavItem>
           </NavExpandable>
-          <NavExpandable title="Link 2" groupId="grp-2" isActive={activeGroup === 'grp-2'} isExpanded>
+          <NavExpandable title="Expandable Group 2" groupId="grp-2" isActive={activeGroup === 'grp-2'} isExpanded>
             <NavItem
               preventDefault
               onClick={this.handleItemOnclick}
@@ -175,7 +175,7 @@ class NavExpandableList extends React.Component {
               itemId="grp-2_itm-1"
               isActive={activeItem === 'grp-2_itm-1'}
             >
-              Subnav Link 1
+              Subnav 2 Link 1
             </NavItem>
             <NavItem
               preventDefault
@@ -184,7 +184,7 @@ class NavExpandableList extends React.Component {
               itemId="grp-2_itm-2"
               isActive={activeItem === 'grp-2_itm-2'}
             >
-              Subnav Link 2
+              Subnav 2 Link 2
             </NavItem>
             <NavItem
               preventDefault
@@ -193,7 +193,7 @@ class NavExpandableList extends React.Component {
               itemId="grp-2_itm-3"
               isActive={activeItem === 'grp-2_itm-3'}
             >
-              Subnav Link 3
+              Subnav 2 Link 3
             </NavItem>
           </NavExpandable>
         </NavList>
@@ -227,9 +227,9 @@ class NavExpandableTitlesList extends React.Component {
   render() {
     const { activeGroup, activeItem } = this.state;
     return (
-      <Nav onSelect={this.onSelect}>
+      <Nav onSelect={this.onSelect} aria-label="Expandable with subnav global nav">
         <NavList>
-          <NavExpandable title="Link 1" srText="SR Link" groupId="grp-1" isActive={activeGroup === 'grp-1'} isExpanded>
+          <NavExpandable title="Expandable with subnav group 1" srText="SR Link" groupId="grp-1" isActive={activeGroup === 'grp-1'} isExpanded>
             <NavItem
               preventDefault
               to="#sr-expandable-1"
@@ -237,7 +237,7 @@ class NavExpandableTitlesList extends React.Component {
               itemId="grp-1_itm-1"
               isActive={activeItem === 'grp-1_itm-1'}
             >
-              Subnav Link 1
+              Expandable 1 link 1
             </NavItem>
             <NavItem
               preventDefault
@@ -246,7 +246,7 @@ class NavExpandableTitlesList extends React.Component {
               itemId="grp-1_itm-2"
               isActive={activeItem === 'grp-1_itm-2'}
             >
-              Subnav Link 2
+              Expandable 1 link 2
             </NavItem>
             <NavItem
               preventDefault
@@ -255,10 +255,10 @@ class NavExpandableTitlesList extends React.Component {
               itemId="grp-1_itm-3"
               isActive={activeItem === 'grp-1_itm-3'}
             >
-              Subnav Link 3
+              Expandable 1 link 3
             </NavItem>
           </NavExpandable>
-          <NavExpandable title="Link 2" srText="SR Link 2" groupId="grp-2" isActive={activeGroup === 'grp-2'}>
+          <NavExpandable title="Expandable with subnav group 2" srText="SR Link 2" groupId="grp-2" isActive={activeGroup === 'grp-2'}>
             <NavItem
               preventDefault
               to="#sr-expandable-4"
@@ -266,7 +266,7 @@ class NavExpandableTitlesList extends React.Component {
               itemId="grp-2_itm-1"
               isActive={activeItem === 'grp-2_itm-1'}
             >
-              Subnav Link 1
+              Expandable 2 Link 1
             </NavItem>
             <NavItem
               preventDefault
@@ -275,7 +275,7 @@ class NavExpandableTitlesList extends React.Component {
               itemId="grp-2_itm-2"
               isActive={activeItem === 'grp-2_itm-2'}
             >
-              Subnav Link 2
+              Expandable 2 Link 2
             </NavItem>
             <NavItem
               preventDefault
@@ -284,7 +284,7 @@ class NavExpandableTitlesList extends React.Component {
               itemId="grp-2_itm-3"
               isActive={activeItem === 'grp-2_itm-3'}
             >
-              Subnav Link 3
+              Expandable 2 Link 3
             </NavItem>
           </NavExpandable>
         </NavList>
@@ -315,9 +315,9 @@ NavExpandableThirdLevelList = () => {
   };
 
   return (
-    <Nav onSelect={onSelect} onToggle={onToggle}>
+    <Nav onSelect={onSelect} onToggle={onToggle} aria-label="Expandable third level global nav">
       <NavList>
-        <NavExpandable title="Link 1" groupId="grp-1" isActive={activeGroup === 'grp-1'} isExpanded>
+        <NavExpandable title="Third level group 1" groupId="grp-1" isActive={activeGroup === 'grp-1'} isExpanded>
           <NavItem
             preventDefault
             to="#expandable-1"
@@ -325,7 +325,7 @@ NavExpandableThirdLevelList = () => {
             itemId="grp-1_itm-1"
             isActive={activeItem === 'grp-1_itm-1'}
           >
-            Subnav Link 1
+            With 3rd 1 Link 1
           </NavItem>
           <NavItem
             preventDefault
@@ -334,7 +334,7 @@ NavExpandableThirdLevelList = () => {
             itemId="grp-1_itm-2"
             isActive={activeItem === 'grp-1_itm-2'}
           >
-            Subnav Link 2
+            With 3rd 1 Link 2
           </NavItem>
           <NavItem
             preventDefault
@@ -343,10 +343,10 @@ NavExpandableThirdLevelList = () => {
             itemId="grp-1_itm-3"
             isActive={activeItem === 'grp-1_itm-3'}
           >
-            Subnav Link 3
+            With 3rd 1 Link 3
           </NavItem>
         </NavExpandable>
-        <NavExpandable title="Link 2" groupId="grp-2" isActive={activeGroup === 'grp-2'} isExpanded>
+        <NavExpandable title="Third level group 2" groupId="grp-2" isActive={activeGroup === 'grp-2'} isExpanded>
           <NavItem
             preventDefault
             to="#expandable-4"
@@ -354,7 +354,7 @@ NavExpandableThirdLevelList = () => {
             itemId="grp-2_itm-1"
             isActive={activeItem === 'grp-2_itm-1'}
           >
-            Subnav Link 1
+            With 3rd 2 Link 1
           </NavItem>
           <NavExpandable title="Third Level" groupId="grp-3" isActive={activeGroup === 'grp-3'} isExpanded>
             <NavItem
@@ -383,7 +383,7 @@ NavExpandableThirdLevelList = () => {
             itemId="grp-2_itm-2"
             isActive={activeItem === 'grp-2_itm-3'}
           >
-            Subnav Link 3
+            With 3rd 2 Link 3
           </NavItem>
         </NavExpandable>
       </NavList>
@@ -416,7 +416,7 @@ class NavMixedList extends React.Component {
   render() {
     const { activeGroup, activeItem } = this.state;
     return (
-      <Nav onSelect={this.onSelect}>
+      <Nav onSelect={this.onSelect} aria-label="Mixed global nav">
         <NavList>
           <NavItem preventDefault to="#mixed-1" itemId="itm-1" isActive={activeItem === 'itm-1'}>
             Link 1 (not expandable)
@@ -429,7 +429,7 @@ class NavMixedList extends React.Component {
               itemId="grp-1_itm-1"
               isActive={activeItem === 'grp-1_itm-1'}
             >
-              Link 1
+              Mixed Link 1
             </NavItem>
             <NavItem
               preventDefault
@@ -438,7 +438,7 @@ class NavMixedList extends React.Component {
               itemId="grp-1_itm-2"
               isActive={activeItem === 'grp-1_itm-2'}
             >
-              Link 2
+              Mixed Link 2
             </NavItem>
             <NavItem
               preventDefault
@@ -447,7 +447,7 @@ class NavMixedList extends React.Component {
               itemId="grp-1_itm-3"
               isActive={activeItem === 'grp-1_itm-3'}
             >
-              Link 3
+              Mixed Link 3
             </NavItem>
           </NavExpandable>
           <NavExpandable title="Link 3 - expandable" groupId="grp-2" isActive={activeGroup === 'grp-2'}>
@@ -458,7 +458,7 @@ class NavMixedList extends React.Component {
               itemId="grp-2_itm-1"
               isActive={activeItem === 'grp-2_itm-1'}
             >
-              Link 1
+              Mixed 2 Link 1
             </NavItem>
             <NavItem
               preventDefault
@@ -467,7 +467,7 @@ class NavMixedList extends React.Component {
               itemId="grp-2_itm-2"
               isActive={activeItem === 'grp-2_itm-2'}
             >
-              Link 2
+              Mixed 2 Link 2
             </NavItem>
             <NavItem
               preventDefault
@@ -476,7 +476,7 @@ class NavMixedList extends React.Component {
               itemId="grp-2_itm-3"
               isActive={activeItem === 'grp-2_itm-3'}
             >
-              Link 3
+              Mixed 2 Link 3
             </NavItem>
           </NavExpandable>
         </NavList>
@@ -508,7 +508,7 @@ class NavHorizontalList extends React.Component {
   render() {
     const { activeItem } = this.state;
     const nav = (
-      <Nav onSelect={this.onSelect} variant="horizontal">
+      <Nav onSelect={this.onSelect} variant="horizontal" aria-label="Horizontal global nav">
         <NavList>
           {Array.apply(0, Array(10)).map(function(x, i) {
             const num = i + 1;
@@ -548,7 +548,7 @@ class HorizontalSubNav extends React.Component {
   render() {
     const { activeItem } = this.state;
     return (
-      <Nav onSelect={this.onSelect} variant="horizontal-subnav">
+      <Nav onSelect={this.onSelect} variant="horizontal-subnav" aria-label="Horizontal subnav global nav">
         <NavList>
           {Array.apply(0, Array(10)).map(function(x, i) {
             const num = i + 1;
@@ -587,7 +587,7 @@ class NavTertiaryList extends React.Component {
   render() {
     const { activeItem } = this.state;
     return (
-      <Nav onSelect={this.onSelect} variant="tertiary">
+      <Nav onSelect={this.onSelect} variant="tertiary" aria-label="Tertiary global nav">
         <NavList>
           {Array.apply(0, Array(10)).map(function(x, i) {
             const num = i + 1;
@@ -655,19 +655,19 @@ NavWithFlyout = () => {
   }
 
   return (
-    <Nav onSelect={onSelect}>
+    <Nav onSelect={onSelect} aria-label="Flyout global nav">
       <NavList>
-        <NavItem id="default-link1" to="#default-link1" itemId={0} isActive={activeItem === 0}>
-          Link 1
+        <NavItem id="flyout-link1" to="#flyout-link1" itemId={0} isActive={activeItem === 0}>
+          Flyout Link 1
         </NavItem>
-        <NavItem id="default-link2" to="#default-link2" itemId={1} isActive={activeItem === 1}>
-          Link 2
+        <NavItem id="flyout-link2" to="#flyout-link2" itemId={1} isActive={activeItem === 1}>
+          Flyout Link 2
         </NavItem>
-        <NavItem flyout={curFlyout} id="default-link3" to="#default-link3" itemId={2} isActive={activeItem === 2}>
-          Link 3
+        <NavItem flyout={curFlyout} id="flyout-link3" to="#flyout-link3" itemId={2} isActive={activeItem === 2}>
+          Flyout Link 3
         </NavItem>
-        <NavItem id="default-link4" to="#default-link4" itemId={3} isActive={activeItem === 3}>
-          Link 4
+        <NavItem id="flyout-link4" to="#flyout-link4" itemId={3} isActive={activeItem === 3}>
+          Flyout Link 4
         </NavItem>
       </NavList>
     </Nav>

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

@@ -65,7 +65,7 @@ export const NavLevelThreeDrill: React.FunctionComponent = () => {
   };
 
   return (
-    <Nav>
+    <Nav aria-label="Drilldown global nav">
       <Menu
         id="rootMenu"
         containsDrilldown

package/src/components/OptionsMenu/OptionsMenuItemGroup.tsx

@@ -24,9 +24,9 @@ export const OptionsMenuItemGroup: React.FunctionComponent<OptionsMenuItemGroupP
   hasSeparator = false,
   ...props
 }: OptionsMenuItemGroupProps) => (
-  <section {...props} className={css(styles.optionsMenuGroup)}>
+  <section {...props} className={css(styles.optionsMenuGroup)} role="none">
     {groupTitle && <h1 className={css(styles.optionsMenuGroupTitle)}>{groupTitle}</h1>}
-    <ul className={className} aria-label={ariaLabel}>
+    <ul className={className} aria-label={ariaLabel} role="group">
       {children}
       {hasSeparator && <Divider component="li" role="separator" />}
     </ul>

package/src/components/OptionsMenu/OptionsMenuToggleWithText.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import { KEY_CODES } from '../../helpers/constants';
 import styles from '@patternfly/react-styles/css/components/OptionsMenu/options-menu';
+import { DropdownContext } from '../Dropdown';
 
 export interface OptionsMenuToggleWithTextProps extends React.HTMLProps<HTMLDivElement> {
   /** Id of the parent options menu component */
@@ -109,31 +110,35 @@ export const OptionsMenuToggleWithText: React.FunctionComponent<OptionsMenuToggl
   };
 
   return (
-    <div
-      className={css(
-        styles.optionsMenuToggle,
-        styles.modifiers.text,
-        isPlain && styles.modifiers.plain,
-        isDisabled && styles.modifiers.disabled,
-        isActive && styles.modifiers.active
+    <DropdownContext.Consumer>
+      {({ id: contextId }) => (
+        <div
+          className={css(
+            styles.optionsMenuToggle,
+            styles.modifiers.text,
+            isPlain && styles.modifiers.plain,
+            isDisabled && styles.modifiers.disabled,
+            isActive && styles.modifiers.active
+          )}
+          {...props}
+        >
+          <span className={css(styles.optionsMenuToggleText, toggleTextClassName)}>{toggleText}</span>
+          <button
+            className={css(styles.optionsMenuToggleButton, toggleButtonContentsClassName)}
+            id={parentId ? `${parentId}-toggle` : `${contextId}-toggle`}
+            aria-haspopup="listbox"
+            aria-label={ariaLabel}
+            aria-expanded={isOpen}
+            ref={buttonRef}
+            disabled={isDisabled}
+            onClick={() => onToggle(!isOpen)}
+            onKeyDown={onKeyDown}
+          >
+            <span className={css(styles.optionsMenuToggleButtonIcon)}>{toggleButtonContents}</span>
+          </button>
+        </div>
       )}
-      {...props}
-    >
-      <span className={css(styles.optionsMenuToggleText, toggleTextClassName)}>{toggleText}</span>
-      <button
-        className={css(styles.optionsMenuToggleButton, toggleButtonContentsClassName)}
-        id={`${parentId}-toggle`}
-        aria-haspopup="listbox"
-        aria-label={ariaLabel}
-        aria-expanded={isOpen}
-        ref={buttonRef}
-        disabled={isDisabled}
-        onClick={() => onToggle(!isOpen)}
-        onKeyDown={onKeyDown}
-      >
-        <span className={css(styles.optionsMenuToggleButtonIcon)}>{toggleButtonContents}</span>
-      </button>
-    </div>
+    </DropdownContext.Consumer>
   );
 };
 OptionsMenuToggleWithText.displayName = 'OptionsMenuToggleWithText';

package/src/components/OptionsMenu/__tests__/Generated/__snapshots__/OptionsMenuItemGroup.test.tsx.snap

@@ -4,10 +4,12 @@ exports[`OptionsMenuItemGroup should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <section
     class="pf-c-options-menu__group"
+    role="none"
   >
     <ul
       aria-label="''"
       class="''"
+      role="group"
     >
       ReactNode
     </ul>

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

@@ -49,6 +49,7 @@ exports[`optionsMenu expanded 1`] = `
       <section
         class="pf-c-options-menu__group"
         index="0"
+        role="none"
       >
         <h1
           class="pf-c-options-menu__group-title"
@@ -58,6 +59,7 @@ exports[`optionsMenu expanded 1`] = `
         <ul
           aria-label=""
           class=""
+          role="group"
         >
           <li
             id=""
@@ -137,6 +139,7 @@ exports[`optionsMenu expanded 1`] = `
       <section
         class="pf-c-options-menu__group"
         index="2"
+        role="none"
       >
         <h1
           class="pf-c-options-menu__group-title"
@@ -146,6 +149,7 @@ exports[`optionsMenu expanded 1`] = `
         <ul
           aria-label=""
           class=""
+          role="group"
         >
           <li
             id=""
@@ -467,7 +471,7 @@ exports[`optionsMenu text 1`] = `
         aria-haspopup="listbox"
         aria-label="Options menu"
         class="pf-c-options-menu__toggle-button"
-        id="-toggle"
+        id="text-toggle"
       >
         <span
           class="pf-c-options-menu__toggle-button-icon"

package/src/components/OptionsMenu/examples/OptionsMenu.md

@@ -49,7 +49,7 @@ class SingleOption extends React.Component {
 
     return (
       <OptionsMenu 
-        id="options-menu-single-option-example" 
+        id="single-option-example" 
         menuItems={menuItems} 
         isOpen={isOpen} 
         toggle={toggle}/>
@@ -85,7 +85,7 @@ class DisabledOptionsMenu extends React.Component {
 
     return (
       <OptionsMenu 
-        id="options-menu-single-disabled-example-toggle" 
+        id="single-disabled-example" 
         isOpen={isOpen} 
         menuItems={menuItems}
         toggle={toggle}/>
@@ -149,7 +149,7 @@ class MultipleOptions extends React.Component {
 
     return (
       <OptionsMenu 
-        id="options-menu-multiple-options-example" 
+        id="multiple-options-example" 
         menuItems={menuItems} 
         isOpen={isOpen}
         toggle={toggle}
@@ -220,12 +220,12 @@ class Plain extends React.Component {
 
     return (
       <React.Fragment>
-        <OptionsMenu id="options-menu-plain-disabled-example" 
+        <OptionsMenu id="plain-disabled-example" 
           isPlain
           menuItems={disabledMenuItems}  
           isOpen={isDisabledOpen}
           toggle={disabledToggle}/>
-        <OptionsMenu id="options-menu-plain-example" 
+        <OptionsMenu id="plain-example" 
           isPlain
           menuItems={menuItems}  
           isOpen={isOpen}
@@ -277,7 +277,7 @@ class Top extends React.Component {
 
     return (
       <OptionsMenu 
-        id="options-menu-top-example" 
+        id="top-example" 
         direction={OptionsMenuDirection.up} 
         menuItems={menuItems} 
         toggle={toggle} 
@@ -328,7 +328,7 @@ class AlignRight extends React.Component {
 
     return (
       <OptionsMenu 
-        id="options-menu-align-right-example" 
+        id="align-right-example" 
         position={OptionsMenuPosition.right} 
         menuItems={menuItems} 
         toggle={toggle} 
@@ -387,7 +387,7 @@ class PlainWithText extends React.Component {
 
     return (
       <OptionsMenu 
-        id="options-menu-plain-with-text-example" 
+        id="plain-with-text-example" 
         menuItems={menuItems} 
         isOpen={isOpen} 
         isPlain
@@ -447,7 +447,7 @@ class PlainWithText extends React.Component {
 
     return (
       <OptionsMenu 
-        id="options-menu-plain-with-text-example" 
+        id="plain-with-text-disabled-example" 
         menuItems={menuItems} 
         isOpen={isOpen} 
         isPlain
@@ -507,7 +507,7 @@ class GroupedItems extends React.Component {
     
     return (
       <OptionsMenu 
-        id="options-menu-align-right-example" 
+        id="grouped-items-example" 
         position={OptionsMenuPosition.right} 
         menuItems={menuGroups} 
         toggle={toggle} 
@@ -559,7 +559,7 @@ class SingleOption extends React.Component {
 
     return (
       <OptionsMenu 
-        id="options-menu-single-option-example" 
+        id="document-body-example" 
         menuItems={menuItems} 
         isOpen={isOpen} 
         toggle={toggle}

package/src/components/Page/PageHeader.tsx

@@ -21,6 +21,8 @@ export interface PageHeaderProps extends React.HTMLProps<HTMLDivElement> {
   topNav?: React.ReactNode;
   /** True to show the nav toggle button (toggles side nav) */
   showNavToggle?: boolean;
+  /** Id for the nav toggle button */
+  navToggleId?: string;
   /** True if the side nav is shown  */
   isNavOpen?: boolean;
   /** This prop is no longer managed through PageHeader but in the Page component. */
@@ -44,6 +46,7 @@ export const PageHeader: React.FunctionComponent<PageHeaderProps> = ({
   isManagedSidebar: deprecatedIsManagedSidebar = undefined,
   role = undefined as string,
   showNavToggle = false,
+  navToggleId = 'nav-toggle',
   onNavToggle = () => undefined as any,
   'aria-label': ariaLabel = 'Global navigation',
   'aria-controls': ariaControls = null,
@@ -68,7 +71,7 @@ export const PageHeader: React.FunctionComponent<PageHeaderProps> = ({
                 {showNavToggle && (
                   <div className={css(styles.pageHeaderBrandToggle)}>
                     <Button
-                      id="nav-toggle"
+                      id={navToggleId}
                       onClick={navToggle}
                       aria-label={ariaLabel}
                       aria-controls={ariaControls}

package/src/components/Page/PageSidebar.tsx

@@ -17,6 +17,8 @@ export interface PageSidebarProps extends React.HTMLProps<HTMLDivElement> {
   isNavOpen?: boolean;
   /** Indicates the color scheme of the sidebar */
   theme?: 'dark' | 'light';
+  /** Sidebar id */
+  id?: string;
 }
 
 export interface PageSidebarContextProps {
@@ -32,6 +34,7 @@ export const PageSidebar: React.FunctionComponent<PageSidebarProps> = ({
   nav,
   isNavOpen = true,
   theme = 'dark',
+  id = 'page-sidebar',
   ...props
 }: PageSidebarProps) => (
   <PageContextConsumer>
@@ -40,7 +43,7 @@ export const PageSidebar: React.FunctionComponent<PageSidebarProps> = ({
 
       return (
         <div
-          id="page-sidebar"
+          id={id}
           className={css(
             styles.pageSidebar,
             theme === 'light' && styles.modifiers.light,
@@ -51,7 +54,7 @@ export const PageSidebar: React.FunctionComponent<PageSidebarProps> = ({
           aria-hidden={!navOpen}
           {...props}
         >
-          <div className={styles.pageSidebarBody}>
+          <div className={css(styles.pageSidebarBody)}>
             <PageSidebarContext.Provider value={{ isNavOpen: navOpen }}>{nav}</PageSidebarContext.Provider>
           </div>
         </div>