@patternfly/react-core 4.224.7 → 4.224.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.224.7",
+  "version": "4.224.10",
   "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,16 +34,16 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.75.7",
-    "@patternfly/react-styles": "^4.74.7",
-    "@patternfly/react-tokens": "^4.76.7",
+    "@patternfly/react-icons": "^4.75.10",
+    "@patternfly/react-styles": "^4.74.10",
+    "@patternfly/react-tokens": "^4.76.10",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.202.2",
+    "@patternfly/patternfly": "4.203.1",
     "@rollup/plugin-commonjs": "^21.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@rollup/plugin-replace": "^3.0.0",
@@ -54,11 +54,11 @@
     "rollup": "^2.58.0",
     "rollup-plugin-scss": "^3.0.0",
     "rollup-plugin-terser": "^7.0.0",
-    "typescript": "^4.0.0"
+    "typescript": "^4.7.4"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "9f97802fe585df7a1034150942cae28356934b9d"
+  "gitHead": "5242f54a3eeae9d5ca2958620454a8d67b7926e8"
 }

package/src/components/Accordion/examples/AccordionBordered.tsx

@@ -11,7 +11,7 @@ import {
 import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';
 
 export const AccordionBordered: React.FunctionComponent = () => {
-  const [expanded, setExpanded] = React.useState('ex-toggle4');
+  const [expanded, setExpanded] = React.useState('bordered-toggle4');
   const [isDisplayLarge, setIsDisplayLarge] = React.useState(false);
 
   const displaySize = isDisplayLarge ? 'large' : 'default';
@@ -29,14 +29,14 @@ export const AccordionBordered: React.FunctionComponent = () => {
         <AccordionItem>
           <AccordionToggle
             onClick={() => {
-              onToggle('ex-toggle1');
+              onToggle('bordered-toggle1');
             }}
-            isExpanded={expanded === 'ex-toggle1'}
-            id="ex-toggle1"
+            isExpanded={expanded === 'bordered-toggle1'}
+            id="bordered-toggle1"
           >
             Item one
           </AccordionToggle>
-          <AccordionContent id="ex-expand1" isHidden={expanded !== 'ex-toggle1'}>
+          <AccordionContent id="bordered-expand1" isHidden={expanded !== 'bordered-toggle1'}>
             <p>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
               dolore magna aliqua.
@@ -47,14 +47,14 @@ export const AccordionBordered: React.FunctionComponent = () => {
         <AccordionItem>
           <AccordionToggle
             onClick={() => {
-              onToggle('ex-toggle2');
+              onToggle('bordered-toggle2');
             }}
-            isExpanded={expanded === 'ex-toggle2'}
-            id="ex-toggle2"
+            isExpanded={expanded === 'bordered-toggle2'}
+            id="bordered-toggle2"
           >
             Item two
           </AccordionToggle>
-          <AccordionContent id="ex-expand2" isHidden={expanded !== 'ex-toggle2'}>
+          <AccordionContent id="bordered-expand2" isHidden={expanded !== 'bordered-toggle2'}>
             <p>
               Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam
               ultrices, faucibus erat id, maximus nunc.
@@ -65,14 +65,14 @@ export const AccordionBordered: React.FunctionComponent = () => {
         <AccordionItem>
           <AccordionToggle
             onClick={() => {
-              onToggle('ex-toggle3');
+              onToggle('bordered-toggle3');
             }}
-            isExpanded={expanded === 'ex-toggle3'}
-            id="ex-toggle3"
+            isExpanded={expanded === 'bordered-toggle3'}
+            id="bordered-toggle3"
           >
             Item three
           </AccordionToggle>
-          <AccordionContent id="ex-expand3" isHidden={expanded !== 'ex-toggle3'}>
+          <AccordionContent id="bordered-expand3" isHidden={expanded !== 'bordered-toggle3'}>
             <p>Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.</p>
           </AccordionContent>
         </AccordionItem>
@@ -80,14 +80,14 @@ export const AccordionBordered: React.FunctionComponent = () => {
         <AccordionItem>
           <AccordionToggle
             onClick={() => {
-              onToggle('ex-toggle4');
+              onToggle('bordered-toggle4');
             }}
-            isExpanded={expanded === 'ex-toggle4'}
-            id="ex-toggle4"
+            isExpanded={expanded === 'bordered-toggle4'}
+            id="bordered-toggle4"
           >
             Item four
           </AccordionToggle>
-          <AccordionContent id="ex-expand4" isHidden={expanded !== 'ex-toggle4'} isCustomContent>
+          <AccordionContent id="bordered-expand4" isHidden={expanded !== 'bordered-toggle4'} isCustomContent>
             <AccordionExpandedContentBody>
               Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,
               sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
@@ -107,14 +107,14 @@ export const AccordionBordered: React.FunctionComponent = () => {
         <AccordionItem>
           <AccordionToggle
             onClick={() => {
-              onToggle('ex-toggle5');
+              onToggle('bordered-toggle5');
             }}
-            isExpanded={expanded === 'ex-toggle5'}
-            id="ex-toggle5"
+            isExpanded={expanded === 'bordered-toggle5'}
+            id="bordered-toggle5"
           >
             Item five
           </AccordionToggle>
-          <AccordionContent id="ex-expand5" isHidden={expanded !== 'ex-toggle5'}>
+          <AccordionContent id="bordered-expand5" isHidden={expanded !== 'bordered-toggle5'}>
             <p>Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis blandit.</p>
           </AccordionContent>
         </AccordionItem>

package/src/components/Accordion/examples/AccordionDefinitionList.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Accordion, AccordionItem, AccordionContent, AccordionToggle } from '@patternfly/react-core';
 
 export const AccordionDefinitionList: React.FunctionComponent = () => {
-  const [expanded, setExpanded] = React.useState('ex-toggle2');
+  const [expanded, setExpanded] = React.useState('def-list-toggle2');
 
   const onToggle = (id: string) => {
     if (id === expanded) {
@@ -17,14 +17,14 @@ export const AccordionDefinitionList: React.FunctionComponent = () => {
       <AccordionItem>
         <AccordionToggle
           onClick={() => {
-            onToggle('ex-toggle1');
+            onToggle('def-list-toggle1');
           }}
-          isExpanded={expanded === 'ex-toggle1'}
-          id="ex-toggle1"
+          isExpanded={expanded === 'def-list-toggle1'}
+          id="def-list-toggle1"
         >
           Item one
         </AccordionToggle>
-        <AccordionContent id="ex-expand1" isHidden={expanded !== 'ex-toggle1'}>
+        <AccordionContent id="def-list-expand1" isHidden={expanded !== 'def-list-toggle1'}>
           <p>
             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
             dolore magna aliqua.
@@ -35,14 +35,14 @@ export const AccordionDefinitionList: React.FunctionComponent = () => {
       <AccordionItem>
         <AccordionToggle
           onClick={() => {
-            onToggle('ex-toggle2');
+            onToggle('def-list-toggle2');
           }}
-          isExpanded={expanded === 'ex-toggle2'}
-          id="ex-toggle2"
+          isExpanded={expanded === 'def-list-toggle2'}
+          id="def-list-toggle2"
         >
           Item two
         </AccordionToggle>
-        <AccordionContent id="ex-expand2" isHidden={expanded !== 'ex-toggle2'}>
+        <AccordionContent id="def-list-expand2" isHidden={expanded !== 'def-list-toggle2'}>
           <p>
             Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam
             ultrices, faucibus erat id, maximus nunc.
@@ -53,14 +53,14 @@ export const AccordionDefinitionList: React.FunctionComponent = () => {
       <AccordionItem>
         <AccordionToggle
           onClick={() => {
-            onToggle('ex-toggle3');
+            onToggle('def-list-toggle3');
           }}
-          isExpanded={expanded === 'ex-toggle3'}
-          id="ex-toggle3"
+          isExpanded={expanded === 'def-list-toggle3'}
+          id="def-list-toggle3"
         >
           Item three
         </AccordionToggle>
-        <AccordionContent id="ex-expand3" isHidden={expanded !== 'ex-toggle3'}>
+        <AccordionContent id="def-list-expand3" isHidden={expanded !== 'def-list-toggle3'}>
           <p>Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.</p>
         </AccordionContent>
       </AccordionItem>
@@ -68,14 +68,14 @@ export const AccordionDefinitionList: React.FunctionComponent = () => {
       <AccordionItem>
         <AccordionToggle
           onClick={() => {
-            onToggle('ex-toggle4');
+            onToggle('def-list-toggle4');
           }}
-          isExpanded={expanded === 'ex-toggle4'}
-          id="ex-toggle4"
+          isExpanded={expanded === 'def-list-toggle4'}
+          id="def-list-toggle4"
         >
           Item four
         </AccordionToggle>
-        <AccordionContent id="ex-expand4" isHidden={expanded !== 'ex-toggle4'}>
+        <AccordionContent id="def-list-expand4" isHidden={expanded !== 'def-list-toggle4'}>
           <p>
             Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,
             sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
@@ -91,14 +91,14 @@ export const AccordionDefinitionList: React.FunctionComponent = () => {
       <AccordionItem>
         <AccordionToggle
           onClick={() => {
-            onToggle('ex-toggle5');
+            onToggle('def-list-toggle5');
           }}
-          isExpanded={expanded === 'ex-toggle5'}
-          id="ex-toggle5"
+          isExpanded={expanded === 'def-list-toggle5'}
+          id="def-list-toggle5"
         >
           Item five
         </AccordionToggle>
-        <AccordionContent id="ex-expand5" isHidden={expanded !== 'ex-toggle5'}>
+        <AccordionContent id="def-list-expand5" isHidden={expanded !== 'def-list-toggle5'}>
           <p>Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis blandit.</p>
         </AccordionContent>
       </AccordionItem>

package/src/components/ActionList/examples/ActionListMultipleGroups.tsx

@@ -5,24 +5,24 @@ export const ActionListMultipleGroups: React.FunctionComponent = () => (
   <ActionList>
     <ActionListGroup>
       <ActionListItem>
-        <Button variant="primary" id="next-button">
+        <Button variant="primary" id="multi-group-next-button">
           Next
         </Button>
       </ActionListItem>
       <ActionListItem>
-        <Button variant="secondary" id="back-button">
+        <Button variant="secondary" id="multi-group-back-button">
           Back
         </Button>
       </ActionListItem>
     </ActionListGroup>
     <ActionListGroup>
       <ActionListItem>
-        <Button variant="primary" id="submit-button">
+        <Button variant="primary" id="multi-group-submit-button">
           Submit
         </Button>
       </ActionListItem>
       <ActionListItem>
-        <Button variant="link" id="cancel-button">
+        <Button variant="link" id="multi-group-cancel-button">
           Cancel
         </Button>
       </ActionListItem>

package/src/components/ActionList/examples/ActionListSingleGroup.tsx

@@ -47,12 +47,12 @@ export const ActionListSingleGroup: React.FunctionComponent = () => {
     <React.Fragment>
       <ActionList>
         <ActionListItem>
-          <Button variant="primary" id="next-button">
+          <Button variant="primary" id="single-group-next-button">
             Next
           </Button>
         </ActionListItem>
         <ActionListItem>
-          <Button variant="secondary" id="back-button">
+          <Button variant="secondary" id="single-group-back-button">
             Back
           </Button>
         </ActionListItem>
@@ -61,12 +61,12 @@ export const ActionListSingleGroup: React.FunctionComponent = () => {
       With kebab
       <ActionList>
         <ActionListItem>
-          <Button variant="primary" id="next-button2">
+          <Button variant="primary" id="single-group-next-button2">
             Next
           </Button>
         </ActionListItem>
         <ActionListItem>
-          <Button variant="secondary" id="back-button2">
+          <Button variant="secondary" id="single-group-back-button2">
             Back
           </Button>
         </ActionListItem>

package/src/components/ActionList/examples/ActionListWithCancelButton.tsx

@@ -6,12 +6,12 @@ export const ActionListWithCancelButton: React.FunctionComponent = () => (
     In modals, forms, data lists
     <ActionList>
       <ActionListItem>
-        <Button variant="primary" id="save-button">
+        <Button variant="primary" id="with-cancel-save-button">
           Save
         </Button>
       </ActionListItem>
       <ActionListItem>
-        <Button variant="link" id="cancel-button">
+        <Button variant="link" id="with-cancel-cancel-button">
           Cancel
         </Button>
       </ActionListItem>
@@ -21,19 +21,19 @@ export const ActionListWithCancelButton: React.FunctionComponent = () => (
     <ActionList>
       <ActionListGroup>
         <ActionListItem>
-          <Button variant="primary" id="next-button">
+          <Button variant="primary" id="with-cancel-next-button">
             Next
           </Button>
         </ActionListItem>
         <ActionListItem>
-          <Button variant="secondary" id="back-button">
+          <Button variant="secondary" id="with-cancel-back-button">
             Back
           </Button>
         </ActionListItem>
       </ActionListGroup>
       <ActionListGroup>
         <ActionListItem>
-          <Button variant="link" id="cancel-button2">
+          <Button variant="link" id="with-cancel-cancel-button2">
             Cancel
           </Button>
         </ActionListItem>

package/src/components/ActionList/examples/ActionListWithIcons.tsx

@@ -6,12 +6,12 @@ import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
 export const ActionListWithIcons: React.FunctionComponent = () => (
   <ActionList isIconList>
     <ActionListItem>
-      <Button variant="plain" id="times-button" aria-label="times icon button">
+      <Button variant="plain" id="with-icons-times-button" aria-label="times icon button">
         <TimesIcon />
       </Button>
     </ActionListItem>
     <ActionListItem>
-      <Button variant="plain" id="check-button" aria-label="check icon button">
+      <Button variant="plain" id="with-icons-check-button" aria-label="check icon button">
         <CheckIcon />
       </Button>
     </ActionListItem>

package/src/components/Card/examples/CardSelectableA11yHighlight.tsx

@@ -28,13 +28,13 @@ export const CardSelectableA11yHighlight: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       <Card
-        id="selectable-first-card"
+        id="a11y-selectable-first-card"
         onKeyDown={onKeyDown}
         onClick={onClick}
         hasSelectableInput
         onSelectableInputChange={onChange}
         isSelectableRaised
-        isSelected={selected === 'selectable-first-card'}
+        isSelected={selected === 'a11y-selectable-first-card'}
       >
         <CardTitle>Selectable card with proper accessibility considerations</CardTitle>
         <CardBody>
@@ -44,11 +44,11 @@ export const CardSelectableA11yHighlight: React.FunctionComponent = () => {
       </Card>
       <br />
       <Card
-        id="selectable-second-card"
+        id="a11y-selectable-second-card"
         onKeyDown={onKeyDown}
         onClick={onClick}
         isSelectableRaised
-        isSelected={selected === 'selectable-second-card'}
+        isSelected={selected === 'a11y-selectable-second-card'}
       >
         <CardTitle>Selectable card without proper accessibility considerations</CardTitle>
         <CardBody>

package/src/components/CodeBlock/examples/CodeBlockBasic.tsx

@@ -32,7 +32,7 @@ url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs`;
     <React.Fragment>
       <CodeBlockAction>
         <ClipboardCopyButton
-          id="copy-button"
+          id="basic-copy-button"
           textId="code-content"
           aria-label="Copy to clipboard"
           onClick={e => onClick(e, code)}

package/src/components/CodeBlock/examples/CodeBlockExpandable.tsx

@@ -53,7 +53,7 @@ url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs`;
     <React.Fragment>
       <CodeBlockAction>
         <ClipboardCopyButton
-          id="copy-button"
+          id="expandable-copy-button"
           textId="code-content"
           aria-label="Copy to clipboard"
           onClick={e => onClick(e, copyBlock)}

package/src/components/ContextSelector/ContextSelector.tsx

@@ -9,15 +9,11 @@ import { Button, ButtonVariant } from '../Button';
 import { TextInput } from '../TextInput';
 import { InputGroup } from '../InputGroup';
 import { KEY_CODES } from '../../helpers/constants';
-import { FocusTrap } from '../../helpers';
+import { FocusTrap, getUniqueId } from '../../helpers';
 import { ToggleMenuBaseProps } from '../../helpers/Popper/Popper';
 import { Popper } from '../../helpers/Popper/Popper';
 import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers';
 
-// seed for the aria-labelledby ID
-let currentId = 0;
-const newId = currentId++;
-
 export interface ContextSelectorProps extends Omit<ToggleMenuBaseProps, 'menuAppendTo'>, OUIAProps {
   /** content rendered inside the Context Selector */
   children?: React.ReactNode;
@@ -66,6 +62,8 @@ export interface ContextSelectorProps extends Omit<ToggleMenuBaseProps, 'menuApp
    * appended inline, e.g. `menuAppendTo="parent"`
    */
   isFlipEnabled?: boolean;
+  /** Id of the context selector */
+  id?: string;
 }
 
 export class ContextSelector extends React.Component<ContextSelectorProps, { ouiaStateId: string }> {
@@ -108,9 +106,6 @@ export class ContextSelector extends React.Component<ContextSelectorProps, { oui
   };
 
   render() {
-    const toggleId = `pf-context-selector-toggle-id-${newId}`;
-    const screenReaderLabelId = `pf-context-selector-label-id-${newId}`;
-    const searchButtonId = `pf-context-selector-search-button-id-${newId}`;
     const {
       children,
       className,
@@ -133,14 +128,21 @@ export class ContextSelector extends React.Component<ContextSelectorProps, { oui
       footer,
       disableFocusTrap,
       isFlipEnabled,
+      id,
       ...props
     } = this.props;
+
+    const uniqueId = id || getUniqueId();
+    const toggleId = `pf-context-selector-toggle-id-${uniqueId}`;
+    const screenReaderLabelId = `pf-context-selector-label-id-${uniqueId}`;
+
     const menuContainer = (
       <div
         className={css(styles.contextSelectorMenu)}
         // This removes the `position: absolute`styling from the `.pf-c-context-selector__menu`
         // allowing the menu to flip correctly
         {...(isFlipEnabled && { style: { position: 'revert' } })}
+        id={uniqueId}
       >
         {isOpen && (
           <FocusTrap
@@ -155,12 +157,11 @@ export class ContextSelector extends React.Component<ContextSelectorProps, { oui
                   placeholder={searchInputPlaceholder}
                   onChange={onSearchInputChange}
                   onKeyPress={this.onEnterPressed}
-                  aria-labelledby={searchButtonId}
+                  aria-label={searchButtonAriaLabel}
                 />
                 <Button
                   variant={ButtonVariant.control}
                   aria-label={searchButtonAriaLabel}
-                  id={searchButtonId}
                   onClick={onSearchButtonClick}
                 >
                   <SearchIcon aria-hidden="true" />

package/src/components/ContextSelector/ContextSelectorMenuList.tsx

@@ -29,7 +29,8 @@ export class ContextSelectorMenuList extends React.Component<ContextSelectorMenu
     return React.Children.map(this.props.children, (child, index) =>
       React.cloneElement(child as React.ReactElement<any>, {
         sendRef: this.sendRef,
-        index
+        index,
+        role: 'menuitem'
       })
     );
   }

package/src/components/ContextSelector/__tests__/ContextSelector.test.tsx

@@ -16,12 +16,12 @@ const items = [
 
 describe('ContextSelector', () => {
   test('Renders ContextSelector', () => {
-    const { asFragment } = render(<ContextSelector>{items}</ContextSelector>);
+    const { asFragment } = render(<ContextSelector id="render">{items}</ContextSelector>);
     expect(asFragment()).toMatchSnapshot();
   });
 
   test('Renders ContextSelector open', () => {
-    const { asFragment } = render(<ContextSelector isOpen>{items}</ContextSelector>);
+    const { asFragment } = render(<ContextSelector isOpen id="render-open">{items}</ContextSelector>);
     expect(asFragment()).toMatchSnapshot();
   });
 

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

@@ -10,9 +10,9 @@ exports[`ContextSelector Renders ContextSelector 1`] = `
   >
     <button
       aria-expanded="false"
-      aria-labelledby="pf-context-selector-label-id-0 pf-context-selector-toggle-id-0"
+      aria-labelledby="pf-context-selector-label-id-render pf-context-selector-toggle-id-render"
       class="pf-c-context-selector__toggle"
-      id="pf-context-selector-toggle-id-0"
+      id="pf-context-selector-toggle-id-render"
       type="button"
     >
       <span
@@ -50,9 +50,9 @@ exports[`ContextSelector Renders ContextSelector open 1`] = `
   >
     <button
       aria-expanded="true"
-      aria-labelledby="pf-context-selector-label-id-0 pf-context-selector-toggle-id-0"
+      aria-labelledby="pf-context-selector-label-id-render-open pf-context-selector-toggle-id-render-open"
       class="pf-c-context-selector__toggle"
-      id="pf-context-selector-toggle-id-0"
+      id="pf-context-selector-toggle-id-render-open"
       type="button"
     >
       <span
@@ -78,6 +78,7 @@ exports[`ContextSelector Renders ContextSelector open 1`] = `
     </button>
     <div
       class="pf-c-context-selector__menu"
+      id="render-open"
     >
       <div>
         <div
@@ -87,9 +88,8 @@ exports[`ContextSelector Renders ContextSelector open 1`] = `
             class="pf-c-input-group"
           >
             <input
-              aria-describedby="pf-context-selector-search-button-id-0"
               aria-invalid="false"
-              aria-labelledby="pf-context-selector-search-button-id-0"
+              aria-label="Search menu items"
               class="pf-c-form-control"
               data-ouia-component-id="OUIA-Generated-TextInputBase-1"
               data-ouia-component-type="PF4/TextInput"
@@ -105,7 +105,6 @@ exports[`ContextSelector Renders ContextSelector open 1`] = `
               data-ouia-component-id="OUIA-Generated-Button-control-1"
               data-ouia-component-type="PF4/Button"
               data-ouia-safe="true"
-              id="pf-context-selector-search-button-id-0"
               type="button"
             >
               <svg
@@ -133,6 +132,7 @@ exports[`ContextSelector Renders ContextSelector open 1`] = `
           >
             <button
               class="pf-c-context-selector__menu-list-item"
+              role="menuitem"
             >
               My Project
             </button>
@@ -142,6 +142,7 @@ exports[`ContextSelector Renders ContextSelector open 1`] = `
           >
             <button
               class="pf-c-context-selector__menu-list-item"
+              role="menuitem"
             >
               OpenShift Cluster
             </button>
@@ -151,6 +152,7 @@ exports[`ContextSelector Renders ContextSelector open 1`] = `
           >
             <button
               class="pf-c-context-selector__menu-list-item"
+              role="menuitem"
             >
               Production Ansible
             </button>
@@ -160,6 +162,7 @@ exports[`ContextSelector Renders ContextSelector open 1`] = `
           >
             <button
               class="pf-c-context-selector__menu-list-item"
+              role="menuitem"
             >
               AWS
             </button>
@@ -169,6 +172,7 @@ exports[`ContextSelector Renders ContextSelector open 1`] = `
           >
             <button
               class="pf-c-context-selector__menu-list-item"
+              role="menuitem"
             >
               Azure
             </button>