@patternfly/react-core 4.225.2 → 4.225.3

package/src/components/Menu/examples/MenuDrilldownInitialState.tsx

@@ -6,10 +6,13 @@ import LayerGroupIcon from '@patternfly/react-icons/dist/esm/icons/layer-group-i
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 
 export const MenuDrilldownInitialState: React.FunctionComponent = () => {
-  const [menuDrilledIn, setMenuDrilledIn] = React.useState<string[]>(['rootMenu', 'drilldownMenuStart']);
+  const [menuDrilledIn, setMenuDrilledIn] = React.useState<string[]>([
+    'initial-state-rootMenu',
+    'initial-state-drilldownMenuStart'
+  ]);
   const [drilldownPath, setDrilldownPath] = React.useState<string[]>(['group:start_rollout', 'group:app_grouping']);
-  const [menuHeights, setMenuHeights] = React.useState<any>({ rootMenu: 216 }); // The root menu height must be defined when starting from a drilled in state
-  const [activeMenu, setActiveMenu] = React.useState<string>('drilldownMenuStartGrouping');
+  const [menuHeights, setMenuHeights] = React.useState<any>({ 'initial-state-rootMenu': 216 }); // The root menu height must be defined when starting from a drilled in state
+  const [activeMenu, setActiveMenu] = React.useState<string>('initial-state-drilldownMenuStartGrouping');
 
   const drillIn = (fromMenuId: string, toMenuId: string, pathId: string) => {
     setMenuDrilledIn([...menuDrilledIn, fromMenuId]);
@@ -26,14 +29,14 @@ export const MenuDrilldownInitialState: React.FunctionComponent = () => {
   };
 
   const setHeight = (menuId: string, height: number) => {
-    if (menuHeights[menuId] === undefined || (menuId !== 'rootMenu' && menuHeights[menuId] !== height)) {
+    if (menuHeights[menuId] === undefined || (menuId !== 'initial-state-rootMenu' && menuHeights[menuId] !== height)) {
       setMenuHeights({ ...menuHeights, [menuId]: height });
     }
   };
 
   return (
     <Menu
-      id="rootMenu"
+      id="initial-state-rootMenu"
       containsDrilldown
       drilldownItemPath={drilldownPath}
       drilledInMenus={menuDrilledIn}
@@ -48,7 +51,7 @@ export const MenuDrilldownInitialState: React.FunctionComponent = () => {
             itemId="group:start_rollout"
             direction="down"
             drilldownMenu={
-              <DrilldownMenu id="drilldownMenuStart">
+              <DrilldownMenu id="initial-state-drilldownMenuStart">
                 <MenuItem itemId="group:start_rollout_breadcrumb" direction="up">
                   Start rollout
                 </MenuItem>
@@ -58,7 +61,7 @@ export const MenuDrilldownInitialState: React.FunctionComponent = () => {
                   description="Groups A-C"
                   direction="down"
                   drilldownMenu={
-                    <DrilldownMenu id="drilldownMenuStartGrouping">
+                    <DrilldownMenu id="initial-state-drilldownMenuStartGrouping">
                       <MenuItem itemId="group:app_grouping_breadcrumb" direction="up">
                         Application grouping
                       </MenuItem>
@@ -76,7 +79,7 @@ export const MenuDrilldownInitialState: React.FunctionComponent = () => {
                   itemId="group:labels"
                   direction="down"
                   drilldownMenu={
-                    <DrilldownMenu id="drilldownMenuStartLabels">
+                    <DrilldownMenu id="initial-state-drilldownMenuStartLabels">
                       <MenuItem itemId="group:labels_breadcrumb" direction="up">
                         Labels
                       </MenuItem>
@@ -99,7 +102,7 @@ export const MenuDrilldownInitialState: React.FunctionComponent = () => {
             itemId="group:pause_rollout"
             direction="down"
             drilldownMenu={
-              <DrilldownMenu id="drilldownMenuPause">
+              <DrilldownMenu id="initial-state-drilldownMenuPause">
                 <MenuItem itemId="group:pause_rollout_breadcrumb" direction="up">
                   Pause rollouts
                 </MenuItem>
@@ -109,7 +112,7 @@ export const MenuDrilldownInitialState: React.FunctionComponent = () => {
                   description="Groups A-C"
                   direction="down"
                   drilldownMenu={
-                    <DrilldownMenu id="drilldownMenuGrouping">
+                    <DrilldownMenu id="initial-state-drilldownMenuGrouping">
                       <MenuItem itemId="group:app_grouping_breadcrumb" direction="up">
                         Application grouping
                       </MenuItem>
@@ -127,7 +130,7 @@ export const MenuDrilldownInitialState: React.FunctionComponent = () => {
                   itemId="group:labels"
                   direction="down"
                   drilldownMenu={
-                    <DrilldownMenu id="drilldownMenuLabels">
+                    <DrilldownMenu id="initial-state-drilldownMenuLabels">
                       <MenuItem itemId="group:labels_breadcrumb" direction="up">
                         Labels
                       </MenuItem>
@@ -151,7 +154,7 @@ export const MenuDrilldownInitialState: React.FunctionComponent = () => {
             icon={<StorageDomainIcon aria-hidden />}
             direction="down"
             drilldownMenu={
-              <DrilldownMenu id="drilldownMenuStorage">
+              <DrilldownMenu id="initial-state-drilldownMenuStorage">
                 <MenuItem itemId="group:storage_breadcrumb" icon={<StorageDomainIcon aria-hidden />} direction="up">
                   Add storage
                 </MenuItem>

package/src/components/Menu/examples/MenuDrilldownSubmenuFunctions.tsx

@@ -9,7 +9,7 @@ export const MenuDrilldownSubmenuFunctions: React.FunctionComponent = () => {
   const [menuDrilledIn, setMenuDrilledIn] = React.useState<string[]>([]);
   const [drilldownPath, setDrilldownPath] = React.useState<string[]>([]);
   const [menuHeights, setMenuHeights] = React.useState<any>({});
-  const [activeMenu, setActiveMenu] = React.useState<string>('rootMenu');
+  const [activeMenu, setActiveMenu] = React.useState<string>('functions-rootMenu');
 
   const drillIn = (fromMenuId: string, toMenuId: string, pathId: string) => {
     setMenuDrilledIn([...menuDrilledIn, fromMenuId]);
@@ -33,7 +33,7 @@ export const MenuDrilldownSubmenuFunctions: React.FunctionComponent = () => {
 
   return (
     <Menu
-      id="rootMenu"
+      id="functions-rootMenu"
       containsDrilldown
       drilldownItemPath={drilldownPath}
       drilledInMenus={menuDrilledIn}
@@ -48,7 +48,7 @@ export const MenuDrilldownSubmenuFunctions: React.FunctionComponent = () => {
             itemId="group:start_rollout"
             direction="down"
             drilldownMenu={() => (
-              <DrilldownMenu id="drilldownMenuStart">
+              <DrilldownMenu id="functions-drilldownMenuStart">
                 <MenuItem itemId="group:start_rollout_breadcrumb" direction="up">
                   Start rollout
                 </MenuItem>
@@ -58,7 +58,7 @@ export const MenuDrilldownSubmenuFunctions: React.FunctionComponent = () => {
                   description="Groups A-C"
                   direction="down"
                   drilldownMenu={() => (
-                    <DrilldownMenu id="drilldownMenuStartGrouping">
+                    <DrilldownMenu id="functions-drilldownMenuStartGrouping">
                       <MenuItem itemId="group:app_grouping_breadcrumb" direction="up">
                         Application grouping
                       </MenuItem>
@@ -76,7 +76,7 @@ export const MenuDrilldownSubmenuFunctions: React.FunctionComponent = () => {
                   itemId="group:labels"
                   direction="down"
                   drilldownMenu={() => (
-                    <DrilldownMenu id="drilldownMenuStartLabels">
+                    <DrilldownMenu id="functions-drilldownMenuStartLabels">
                       <MenuItem itemId="group:labels_breadcrumb" direction="up">
                         Labels
                       </MenuItem>
@@ -99,7 +99,7 @@ export const MenuDrilldownSubmenuFunctions: React.FunctionComponent = () => {
             itemId="group:pause_rollout"
             direction="down"
             drilldownMenu={() => (
-              <DrilldownMenu id="drilldownMenuPause">
+              <DrilldownMenu id="functions-drilldownMenuPause">
                 <MenuItem itemId="group:pause_rollout_breadcrumb" direction="up">
                   Pause rollouts
                 </MenuItem>
@@ -109,7 +109,7 @@ export const MenuDrilldownSubmenuFunctions: React.FunctionComponent = () => {
                   description="Groups A-C"
                   direction="down"
                   drilldownMenu={() => (
-                    <DrilldownMenu id="drilldownMenuGrouping">
+                    <DrilldownMenu id="functions-drilldownMenuGrouping">
                       <MenuItem itemId="group:app_grouping_breadcrumb" direction="up">
                         Application grouping
                       </MenuItem>
@@ -127,7 +127,7 @@ export const MenuDrilldownSubmenuFunctions: React.FunctionComponent = () => {
                   itemId="group:labels"
                   direction="down"
                   drilldownMenu={() => (
-                    <DrilldownMenu id="drilldownMenuLabels">
+                    <DrilldownMenu id="functions-drilldownMenuLabels">
                       <MenuItem itemId="group:labels_breadcrumb" direction="up">
                         Labels
                       </MenuItem>
@@ -151,7 +151,7 @@ export const MenuDrilldownSubmenuFunctions: React.FunctionComponent = () => {
             icon={<StorageDomainIcon aria-hidden />}
             direction="down"
             drilldownMenu={() => (
-              <DrilldownMenu id="drilldownMenuStorage">
+              <DrilldownMenu id="functions-drilldownMenuStorage">
                 <MenuItem itemId="group:storage_breadcrumb" icon={<StorageDomainIcon aria-hidden />} direction="up">
                   Add storage
                 </MenuItem>

package/src/components/Nav/Nav.tsx

@@ -30,7 +30,7 @@ export interface NavProps
     isExpanded: boolean;
     event: React.MouseEvent<HTMLButtonElement>;
   }) => void;
-  /** Accessibility label */
+  /** Accessible label for the nav when there are multiple navs on the page */
   'aria-label'?: string;
   /** Indicates which theme color to use */
   theme?: 'dark' | 'light';

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>