@patternfly/react-core 4.225.2 → 4.225.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.225.2",
+  "version": "4.225.3",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -34,9 +34,9 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.76.2",
-    "@patternfly/react-styles": "^4.75.2",
-    "@patternfly/react-tokens": "^4.77.2",
+    "@patternfly/react-icons": "^4.76.3",
+    "@patternfly/react-styles": "^4.75.3",
+    "@patternfly/react-tokens": "^4.77.3",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "9080d800a04f592f448f4adef6e40fe5ec69e72f"
+  "gitHead": "302d95c365c0a9b7d76921b0dd66177df756bd93"
 }

package/src/components/Alert/Alert.tsx

@@ -81,7 +81,6 @@ export const Alert: React.FunctionComponent<AlertProps> = ({
   isPlain = false,
   isLiveRegion = false,
   variantLabel = `${capitalize(variant)} alert:`,
-  'aria-label': ariaLabel = `${capitalize(variant)} Alert`,
   actionClose,
   actionLinks,
   title,
@@ -203,7 +202,6 @@ export const Alert: React.FunctionComponent<AlertProps> = ({
         styles.modifiers[variant as 'success' | 'danger' | 'warning' | 'info'],
         className
       )}
-      aria-label={ariaLabel}
       {...ouiaProps}
       {...(isLiveRegion && {
         'aria-live': 'polite',

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

@@ -3,7 +3,6 @@
 exports[`Alert Alert - danger Action Link 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Danger Alert"
     class="pf-c-alert pf-m-danger"
     data-ouia-component-id="OUIA-Generated-Alert-danger-4"
     data-ouia-component-type="PF4/Alert"
@@ -61,7 +60,6 @@ exports[`Alert Alert - danger Action Link 1`] = `
 exports[`Alert Alert - danger Action and Title 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Danger Alert"
     class="pf-c-alert pf-m-danger"
     data-ouia-component-id="OUIA-Generated-Alert-danger-6"
     data-ouia-component-type="PF4/Alert"
@@ -224,7 +222,6 @@ exports[`Alert Alert - danger Custom icon 1`] = `
 exports[`Alert Alert - danger Description 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Danger Alert"
     class="pf-c-alert pf-m-danger"
     data-ouia-component-id="OUIA-Generated-Alert-danger-1"
     data-ouia-component-type="PF4/Alert"
@@ -268,7 +265,6 @@ exports[`Alert Alert - danger Description 1`] = `
 exports[`Alert Alert - danger Heading level 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Danger Alert"
     class="pf-c-alert pf-m-danger"
     data-ouia-component-id="OUIA-Generated-Alert-danger-3"
     data-ouia-component-type="PF4/Alert"
@@ -313,7 +309,6 @@ exports[`Alert Alert - danger Heading level 1`] = `
 exports[`Alert Alert - danger Title 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Danger Alert"
     class="pf-c-alert pf-m-danger"
     data-ouia-component-id="OUIA-Generated-Alert-danger-2"
     data-ouia-component-type="PF4/Alert"
@@ -405,7 +400,6 @@ exports[`Alert Alert - danger Toast alerts match snapsnot 1`] = `
 exports[`Alert Alert - danger expandable variation 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Danger Alert"
     class="pf-c-alert pf-m-expandable pf-m-danger"
     data-ouia-component-id="OUIA-Generated-Alert-danger-9"
     data-ouia-component-type="PF4/Alert"
@@ -477,7 +471,6 @@ exports[`Alert Alert - danger expandable variation 1`] = `
 exports[`Alert Alert - danger inline variation 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Danger Alert"
     class="pf-c-alert pf-m-inline pf-m-danger"
     data-ouia-component-id="OUIA-Generated-Alert-danger-8"
     data-ouia-component-type="PF4/Alert"
@@ -522,7 +515,6 @@ exports[`Alert Alert - danger inline variation 1`] = `
 exports[`Alert Alert - default Action Link 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Default Alert"
     class="pf-c-alert"
     data-ouia-component-id="OUIA-Generated-Alert-default-5"
     data-ouia-component-type="PF4/Alert"
@@ -580,7 +572,6 @@ exports[`Alert Alert - default Action Link 1`] = `
 exports[`Alert Alert - default Action and Title 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Default Alert"
     class="pf-c-alert"
     data-ouia-component-id="OUIA-Generated-Alert-default-7"
     data-ouia-component-type="PF4/Alert"
@@ -743,7 +734,6 @@ exports[`Alert Alert - default Custom icon 1`] = `
 exports[`Alert Alert - default Description 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Default Alert"
     class="pf-c-alert"
     data-ouia-component-id="OUIA-Generated-Alert-default-2"
     data-ouia-component-type="PF4/Alert"
@@ -787,7 +777,6 @@ exports[`Alert Alert - default Description 1`] = `
 exports[`Alert Alert - default Heading level 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Default Alert"
     class="pf-c-alert"
     data-ouia-component-id="OUIA-Generated-Alert-default-4"
     data-ouia-component-type="PF4/Alert"
@@ -832,7 +821,6 @@ exports[`Alert Alert - default Heading level 1`] = `
 exports[`Alert Alert - default Title 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Default Alert"
     class="pf-c-alert"
     data-ouia-component-id="OUIA-Generated-Alert-default-3"
     data-ouia-component-type="PF4/Alert"
@@ -924,7 +912,6 @@ exports[`Alert Alert - default Toast alerts match snapsnot 1`] = `
 exports[`Alert Alert - default expandable variation 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Default Alert"
     class="pf-c-alert pf-m-expandable"
     data-ouia-component-id="OUIA-Generated-Alert-default-10"
     data-ouia-component-type="PF4/Alert"
@@ -996,7 +983,6 @@ exports[`Alert Alert - default expandable variation 1`] = `
 exports[`Alert Alert - default inline variation 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Default Alert"
     class="pf-c-alert pf-m-inline"
     data-ouia-component-id="OUIA-Generated-Alert-default-9"
     data-ouia-component-type="PF4/Alert"
@@ -1041,7 +1027,6 @@ exports[`Alert Alert - default inline variation 1`] = `
 exports[`Alert Alert - info Action Link 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Info Alert"
     class="pf-c-alert pf-m-info"
     data-ouia-component-id="OUIA-Generated-Alert-info-4"
     data-ouia-component-type="PF4/Alert"
@@ -1099,7 +1084,6 @@ exports[`Alert Alert - info Action Link 1`] = `
 exports[`Alert Alert - info Action and Title 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Info Alert"
     class="pf-c-alert pf-m-info"
     data-ouia-component-id="OUIA-Generated-Alert-info-6"
     data-ouia-component-type="PF4/Alert"
@@ -1262,7 +1246,6 @@ exports[`Alert Alert - info Custom icon 1`] = `
 exports[`Alert Alert - info Description 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Info Alert"
     class="pf-c-alert pf-m-info"
     data-ouia-component-id="OUIA-Generated-Alert-info-1"
     data-ouia-component-type="PF4/Alert"
@@ -1306,7 +1289,6 @@ exports[`Alert Alert - info Description 1`] = `
 exports[`Alert Alert - info Heading level 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Info Alert"
     class="pf-c-alert pf-m-info"
     data-ouia-component-id="OUIA-Generated-Alert-info-3"
     data-ouia-component-type="PF4/Alert"
@@ -1351,7 +1333,6 @@ exports[`Alert Alert - info Heading level 1`] = `
 exports[`Alert Alert - info Title 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Info Alert"
     class="pf-c-alert pf-m-info"
     data-ouia-component-id="OUIA-Generated-Alert-info-2"
     data-ouia-component-type="PF4/Alert"
@@ -1443,7 +1424,6 @@ exports[`Alert Alert - info Toast alerts match snapsnot 1`] = `
 exports[`Alert Alert - info expandable variation 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Info Alert"
     class="pf-c-alert pf-m-expandable pf-m-info"
     data-ouia-component-id="OUIA-Generated-Alert-info-9"
     data-ouia-component-type="PF4/Alert"
@@ -1515,7 +1495,6 @@ exports[`Alert Alert - info expandable variation 1`] = `
 exports[`Alert Alert - info inline variation 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Info Alert"
     class="pf-c-alert pf-m-inline pf-m-info"
     data-ouia-component-id="OUIA-Generated-Alert-info-8"
     data-ouia-component-type="PF4/Alert"
@@ -1560,7 +1539,6 @@ exports[`Alert Alert - info inline variation 1`] = `
 exports[`Alert Alert - success Action Link 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Success Alert"
     class="pf-c-alert pf-m-success"
     data-ouia-component-id="OUIA-Generated-Alert-success-4"
     data-ouia-component-type="PF4/Alert"
@@ -1618,7 +1596,6 @@ exports[`Alert Alert - success Action Link 1`] = `
 exports[`Alert Alert - success Action and Title 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Success Alert"
     class="pf-c-alert pf-m-success"
     data-ouia-component-id="OUIA-Generated-Alert-success-6"
     data-ouia-component-type="PF4/Alert"
@@ -1781,7 +1758,6 @@ exports[`Alert Alert - success Custom icon 1`] = `
 exports[`Alert Alert - success Description 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Success Alert"
     class="pf-c-alert pf-m-success"
     data-ouia-component-id="OUIA-Generated-Alert-success-1"
     data-ouia-component-type="PF4/Alert"
@@ -1825,7 +1801,6 @@ exports[`Alert Alert - success Description 1`] = `
 exports[`Alert Alert - success Heading level 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Success Alert"
     class="pf-c-alert pf-m-success"
     data-ouia-component-id="OUIA-Generated-Alert-success-3"
     data-ouia-component-type="PF4/Alert"
@@ -1870,7 +1845,6 @@ exports[`Alert Alert - success Heading level 1`] = `
 exports[`Alert Alert - success Title 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Success Alert"
     class="pf-c-alert pf-m-success"
     data-ouia-component-id="OUIA-Generated-Alert-success-2"
     data-ouia-component-type="PF4/Alert"
@@ -1962,7 +1936,6 @@ exports[`Alert Alert - success Toast alerts match snapsnot 1`] = `
 exports[`Alert Alert - success expandable variation 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Success Alert"
     class="pf-c-alert pf-m-expandable pf-m-success"
     data-ouia-component-id="OUIA-Generated-Alert-success-9"
     data-ouia-component-type="PF4/Alert"
@@ -2034,7 +2007,6 @@ exports[`Alert Alert - success expandable variation 1`] = `
 exports[`Alert Alert - success inline variation 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Success Alert"
     class="pf-c-alert pf-m-inline pf-m-success"
     data-ouia-component-id="OUIA-Generated-Alert-success-8"
     data-ouia-component-type="PF4/Alert"
@@ -2079,7 +2051,6 @@ exports[`Alert Alert - success inline variation 1`] = `
 exports[`Alert Alert - warning Action Link 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Warning Alert"
     class="pf-c-alert pf-m-warning"
     data-ouia-component-id="OUIA-Generated-Alert-warning-4"
     data-ouia-component-type="PF4/Alert"
@@ -2137,7 +2108,6 @@ exports[`Alert Alert - warning Action Link 1`] = `
 exports[`Alert Alert - warning Action and Title 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Warning Alert"
     class="pf-c-alert pf-m-warning"
     data-ouia-component-id="OUIA-Generated-Alert-warning-6"
     data-ouia-component-type="PF4/Alert"
@@ -2300,7 +2270,6 @@ exports[`Alert Alert - warning Custom icon 1`] = `
 exports[`Alert Alert - warning Description 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Warning Alert"
     class="pf-c-alert pf-m-warning"
     data-ouia-component-id="OUIA-Generated-Alert-warning-1"
     data-ouia-component-type="PF4/Alert"
@@ -2344,7 +2313,6 @@ exports[`Alert Alert - warning Description 1`] = `
 exports[`Alert Alert - warning Heading level 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Warning Alert"
     class="pf-c-alert pf-m-warning"
     data-ouia-component-id="OUIA-Generated-Alert-warning-3"
     data-ouia-component-type="PF4/Alert"
@@ -2389,7 +2357,6 @@ exports[`Alert Alert - warning Heading level 1`] = `
 exports[`Alert Alert - warning Title 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Warning Alert"
     class="pf-c-alert pf-m-warning"
     data-ouia-component-id="OUIA-Generated-Alert-warning-2"
     data-ouia-component-type="PF4/Alert"
@@ -2481,7 +2448,6 @@ exports[`Alert Alert - warning Toast alerts match snapsnot 1`] = `
 exports[`Alert Alert - warning expandable variation 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Warning Alert"
     class="pf-c-alert pf-m-expandable pf-m-warning"
     data-ouia-component-id="OUIA-Generated-Alert-warning-9"
     data-ouia-component-type="PF4/Alert"
@@ -2553,7 +2519,6 @@ exports[`Alert Alert - warning expandable variation 1`] = `
 exports[`Alert Alert - warning inline variation 1`] = `
 <DocumentFragment>
   <div
-    aria-label="Warning Alert"
     class="pf-c-alert pf-m-inline pf-m-warning"
     data-ouia-component-id="OUIA-Generated-Alert-warning-8"
     data-ouia-component-type="PF4/Alert"

package/src/components/Masthead/examples/Masthead.md

@@ -23,7 +23,7 @@ import React from 'react';
 import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button } from '@patternfly/react-core';
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 
-<Masthead id="basic">
+<Masthead id="basic-example">
   <MastheadToggle>
     <Button variant="plain" onClick={() => {}} aria-label="Global navigation">
       <BarsIcon />
@@ -126,7 +126,7 @@ import React from 'react';
 import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button } from '@patternfly/react-core';
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 
-<Masthead id="stack-masthead" display={{ default: 'inline', lg: 'stack', '2xl': 'inline' }}>
+<Masthead id="stack-inline-masthead" display={{ default: 'inline', lg: 'stack', '2xl': 'inline' }}>
   <MastheadToggle>
     <Button variant="plain" onClick={() => {}} aria-label="Global navigation">
       <BarsIcon />
@@ -216,7 +216,7 @@ import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 import { Link } from '@reach/router';
 import pfIcon from './pf-logo-small.svg';
 
-<Masthead id="basic">
+<Masthead id="icon-router-link">
   <MastheadToggle>
     <Button variant="plain" onClick={() => {}} aria-label="Global navigation">
       <BarsIcon />

package/src/components/Menu/MenuGroup.tsx

@@ -13,6 +13,8 @@ export interface MenuGroupProps extends React.HTMLProps<HTMLElement> {
   titleId?: string;
   /** Forwarded ref */
   innerRef?: React.Ref<any>;
+  /** Group label heading level. Default is h1. */
+  labelHeadingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 }
 
 const MenuGroupBase: React.FunctionComponent<MenuGroupProps> = ({
@@ -21,13 +23,14 @@ const MenuGroupBase: React.FunctionComponent<MenuGroupProps> = ({
   label = '',
   titleId = '',
   innerRef,
+  labelHeadingLevel: HeadingLevel = 'h1',
   ...props
 }: MenuGroupProps) => (
   <section {...props} className={css('pf-c-menu__group', className)} ref={innerRef}>
     {label && (
-      <h1 className={css(styles.menuGroupTitle)} id={titleId}>
+      <HeadingLevel className={css(styles.menuGroupTitle)} id={titleId}>
         {label}
-      </h1>
+      </HeadingLevel>
     )}
     {children}
   </section>

package/src/components/Menu/examples/Menu.md

@@ -309,7 +309,7 @@ class MenuWithTitledGroups extends React.Component {
             </MenuList>
           </MenuGroup>
           <Divider />
-          <MenuGroup label="Group 1">
+          <MenuGroup label="Group 1" labelHeadingLevel="h3">
             <MenuList>
               <MenuItem to="#" itemId={1}>
                 Link 1
@@ -318,7 +318,7 @@ class MenuWithTitledGroups extends React.Component {
             </MenuList>
           </MenuGroup>
           <Divider />
-          <MenuGroup label="Group 2">
+          <MenuGroup label="Group 2" labelHeadingLevel="h3">
             <MenuList>
               <MenuItem to="#" itemId={3}>
                 Link 1
@@ -424,7 +424,7 @@ class MenuWithActions extends React.Component {
         activeItemId={activeItem}
       >
         <MenuContent>
-          <MenuGroup label="Actions">
+          <MenuGroup label="Actions" labelHeadingLevel="h3">
             <MenuList>
               <MenuItem
                 isSelected={selectedItems.indexOf(0) !== -1}
@@ -545,7 +545,7 @@ class MenuWithFavorites extends React.Component {
         <MenuContent>
           {favorites.length > 0 && (
             <React.Fragment>
-              <MenuGroup label="Favorites">
+              <MenuGroup label="Favorites" labelHeadingLevel="h3">
                 <MenuList>
                   {items
                     // map the items into the favorites group that have been favorited
@@ -569,7 +569,7 @@ class MenuWithFavorites extends React.Component {
               <Divider />
             </React.Fragment>
           )}
-          <MenuGroup label="All actions">
+          <MenuGroup label="All actions" labelHeadingLevel="h3">
             <MenuList>
               {items.map(item => {
                 const { text, description, itemId, action, actionId } = item;
@@ -733,7 +733,7 @@ class MenuWithDrilldownBreadcrumbs extends React.Component {
       menuDrilledIn: [],
       drilldownPath: [],
       menuHeights: {},
-      activeMenu: 'rootMenu',
+      activeMenu: 'breadcrumbs-rootMenu',
       breadcrumb: undefined,
       withMaxMenuHeight: false
     };
@@ -793,7 +793,7 @@ class MenuWithDrilldownBreadcrumbs extends React.Component {
 
     this.startRolloutBreadcrumb = (
       <Breadcrumb>
-        <BreadcrumbItem component="button" onClick={() => this.drillOut('rootMenu', 'group:start_rollout', null)}>
+        <BreadcrumbItem component="button" onClick={() => this.drillOut('breadcrumbs-rootMenu', 'group:start_rollout', null)}>
           Root
         </BreadcrumbItem>
         <BreadcrumbHeading component="button">Start rollout</BreadcrumbHeading>
@@ -803,7 +803,7 @@ class MenuWithDrilldownBreadcrumbs extends React.Component {
     this.appGroupingBreadcrumb = isOpen => {
       return (
         <Breadcrumb>
-          <BreadcrumbItem component="button" onClick={() => this.drillOut('rootMenu', 'group:start_rollout', null)}>
+          <BreadcrumbItem component="button" onClick={() => this.drillOut('breadcrumbs-rootMenu', 'group:start_rollout', null)}>
             Root
           </BreadcrumbItem>
           <BreadcrumbItem isDropdown>
@@ -820,7 +820,7 @@ class MenuWithDrilldownBreadcrumbs extends React.Component {
                   component="button"
                   icon={<AngleLeftIcon />}
                   onClick={() =>
-                    this.drillOut('drilldownMenuStart', 'group:app_grouping_start', this.startRolloutBreadcrumb)
+                    this.drillOut('breadcrumbs-drilldownMenuStart', 'group:app_grouping_start', this.startRolloutBreadcrumb)
                   }
                 >
                   Start rollout
@@ -835,7 +835,7 @@ class MenuWithDrilldownBreadcrumbs extends React.Component {
 
     this.labelsBreadcrumb = isOpen => (
       <Breadcrumb>
-        <BreadcrumbItem component="button" onClick={() => this.drillOut('rootMenu', 'group:start_rollout', null)}>
+        <BreadcrumbItem component="button" onClick={() => this.drillOut('breadcrumbs-rootMenu', 'group:start_rollout', null)}>
           Root
         </BreadcrumbItem>
         <BreadcrumbItem isDropdown>
@@ -851,7 +851,7 @@ class MenuWithDrilldownBreadcrumbs extends React.Component {
                 key="dropdown-start"
                 component="button"
                 icon={<AngleLeftIcon />}
-                onClick={() => this.drillOut('drilldownMenuStart', 'group:labels_start', this.startRolloutBreadcrumb)}
+                onClick={() => this.drillOut('breadcrumbs-drilldownMenuStart', 'group:labels_start', this.startRolloutBreadcrumb)}
               >
                 Start rollout
               </DropdownItem>
@@ -864,7 +864,7 @@ class MenuWithDrilldownBreadcrumbs extends React.Component {
 
     this.pauseRolloutsBreadcrumb = (
       <Breadcrumb>
-        <BreadcrumbItem component="button" onClick={() => this.drillOut('rootMenu', 'group:pause_rollout', null)}>
+        <BreadcrumbItem component="button" onClick={() => this.drillOut('breadcrumbs-rootMenu', 'group:pause_rollout', null)}>
           Root
         </BreadcrumbItem>
         <BreadcrumbHeading component="button">Pause rollouts</BreadcrumbHeading>
@@ -873,12 +873,12 @@ class MenuWithDrilldownBreadcrumbs extends React.Component {
 
     this.pauseRolloutsAppGrpBreadcrumb = (
       <Breadcrumb>
-        <BreadcrumbItem component="button" onClick={() => this.drillOut('rootMenu', 'group:pause_rollout', null)}>
+        <BreadcrumbItem component="button" onClick={() => this.drillOut('breadcrumbs-rootMenu', 'group:pause_rollout', null)}>
           Root
         </BreadcrumbItem>
         <BreadcrumbItem
           component="button"
-          onClick={() => this.drillOut('drilldownMenuPause', 'group:app_grouping', this.pauseRolloutsBreadcrumb)}
+          onClick={() => this.drillOut('breadcrumbs-drilldownMenuPause', 'group:app_grouping', this.pauseRolloutsBreadcrumb)}
         >
           Pause rollouts
         </BreadcrumbItem>
@@ -888,12 +888,12 @@ class MenuWithDrilldownBreadcrumbs extends React.Component {
 
     this.pauseRolloutsLabelsBreadcrumb = (
       <Breadcrumb>
-        <BreadcrumbItem component="button" onClick={() => this.drillOut('rootMenu', 'group:pause_rollout', null)}>
+        <BreadcrumbItem component="button" onClick={() => this.drillOut('breadcrumbs-rootMenu', 'group:pause_rollout', null)}>
           Root
         </BreadcrumbItem>
         <BreadcrumbItem
           component="button"
-          onClick={() => this.drillOut('drilldownMenuPause', 'group:labels', this.pauseRolloutsBreadcrumb)}
+          onClick={() => this.drillOut('breadcrumbs-drilldownMenuPause', 'group:labels', this.pauseRolloutsBreadcrumb)}
         >
           Pause rollouts
         </BreadcrumbItem>
@@ -903,7 +903,7 @@ class MenuWithDrilldownBreadcrumbs extends React.Component {
 
     this.addStorageBreadcrumb = (
       <Breadcrumb>
-        <BreadcrumbItem component="button" onClick={() => this.drillOut('rootMenu', 'group:storage', null)}>
+        <BreadcrumbItem component="button" onClick={() => this.drillOut('breadcrumbs-rootMenu', 'group:storage', null)}>
           Root
         </BreadcrumbItem>
         <BreadcrumbHeading component="button">Add storage</BreadcrumbHeading>
@@ -926,7 +926,7 @@ class MenuWithDrilldownBreadcrumbs extends React.Component {
         />
         <br />
         <Menu
-          id="rootMenu"
+          id="breadcrumbs-rootMenu"
           containsDrilldown
           drilldownItemPath={drilldownPath}
           drilledInMenus={menuDrilledIn}
@@ -948,14 +948,14 @@ class MenuWithDrilldownBreadcrumbs extends React.Component {
                 direction="down"
                 onClick={() => this.setState({ breadcrumb: this.startRolloutBreadcrumb })}
                 drilldownMenu={
-                  <DrilldownMenu id="drilldownMenuStart">
+                  <DrilldownMenu id="breadcrumbs-drilldownMenuStart">
                     <MenuItem
                       itemId="group:app_grouping_start"
                       description="Groups A-G"
                       direction="down"
                       onClick={() => this.setState({ breadcrumb: this.appGroupingBreadcrumb(false) })}
                       drilldownMenu={
-                        <DrilldownMenu id="drilldownMenuStartGrouping">
+                        <DrilldownMenu id="breadcrumbs-drilldownMenuStartGrouping">
                           <MenuItem itemId="group_a">Group A</MenuItem>
                           <MenuItem itemId="group_b">Group B</MenuItem>
                           <MenuItem itemId="group_c">Group C</MenuItem>
@@ -974,7 +974,7 @@ class MenuWithDrilldownBreadcrumbs extends React.Component {
                       direction="down"
                       onClick={() => this.setState({ breadcrumb: this.labelsBreadcrumb(false) })}
                       drilldownMenu={
-                        <DrilldownMenu id="drilldownMenuStartLabels">
+                        <DrilldownMenu id="breadcrumbs-drilldownMenuStartLabels">
                           <MenuItem itemId="label_1">Label 1</MenuItem>
                           <MenuItem itemId="label_2">Label 2</MenuItem>
                           <MenuItem itemId="label_3">Label 3</MenuItem>
@@ -994,14 +994,14 @@ class MenuWithDrilldownBreadcrumbs extends React.Component {
                 direction="down"
                 onClick={() => this.setState({ breadcrumb: this.pauseRolloutsBreadcrumb })}
                 drilldownMenu={
-                  <DrilldownMenu id="drilldownMenuPause">
+                  <DrilldownMenu id="breadcrumbs-drilldownMenuPause">
                     <MenuItem
                       itemId="group:app_grouping"
                       description="Groups A-C"
                       direction="down"
                       onClick={() => this.setState({ breadcrumb: this.pauseRolloutsAppGrpBreadcrumb })}
                       drilldownMenu={
-                        <DrilldownMenu id="drilldownMenuGrouping">
+                        <DrilldownMenu id="breadcrumbs-drilldownMenuGrouping">
                           <MenuItem itemId="group_a">Group A</MenuItem>
                           <MenuItem itemId="group_b">Group B</MenuItem>
                           <MenuItem itemId="group_c">Group C</MenuItem>
@@ -1016,7 +1016,7 @@ class MenuWithDrilldownBreadcrumbs extends React.Component {
                       direction="down"
                       onClick={() => this.setState({ breadcrumb: this.pauseRolloutsLabelsBreadcrumb })}
                       drilldownMenu={
-                        <DrilldownMenu id="drilldownMenuLabels">
+                        <DrilldownMenu id="breadcrumbs-drilldownMenuLabels">
                           <MenuItem itemId="label_1">Label 1</MenuItem>
                           <MenuItem itemId="label_2">Label 2</MenuItem>
                           <MenuItem itemId="label_3">Label 3</MenuItem>
@@ -1037,7 +1037,7 @@ class MenuWithDrilldownBreadcrumbs extends React.Component {
                 direction="down"
                 onClick={() => this.setState({ breadcrumb: this.addStorageBreadcrumb })}
                 drilldownMenu={
-                  <DrilldownMenu id="drilldownMenuStorage">
+                  <DrilldownMenu id="breadcrumbs-drilldownMenuStorage">
                     <MenuItem icon={<CodeBranchIcon aria-hidden />} itemId="git">
                       From git
                     </MenuItem>

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

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