@patternfly/react-core 6.1.0 → 6.1.1-prerelease.0

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.1.0-prerelease.16","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.1.0","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.1.0-prerelease.16","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.1.0","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.1.0-prerelease.16","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.1.0","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.1.0",
+  "version": "6.1.1-prerelease.0",
   "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",
@@ -63,5 +63,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "fc70165f6d07de6a24f6943c826c1432ea6d44cf"
+  "gitHead": "e161ac6d6f712b7c5692e981e79da71fdd85f011"
 }

package/src/components/Alert/AlertToggleExpandButton.tsx

@@ -33,7 +33,7 @@ export const AlertToggleExpandButton: React.FunctionComponent<AlertToggleExpandB
       {...props}
       icon={
         <span className={css(styles.alertToggleIcon)}>
-          <AngleRightIcon aria-hidden="true" />
+          <AngleRightIcon />
         </span>
       }
     />

package/src/components/BackToTop/BackToTop.tsx

@@ -84,7 +84,7 @@ const BackToTopBase: React.FunctionComponent<BackToTopProps> = ({
       onClick={handleClick}
       {...props}
     >
-      <Button variant="primary" icon={<AngleUpIcon aria-hidden="true" />} iconPosition="end">
+      <Button variant="primary" icon={<AngleUpIcon />} iconPosition="end">
         {title}
       </Button>
     </div>

package/src/components/CalendarMonth/CalendarMonth.tsx

@@ -292,7 +292,7 @@ export const CalendarMonth = ({
             variant="plain"
             aria-label={prevMonthAriaLabel}
             onClick={(ev: React.MouseEvent) => onMonthClick(ev, prevMonth)}
-            icon={<AngleLeftIcon aria-hidden={true} />}
+            icon={<AngleLeftIcon />}
           />
         </div>
         <InputGroup>
@@ -355,7 +355,7 @@ export const CalendarMonth = ({
             variant="plain"
             aria-label={nextMonthAriaLabel}
             onClick={(ev: React.MouseEvent) => onMonthClick(ev, nextMonth)}
-            icon={<AngleRightIcon aria-hidden={true} />}
+            icon={<AngleRightIcon />}
           />
         </div>
       </div>

package/src/components/Card/CardHeader.tsx

@@ -104,7 +104,7 @@ export const CardHeader: React.FunctionComponent<CardHeaderProps> = ({
               {...toggleButtonProps}
               icon={
                 <span className={css(styles.cardHeaderToggleIcon)}>
-                  <AngleRightIcon aria-hidden="true" />
+                  <AngleRightIcon />
                 </span>
               }
             />

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

@@ -71,7 +71,7 @@ export const CardExpandable: React.FunctionComponent = () => {
             onClick={() => setIsOpen(!isOpen)}
             variant="plain"
             aria-label="Card expandable example kebab toggle"
-            icon={<EllipsisVIcon aria-hidden="true" />}
+            icon={<EllipsisVIcon />}
           />
         )}
         isOpen={isOpen}

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

@@ -67,7 +67,7 @@ export const CardExpandableWithIcon: React.FunctionComponent = () => {
             onClick={() => setIsOpen(!isOpen)}
             variant="plain"
             aria-label="Card expandable with icon example kebab toggle"
-            icon={<EllipsisVIcon aria-hidden="true" />}
+            icon={<EllipsisVIcon />}
           />
         )}
         isOpen={isOpen}

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

@@ -58,7 +58,7 @@ export const CardTitleInHeader: React.FunctionComponent = () => {
             onClick={() => setIsOpen(!isOpen)}
             variant="plain"
             aria-label="Card title inline with images and actions example kebab toggle"
-            icon={<EllipsisVIcon aria-hidden="true" />}
+            icon={<EllipsisVIcon />}
           />
         )}
         isOpen={isOpen}

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

@@ -56,7 +56,7 @@ export const CardOnlyActionsInCardHead: React.FunctionComponent = () => {
             onClick={() => setIsOpen(!isOpen)}
             variant="plain"
             aria-label="Card header without title example kebab toggle"
-            icon={<EllipsisVIcon aria-hidden="true" />}
+            icon={<EllipsisVIcon />}
           />
         )}
         isOpen={isOpen}

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

@@ -64,7 +64,7 @@ export const CardWithImageAndActions: React.FunctionComponent = () => {
             onClick={() => setIsOpen(!isOpen)}
             variant="plain"
             aria-label="Card header images and actions example kebab toggle"
-            icon={<EllipsisVIcon aria-hidden="true" />}
+            icon={<EllipsisVIcon />}
           />
         )}
         isOpen={isOpen}

package/src/components/ClipboardCopy/ClipboardCopyToggle.tsx

@@ -33,7 +33,7 @@ export const ClipboardCopyToggle: React.FunctionComponent<ClipboardCopyTogglePro
     {...props}
     icon={
       <div className={css(styles.clipboardCopyToggleIcon)}>
-        <AngleRightIcon aria-hidden="true" />
+        <AngleRightIcon />
       </div>
     }
   />

package/src/components/ClipboardCopy/examples/ClipboardCopyInlineCompactWithAdditionalAction.tsx

@@ -9,7 +9,7 @@ export const ClipboardCopyInlineCompactWithAdditionalAction: React.FunctionCompo
     variant="inline-compact"
     additionalActions={
       <ClipboardCopyAction>
-        <Button variant="plain" hasNoPadding aria-label="Run in web terminal" icon={<PlayIcon aria-hidden />} />
+        <Button variant="plain" hasNoPadding aria-label="Run in web terminal" icon={<PlayIcon />} />
       </ClipboardCopyAction>
     }
   >

package/src/components/DataList/examples/DataListActions.tsx

@@ -86,7 +86,7 @@ export const DataListActions: React.FunctionComponent = () => {
                     onClick={onToggle}
                     variant="plain"
                     aria-label="Data list with actions example kebab toggle"
-                    icon={<EllipsisVIcon aria-hidden="true" />}
+                    icon={<EllipsisVIcon />}
                   />
                 )}
                 isOpen={isOpen}

package/src/components/DataList/examples/DataListCheckboxes.tsx

@@ -84,7 +84,7 @@ export const DataListCheckboxes: React.FunctionComponent = () => {
                   onClick={onToggle1}
                   variant="plain"
                   aria-label="Data list with checkboxes, actions and additional cells example kebab toggle 1"
-                  icon={<EllipsisVIcon aria-hidden="true" />}
+                  icon={<EllipsisVIcon />}
                 />
               )}
               isOpen={isOpen1}
@@ -138,7 +138,7 @@ export const DataListCheckboxes: React.FunctionComponent = () => {
                   onClick={onToggle2}
                   variant="plain"
                   aria-label="Data list with checkboxes, actions and additional cells example kebab toggle 2"
-                  icon={<EllipsisVIcon aria-hidden="true" />}
+                  icon={<EllipsisVIcon />}
                 />
               )}
               isOpen={isOpen2}
@@ -201,7 +201,7 @@ export const DataListCheckboxes: React.FunctionComponent = () => {
                   onClick={onToggle3}
                   variant="plain"
                   aria-label="Data list with checkboxes, actions and additional cells example kebab toggle 3"
-                  icon={<EllipsisVIcon aria-hidden="true" />}
+                  icon={<EllipsisVIcon />}
                 />
               )}
               isOpen={isOpen3}

package/src/components/DataList/examples/DataListClickableRows.tsx

@@ -76,7 +76,7 @@ export const DataListClickableRows: React.FunctionComponent = () => {
                     onClick={onToggle1}
                     variant="plain"
                     aria-label="Data list clickable rows example kebab toggle 1"
-                    icon={<EllipsisVIcon aria-hidden="true" />}
+                    icon={<EllipsisVIcon />}
                   />
                 )}
                 isOpen={isOpen1}
@@ -125,7 +125,7 @@ export const DataListClickableRows: React.FunctionComponent = () => {
                     onClick={onToggle2}
                     variant="plain"
                     aria-label="Data list clickable rows example kebab toggle 2"
-                    icon={<EllipsisVIcon aria-hidden="true" />}
+                    icon={<EllipsisVIcon />}
                   />
                 )}
                 isOpen={isOpen2}

package/src/components/DataList/examples/DataListExpandable.tsx

@@ -92,7 +92,7 @@ export const DataListExpandable: React.FunctionComponent = () => {
                     onClick={onToggle1}
                     variant="plain"
                     aria-label="Data list exapndable example kebaby toggle 1"
-                    icon={<EllipsisVIcon aria-hidden="true" />}
+                    icon={<EllipsisVIcon />}
                   />
                 )}
                 isOpen={isOpen1}
@@ -162,7 +162,7 @@ export const DataListExpandable: React.FunctionComponent = () => {
                     onClick={onToggle2}
                     variant="plain"
                     aria-label="Data list exapndable example kebaby toggle 2"
-                    icon={<EllipsisVIcon aria-hidden="true" />}
+                    icon={<EllipsisVIcon />}
                   />
                 )}
                 isOpen={isOpen2}
@@ -232,7 +232,7 @@ export const DataListExpandable: React.FunctionComponent = () => {
                     onClick={onToggle3}
                     variant="plain"
                     aria-label="Data list exapndable example kebaby toggle 3"
-                    icon={<EllipsisVIcon aria-hidden="true" />}
+                    icon={<EllipsisVIcon />}
                   />
                 )}
                 isOpen={isOpen3}

package/src/components/DataList/examples/DataListMixedExpandable.tsx

@@ -94,7 +94,7 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
                     onClick={onToggle1}
                     variant="plain"
                     aria-label="Data list mixed expandable example kebab toggle 1"
-                    icon={<EllipsisVIcon aria-hidden="true" />}
+                    icon={<EllipsisVIcon />}
                   />
                 )}
                 isOpen={isOpen1}
@@ -166,7 +166,7 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
                     onClick={onToggle2}
                     variant="plain"
                     aria-label="Data list mixed expandable example kebab toggle 2"
-                    icon={<EllipsisVIcon aria-hidden="true" />}
+                    icon={<EllipsisVIcon />}
                   />
                 )}
                 isOpen={isOpen2}
@@ -226,7 +226,7 @@ export const DataListMixedExpandable: React.FunctionComponent = () => {
                     onClick={onToggle3}
                     variant="plain"
                     aria-label="Data list mixed expandable example kebab toggle 3"
-                    icon={<EllipsisVIcon aria-hidden="true" />}
+                    icon={<EllipsisVIcon />}
                   />
                 )}
                 isOpen={isOpen3}

package/src/components/DataList/examples/DataListWidthModifiers.tsx

@@ -103,7 +103,7 @@ export const DataListWidthModifiers: React.FunctionComponent = () => {
                       onClick={onToggle1}
                       variant="plain"
                       aria-label="Data list width modifiers example kebab toggle 1"
-                      icon={<EllipsisVIcon aria-hidden="true" />}
+                      icon={<EllipsisVIcon />}
                     />
                   )}
                   isOpen={isOpen1}
@@ -176,7 +176,7 @@ export const DataListWidthModifiers: React.FunctionComponent = () => {
                       onClick={onToggle2}
                       variant="plain"
                       aria-label="Data list width modifiers example kebab toggle 2"
-                      icon={<EllipsisVIcon aria-hidden="true" />}
+                      icon={<EllipsisVIcon />}
                     />
                   )}
                   isOpen={isOpen2}

package/src/components/DualListSelector/DualListSelectorTreeItem.tsx

@@ -119,7 +119,7 @@ const DualListSelectorTreeItemBase: React.FunctionComponent<DualListSelectorTree
                 tabIndex={-1}
               >
                 <span className={css(styles.dualListSelectorItemToggleIcon)}>
-                  <AngleRightIcon aria-hidden />
+                  <AngleRightIcon />
                 </span>
               </div>
             )}

package/src/components/DualListSelector/examples/DualListSelectorComplexOptionsActions.tsx

@@ -166,7 +166,7 @@ export const DualListSelectorComplexOptionsActionsNext: React.FunctionComponent
                 variant="plain"
                 id="complex-available-toggle"
                 aria-label="Complex actions example available kebab toggle"
-                icon={<EllipsisVIcon aria-hidden="true" />}
+                icon={<EllipsisVIcon />}
               />
             )}
             isOpen={isAvailableKebabOpen}
@@ -201,7 +201,7 @@ export const DualListSelectorComplexOptionsActionsNext: React.FunctionComponent
                 variant="plain"
                 id="complex-chosen-toggle"
                 aria-label="Complex actions example chosen kebab toggle"
-                icon={<EllipsisVIcon aria-hidden="true" />}
+                icon={<EllipsisVIcon />}
               />
             )}
             isOpen={isChosenKebabOpen}

package/src/components/ExpandableSection/ExpandableSection.tsx

@@ -240,7 +240,7 @@ class ExpandableSection extends React.Component<ExpandableSectionProps, Expandab
           {...(variant !== ExpandableSectionVariant.truncate && {
             icon: (
               <span className={css(styles.expandableSectionToggleIcon)}>
-                <AngleRightIcon aria-hidden />
+                <AngleRightIcon />
               </span>
             )
           })}

package/src/components/ExpandableSection/ExpandableSectionToggle.tsx

@@ -67,7 +67,7 @@ export const ExpandableSectionToggle: React.FunctionComponent<ExpandableSectionT
                 isExpanded && direction === 'up' && styles.modifiers.expandTop
               )}
             >
-              <AngleRightIcon aria-hidden />
+              <AngleRightIcon />
             </span>
           )
         })}

package/src/components/Form/FormFieldGroupToggle.tsx

@@ -39,7 +39,7 @@ export const FormFieldGroupToggle: React.FunctionComponent<FormFieldGroupToggleP
         id={toggleId}
         icon={
           <span className={css(styles.formFieldGroupToggleIcon)}>
-            <AngleRightIcon aria-hidden="true" />
+            <AngleRightIcon />
           </span>
         }
       />

package/src/components/HelperText/HelperTextItem.tsx

@@ -63,11 +63,7 @@ export const HelperTextItem: React.FunctionComponent<HelperTextItemProps> = ({
       id={id}
       {...props}
     >
-      {(defaultIcon || icon) && (
-        <span className={css(styles.helperTextItemIcon)} aria-hidden>
-          {icon || defaultIcon}
-        </span>
-      )}
+      {(defaultIcon || icon) && <span className={css(styles.helperTextItemIcon)}>{icon || defaultIcon}</span>}
 
       <span className={css(styles.helperTextItemText)}>
         {children}

package/src/components/Label/LabelGroup.tsx

@@ -210,7 +210,7 @@ class LabelGroup extends React.Component<LabelGroupProps, LabelGroupState> {
             onClick={onClick}
             id={`remove_group_${id}`}
             aria-labelledby={`remove_group_${id} ${id}`}
-            icon={<TimesCircleIcon aria-hidden="true" />}
+            icon={<TimesCircleIcon />}
           />
         </div>
       );

package/src/components/Menu/MenuItem.tsx

@@ -369,7 +369,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
             <span className={css(styles.menuItemMain)}>
               {direction === 'up' && (
                 <span className={css(styles.menuItemToggleIcon)}>
-                  <AngleLeftIcon aria-hidden />
+                  <AngleLeftIcon />
                 </span>
               )}
               {icon && <span className={css(styles.menuItemIcon)}>{icon}</span>}
@@ -388,17 +388,17 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
               <span className={css(styles.menuItemText)}>{children}</span>
               {isExternalLink && (
                 <span className={css(styles.menuItemExternalIcon)}>
-                  <ExternalLinkAltIcon aria-hidden />
+                  <ExternalLinkAltIcon />
                 </span>
               )}
               {(flyoutMenu || direction === 'down') && (
                 <span className={css(styles.menuItemToggleIcon)}>
-                  <AngleRightIcon aria-hidden />
+                  <AngleRightIcon />
                 </span>
               )}
               {getIsSelected() && (
                 <span className={css(styles.menuItemSelectIcon)}>
-                  <CheckIcon aria-hidden />
+                  <CheckIcon />
                 </span>
               )}
             </span>

package/src/components/Menu/MenuItemAction.tsx

@@ -62,7 +62,7 @@ const MenuItemActionBase: React.FunctionComponent<MenuItemActionProps> = ({
                 variant="plain"
                 tabIndex={-1}
                 isDisabled={isDisabled || isDisabledContext}
-                icon={icon === 'favorites' || isFavorited !== null ? <StarIcon aria-hidden /> : icon}
+                icon={icon === 'favorites' || isFavorited !== null ? <StarIcon /> : icon}
               />
             </div>
           );

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

@@ -20,7 +20,7 @@ export const MenuOptionMultiSelect: React.FunctionComponent = () => {
         <MenuList isAriaMultiselectable aria-label="Menu multi select example">
           <MenuItem itemId={0}>Option 1</MenuItem>
           <MenuItem itemId={1}>Option 2</MenuItem>
-          <MenuItem icon={<TableIcon aria-hidden />} itemId={2}>
+          <MenuItem icon={<TableIcon />} itemId={2}>
             Option 3
           </MenuItem>
         </MenuList>

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

@@ -17,7 +17,7 @@ export const MenuOptionSingleSelect: React.FunctionComponent = () => {
         <MenuList aria-label="Menu single select example">
           <MenuItem itemId={0}>Option 1</MenuItem>
           <MenuItem itemId={1}>Option 2</MenuItem>
-          <MenuItem icon={<TableIcon aria-hidden />} itemId={2}>
+          <MenuItem icon={<TableIcon />} itemId={2}>
             Option 3
           </MenuItem>
         </MenuList>

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

@@ -31,7 +31,7 @@ export const MenuWithActions: React.FunctionComponent = () => {
               isSelected={selectedItems.indexOf(0) !== -1}
               actions={
                 <MenuItemAction
-                  icon={<CodeBranchIcon aria-hidden />}
+                  icon={<CodeBranchIcon />}
                   actionId="code"
                   // eslint-disable-next-line no-console
                   onClick={() => console.log('clicked on code icon')}
@@ -46,7 +46,7 @@ export const MenuWithActions: React.FunctionComponent = () => {
             <MenuItem
               isDisabled
               isSelected={selectedItems.indexOf(1) !== -1}
-              actions={<MenuItemAction icon={<BellIcon aria-hidden />} actionId="alert" aria-label="Alert" />}
+              actions={<MenuItemAction icon={<BellIcon />} actionId="alert" aria-label="Alert" />}
               description="This is a description"
               itemId={1}
             >
@@ -54,14 +54,14 @@ export const MenuWithActions: React.FunctionComponent = () => {
             </MenuItem>
             <MenuItem
               isSelected={selectedItems.indexOf(2) !== -1}
-              actions={<MenuItemAction icon={<ClipboardIcon aria-hidden />} actionId="copy" aria-label="Copy" />}
+              actions={<MenuItemAction icon={<ClipboardIcon />} actionId="copy" aria-label="Copy" />}
               itemId={2}
             >
               Item 3
             </MenuItem>
             <MenuItem
               isSelected={selectedItems.indexOf(3) !== -1}
-              actions={<MenuItemAction icon={<BarsIcon aria-hidden />} actionId="expand" aria-label="Expand" />}
+              actions={<MenuItemAction icon={<BarsIcon />} actionId="expand" aria-label="Expand" />}
               description="This is a description"
               itemId={3}
             >

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

@@ -15,14 +15,14 @@ export const MenuWithDescription: React.FunctionComponent = () => {
     <Menu onSelect={onSelect} activeItemId={activeItem}>
       <MenuContent>
         <MenuList>
-          <MenuItem icon={<CodeBranchIcon aria-hidden />} description="Description" itemId={0}>
+          <MenuItem icon={<CodeBranchIcon />} description="Description" itemId={0}>
             Action 1
           </MenuItem>
-          <MenuItem isDisabled icon={<CodeBranchIcon aria-hidden />} description="Description" itemId={1}>
+          <MenuItem isDisabled icon={<CodeBranchIcon />} description="Description" itemId={1}>
             Action 2 disabled
           </MenuItem>
           <MenuItem
-            icon={<CodeBranchIcon aria-hidden />}
+            icon={<CodeBranchIcon />}
             description="Nunc non ornare ex, et pretium dui. Duis nec augue at urna elementum blandit tincidunt eget metus. Aenean sed metus id urna dignissim interdum. Aenean vel nisl vitae arcu vehicula pulvinar eget nec turpis. Cras sit amet est est."
             itemId={2}
           >

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

@@ -153,21 +153,21 @@ export const MenuWithDrilldown: React.FunctionComponent = () => {
           </MenuItem>
           <MenuItem
             itemId="group:storage"
-            icon={<StorageDomainIcon aria-hidden />}
+            icon={<StorageDomainIcon />}
             direction="down"
             drilldownMenu={
               <DrilldownMenu id="drilldown-drilldownMenuStorage">
-                <MenuItem itemId="group:storage_breadcrumb" icon={<StorageDomainIcon aria-hidden />} direction="up">
+                <MenuItem itemId="group:storage_breadcrumb" icon={<StorageDomainIcon />} direction="up">
                   Add storage
                 </MenuItem>
                 <Divider component="li" />
-                <MenuItem icon={<CodeBranchIcon aria-hidden />} itemId="git">
+                <MenuItem icon={<CodeBranchIcon />} itemId="git">
                   From git
                 </MenuItem>
-                <MenuItem icon={<LayerGroupIcon aria-hidden />} itemId="container">
+                <MenuItem icon={<LayerGroupIcon />} itemId="container">
                   Container image
                 </MenuItem>
-                <MenuItem icon={<CubeIcon aria-hidden />} itemId="docker">
+                <MenuItem icon={<CubeIcon />} itemId="docker">
                   Docker file
                 </MenuItem>
               </DrilldownMenu>

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

@@ -435,18 +435,18 @@ export const MenuWithDrilldownBreadcrumbs: React.FunctionComponent = () => {
             </MenuItem>
             <MenuItem
               itemId="group:storage"
-              icon={<StorageDomainIcon aria-hidden />}
+              icon={<StorageDomainIcon />}
               direction="down"
               onClick={() => setBreadcrumb(addStorageBreadcrumb)}
               drilldownMenu={
                 <DrilldownMenu id="breadcrumbs-drilldownMenuStorage">
-                  <MenuItem icon={<CodeBranchIcon aria-hidden />} itemId="git">
+                  <MenuItem icon={<CodeBranchIcon />} itemId="git">
                     From git
                   </MenuItem>
-                  <MenuItem icon={<LayerGroupIcon aria-hidden />} itemId="container">
+                  <MenuItem icon={<LayerGroupIcon />} itemId="container">
                     Container image
                   </MenuItem>
-                  <MenuItem icon={<CubeIcon aria-hidden />} itemId="docker">
+                  <MenuItem icon={<CubeIcon />} itemId="docker">
                     Docker file
                   </MenuItem>
                 </DrilldownMenu>

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

@@ -156,21 +156,21 @@ export const MenuDrilldownInitialState: React.FunctionComponent = () => {
           </MenuItem>
           <MenuItem
             itemId="group:storage"
-            icon={<StorageDomainIcon aria-hidden />}
+            icon={<StorageDomainIcon />}
             direction="down"
             drilldownMenu={
               <DrilldownMenu id="initial-state-drilldownMenuStorage">
-                <MenuItem itemId="group:storage_breadcrumb" icon={<StorageDomainIcon aria-hidden />} direction="up">
+                <MenuItem itemId="group:storage_breadcrumb" icon={<StorageDomainIcon />} direction="up">
                   Add storage
                 </MenuItem>
                 <Divider component="li" />
-                <MenuItem icon={<CodeBranchIcon aria-hidden />} itemId="git">
+                <MenuItem icon={<CodeBranchIcon />} itemId="git">
                   From git
                 </MenuItem>
-                <MenuItem icon={<LayerGroupIcon aria-hidden />} itemId="container">
+                <MenuItem icon={<LayerGroupIcon />} itemId="container">
                   Container image
                 </MenuItem>
-                <MenuItem icon={<CubeIcon aria-hidden />} itemId="docker">
+                <MenuItem icon={<CubeIcon />} itemId="docker">
                   Docker file
                 </MenuItem>
               </DrilldownMenu>

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

@@ -153,21 +153,21 @@ export const MenuWithDrilldownSubmenuFunctions: React.FunctionComponent = () =>
           </MenuItem>
           <MenuItem
             itemId="group:storage"
-            icon={<StorageDomainIcon aria-hidden />}
+            icon={<StorageDomainIcon />}
             direction="down"
             drilldownMenu={() => (
               <DrilldownMenu id="functions-drilldownMenuStorage">
-                <MenuItem itemId="group:storage_breadcrumb" icon={<StorageDomainIcon aria-hidden />} direction="up">
+                <MenuItem itemId="group:storage_breadcrumb" icon={<StorageDomainIcon />} direction="up">
                   Add storage
                 </MenuItem>
                 <Divider component="li" />
-                <MenuItem icon={<CodeBranchIcon aria-hidden />} itemId="git">
+                <MenuItem icon={<CodeBranchIcon />} itemId="git">
                   From git
                 </MenuItem>
-                <MenuItem icon={<LayerGroupIcon aria-hidden />} itemId="container">
+                <MenuItem icon={<LayerGroupIcon />} itemId="container">
                   Container image
                 </MenuItem>
-                <MenuItem icon={<CubeIcon aria-hidden />} itemId="docker">
+                <MenuItem icon={<CubeIcon />} itemId="docker">
                   Docker file
                 </MenuItem>
               </DrilldownMenu>

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

@@ -32,21 +32,21 @@ export const MenuWithFavorites: React.FunctionComponent = () => {
       text: 'Item 1',
       description: 'Description 1',
       itemId: 'item-1',
-      action: <BarsIcon aria-hidden />,
+      action: <BarsIcon />,
       actionId: 'bars'
     },
     {
       text: 'Item 2',
       description: 'Description 2',
       itemId: 'item-2',
-      action: <ClipboardIcon aria-hidden />,
+      action: <ClipboardIcon />,
       actionId: 'clipboard'
     },
     {
       text: 'Item 3',
       description: 'Description 3',
       itemId: 'item-3',
-      action: <BellIcon aria-hidden />,
+      action: <BellIcon />,
       actionId: 'bell'
     }
   ];