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

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

@@ -17,13 +17,13 @@ export const MenuWithIcons: React.FunctionComponent = () => {
     <Menu onSelect={onSelect} activeItemId={activeItem}>
       <MenuContent>
         <MenuList>
-          <MenuItem icon={<CodeBranchIcon aria-hidden />} itemId={0}>
+          <MenuItem icon={<CodeBranchIcon />} itemId={0}>
             From git
           </MenuItem>
-          <MenuItem icon={<LayerGroupIcon aria-hidden />} itemId={1}>
+          <MenuItem icon={<LayerGroupIcon />} itemId={1}>
             Container image
           </MenuItem>
-          <MenuItem icon={<CubeIcon aria-hidden />} itemId={2}>
+          <MenuItem icon={<CubeIcon />} itemId={2}>
             Docker file
           </MenuItem>
         </MenuList>

package/src/components/MenuToggle/MenuToggle.tsx

@@ -122,13 +122,13 @@ class MenuToggleBase extends React.Component<MenuToggleProps, MenuToggleState> {
     if (!statusIcon) {
       switch (status) {
         case MenuToggleStatus.success:
-          _statusIcon = <CheckCircleIcon aria-hidden="true" />;
+          _statusIcon = <CheckCircleIcon />;
           break;
         case MenuToggleStatus.warning:
-          _statusIcon = <ExclamationTriangleIcon aria-hidden="true" />;
+          _statusIcon = <ExclamationTriangleIcon />;
           break;
         case MenuToggleStatus.danger:
-          _statusIcon = <ExclamationCircleIcon aria-hidden="true" />;
+          _statusIcon = <ExclamationCircleIcon />;
           break;
       }
     }
@@ -137,7 +137,7 @@ class MenuToggleBase extends React.Component<MenuToggleProps, MenuToggleState> {
       <span className={css(styles.menuToggleControls)}>
         {status !== undefined && <span className={css(styles.menuToggleStatusIcon)}>{_statusIcon}</span>}
         <span className={css(styles.menuToggleToggleIcon)}>
-          <CaretDownIcon aria-hidden />
+          <CaretDownIcon />
         </span>
       </span>
     );

package/src/components/MenuToggle/examples/MenuToggleTypeahead.tsx

@@ -31,7 +31,7 @@ export const MenuToggleTypeahead: React.FunctionComponent = () => {
               variant="plain"
               onClick={() => setInputValue('')}
               aria-label="Clear input value"
-              icon={<TimesIcon aria-hidden />}
+              icon={<TimesIcon />}
             />
           )}
         </TextInputGroupUtilities>

package/src/components/Nav/NavExpandable.tsx

@@ -135,7 +135,7 @@ class NavExpandable extends React.Component<NavExpandableProps, NavExpandableSta
                   {typeof title !== 'string' ? <span className={css(`${styles.nav}__link-text`)}>{title}</span> : title}
                   <span className={css(styles.navToggle)}>
                     <span className={css(styles.navToggleIcon)}>
-                      <AngleRightIcon aria-hidden="true" />
+                      <AngleRightIcon />
                     </span>
                   </span>
                 </button>

package/src/components/Nav/NavItem.tsx

@@ -164,7 +164,7 @@ export const NavItem: React.FunctionComponent<NavItemProps> = ({
   const flyoutButton = (
     <span className={css(styles.navToggle)}>
       <span className={css(styles.navToggleIcon)}>
-        <AngleRightIcon aria-hidden />
+        <AngleRightIcon />
       </span>
     </span>
   );

package/src/components/NotificationDrawer/NotificationDrawerHeader.tsx

@@ -51,7 +51,7 @@ export const NotificationDrawerHeader: React.FunctionComponent<NotificationDrawe
               variant={ButtonVariant.plain}
               aria-label={closeButtonAriaLabel}
               onClick={(event) => onClose(event)}
-              icon={<TimesIcon aria-hidden="true" />}
+              icon={<TimesIcon />}
             />
           </div>
         )}

package/src/components/NotificationDrawer/examples/NotificationDrawerBasic.tsx

@@ -64,7 +64,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
               onClick={onToggle(0)}
               variant="plain"
               aria-label={`Basic example header kebab toggle`}
-              icon={<EllipsisVIcon aria-hidden="true" />}
+              icon={<EllipsisVIcon />}
             />
           )}
         >
@@ -91,7 +91,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                     onClick={onToggle(1)}
                     variant="plain"
                     aria-label={`Basic example notification 1 kebab toggle`}
-                    icon={<EllipsisVIcon aria-hidden="true" />}
+                    icon={<EllipsisVIcon />}
                   />
                 )}
               >
@@ -120,7 +120,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                     onClick={onToggle(2)}
                     variant="plain"
                     aria-label={`Basic example notification 2 kebab toggle`}
-                    icon={<EllipsisVIcon aria-hidden="true" />}
+                    icon={<EllipsisVIcon />}
                   />
                 )}
               >
@@ -151,7 +151,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                     onClick={onToggle(3)}
                     variant="plain"
                     aria-label={`Basic example notification 3 kebab toggle`}
-                    icon={<EllipsisVIcon aria-hidden="true" />}
+                    icon={<EllipsisVIcon />}
                   />
                 )}
               >
@@ -181,7 +181,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                     onClick={onToggle(4)}
                     variant="plain"
                     aria-label={`Basic example notification 4 kebab toggle`}
-                    icon={<EllipsisVIcon aria-hidden="true" />}
+                    icon={<EllipsisVIcon />}
                   />
                 )}
               >
@@ -210,7 +210,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                     onClick={onToggle(5)}
                     variant="plain"
                     aria-label={`Basic example notification 5 kebab toggle`}
-                    icon={<EllipsisVIcon aria-hidden="true" />}
+                    icon={<EllipsisVIcon />}
                   />
                 )}
               >
@@ -235,7 +235,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                     onClick={onToggle(6)}
                     variant="plain"
                     aria-label={`Basic example notification 6 kebab toggle`}
-                    icon={<EllipsisVIcon aria-hidden="true" />}
+                    icon={<EllipsisVIcon />}
                   />
                 )}
               >

package/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx

@@ -89,7 +89,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
               onClick={() => onToggle('groups-kebab-toggle-1')}
               variant="plain"
               aria-label={`Groups example header kebab toggle`}
-              icon={<EllipsisVIcon aria-hidden="true" />}
+              icon={<EllipsisVIcon />}
             />
           )}
         >
@@ -124,7 +124,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                         onClick={() => onToggle('groups-kebab-toggle-2')}
                         variant="plain"
                         aria-label={`Groups example group 1 notification 1 kebab toggle`}
-                        icon={<EllipsisVIcon aria-hidden="true" />}
+                        icon={<EllipsisVIcon />}
                       />
                     )}
                   >
@@ -154,7 +154,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                         onClick={() => onToggle('groups-kebab-toggle-3')}
                         variant="plain"
                         aria-label={`Groups example group 1 notification 2 kebab toggle`}
-                        icon={<EllipsisVIcon aria-hidden="true" />}
+                        icon={<EllipsisVIcon />}
                       />
                     )}
                   >
@@ -185,7 +185,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                         onClick={() => onToggle('groups-kebab-toggle-4')}
                         variant="plain"
                         aria-label={`Groups example group 1 notification 3 kebab toggle`}
-                        icon={<EllipsisVIcon aria-hidden="true" />}
+                        icon={<EllipsisVIcon />}
                       />
                     )}
                   >
@@ -215,7 +215,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                         onClick={() => onToggle('groups-kebab-toggle-5')}
                         variant="plain"
                         aria-label={`Groups example group 1 notification 4 kebab toggle`}
-                        icon={<EllipsisVIcon aria-hidden="true" />}
+                        icon={<EllipsisVIcon />}
                       />
                     )}
                   >
@@ -254,7 +254,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                         onClick={() => onToggle('groups-kebab-toggle-6')}
                         variant="plain"
                         aria-label={`Groups example group 2 notification 1 kebab toggle`}
-                        icon={<EllipsisVIcon aria-hidden="true" />}
+                        icon={<EllipsisVIcon />}
                       />
                     )}
                   >
@@ -284,7 +284,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                         onClick={() => onToggle('groups-kebab-toggle-7')}
                         variant="plain"
                         aria-label={`Groups example group 2 notification 2 kebab toggle`}
-                        icon={<EllipsisVIcon aria-hidden="true" />}
+                        icon={<EllipsisVIcon />}
                       />
                     )}
                   >
@@ -315,7 +315,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                         onClick={() => onToggle('groups-kebab-toggle-8')}
                         variant="plain"
                         aria-label={`Groups example group 2 notification 3 kebab toggle`}
-                        icon={<EllipsisVIcon aria-hidden="true" />}
+                        icon={<EllipsisVIcon />}
                       />
                     )}
                   >
@@ -345,7 +345,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                         onClick={() => onToggle('groups-kebab-toggle-9')}
                         variant="plain"
                         aria-label={`Groups example group 2 notification 4 kebab toggle`}
-                        icon={<EllipsisVIcon aria-hidden="true" />}
+                        icon={<EllipsisVIcon />}
                       />
                     )}
                   >

package/src/components/NumberInput/NumberInput.tsx

@@ -126,7 +126,7 @@ export const NumberInput: React.FunctionComponent<NumberInputProps> = ({
             onClick={(evt) => onMinus(evt, inputName)}
             icon={
               <span className={css(styles.numberInputIcon)}>
-                <MinusIcon aria-hidden="true" />
+                <MinusIcon />
               </span>
             }
             {...minusBtnProps}
@@ -155,7 +155,7 @@ export const NumberInput: React.FunctionComponent<NumberInputProps> = ({
             onClick={(evt) => onPlus(evt, inputName)}
             icon={
               <span className={css(styles.numberInputIcon)}>
-                <PlusIcon aria-hidden="true" />
+                <PlusIcon />
               </span>
             }
             {...plusBtnProps}

package/src/components/Select/examples/SelectMultiTypeahead.tsx

@@ -226,12 +226,7 @@ export const SelectMultiTypeahead: React.FunctionComponent = () => {
           </LabelGroup>
         </TextInputGroupMain>
         <TextInputGroupUtilities {...(selected.length === 0 ? { style: { display: 'none' } } : {})}>
-          <Button
-            variant="plain"
-            onClick={onClearButtonClick}
-            aria-label="Clear input value"
-            icon={<TimesIcon aria-hidden />}
-          />
+          <Button variant="plain" onClick={onClearButtonClick} aria-label="Clear input value" icon={<TimesIcon />} />
         </TextInputGroupUtilities>
       </TextInputGroup>
     </MenuToggle>

package/src/components/Select/examples/SelectMultiTypeaheadCheckbox.tsx

@@ -219,12 +219,7 @@ export const SelectMultiTypeaheadCheckbox: React.FunctionComponent = () => {
           aria-controls="select-multi-typeahead-checkbox-listbox"
         />
         <TextInputGroupUtilities {...(selected.length === 0 ? { style: { display: 'none' } } : {})}>
-          <Button
-            variant="plain"
-            onClick={onClearButtonClick}
-            aria-label="Clear input value"
-            icon={<TimesIcon aria-hidden />}
-          />
+          <Button variant="plain" onClick={onClearButtonClick} aria-label="Clear input value" icon={<TimesIcon />} />
         </TextInputGroupUtilities>
       </TextInputGroup>
     </MenuToggle>

package/src/components/Select/examples/SelectMultiTypeaheadCreatable.tsx

@@ -239,12 +239,7 @@ export const SelectMultiTypeaheadCreatable: React.FunctionComponent = () => {
           </LabelGroup>
         </TextInputGroupMain>
         <TextInputGroupUtilities {...(selected.length === 0 ? { style: { display: 'none' } } : {})}>
-          <Button
-            variant="plain"
-            onClick={onClearButtonClick}
-            aria-label="Clear input value"
-            icon={<TimesIcon aria-hidden />}
-          />
+          <Button variant="plain" onClick={onClearButtonClick} aria-label="Clear input value" icon={<TimesIcon />} />
         </TextInputGroupUtilities>
       </TextInputGroup>
     </MenuToggle>

package/src/components/Select/examples/SelectTypeahead.tsx

@@ -223,12 +223,7 @@ export const SelectTypeahead: React.FunctionComponent = () => {
         />
 
         <TextInputGroupUtilities {...(!inputValue ? { style: { display: 'none' } } : {})}>
-          <Button
-            variant="plain"
-            onClick={onClearButtonClick}
-            aria-label="Clear input value"
-            icon={<TimesIcon aria-hidden />}
-          />
+          <Button variant="plain" onClick={onClearButtonClick} aria-label="Clear input value" icon={<TimesIcon />} />
         </TextInputGroupUtilities>
       </TextInputGroup>
     </MenuToggle>

package/src/components/Select/examples/SelectTypeaheadCreatable.tsx

@@ -230,12 +230,7 @@ export const SelectTypeaheadCreatable: React.FunctionComponent = () => {
         />
 
         <TextInputGroupUtilities {...(!inputValue ? { style: { display: 'none' } } : {})}>
-          <Button
-            variant="plain"
-            onClick={onClearButtonClick}
-            aria-label="Clear input value"
-            icon={<TimesIcon aria-hidden />}
-          />
+          <Button variant="plain" onClick={onClearButtonClick} aria-label="Clear input value" icon={<TimesIcon />} />
         </TextInputGroupUtilities>
       </TextInputGroup>
     </MenuToggle>

package/src/components/Switch/Switch.tsx

@@ -114,7 +114,7 @@ class Switch extends React.Component<SwitchProps & OUIAProps, { ouiaStateId: str
           <React.Fragment>
             <span className={css(styles.switchToggle)}>
               {hasCheckIcon && (
-                <span className={css(styles.switchToggleIcon)} aria-hidden="true">
+                <span className={css(styles.switchToggleIcon)}>
                   <CheckIcon />
                 </span>
               )}
@@ -129,7 +129,7 @@ class Switch extends React.Component<SwitchProps & OUIAProps, { ouiaStateId: str
           </React.Fragment>
         ) : (
           <span className={css(styles.switchToggle)}>
-            <div className={css(styles.switchToggleIcon)} aria-hidden="true">
+            <div className={css(styles.switchToggleIcon)}>
               <CheckIcon />
             </div>
           </span>

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

@@ -21,7 +21,6 @@ exports[`Switch no label switch is checked 1`] = `
       class="pf-v6-c-switch__toggle"
     >
       <div
-        aria-hidden="true"
         class="pf-v6-c-switch__toggle-icon"
       >
         <svg
@@ -63,7 +62,6 @@ exports[`Switch no label switch is not checked 1`] = `
       class="pf-v6-c-switch__toggle"
     >
       <div
-        aria-hidden="true"
         class="pf-v6-c-switch__toggle-icon"
       >
         <svg
@@ -137,7 +135,6 @@ exports[`Switch switch is checked and disabled 1`] = `
       class="pf-v6-c-switch__toggle"
     >
       <div
-        aria-hidden="true"
         class="pf-v6-c-switch__toggle-icon"
       >
         <svg
@@ -209,7 +206,6 @@ exports[`Switch switch is not checked and disabled 1`] = `
       class="pf-v6-c-switch__toggle"
     >
       <div
-        aria-hidden="true"
         class="pf-v6-c-switch__toggle-icon"
       >
         <svg

package/src/components/TextInputGroup/TextInputGroupMain.tsx

@@ -122,7 +122,7 @@ const TextInputGroupMainBase: React.FunctionComponent<TextInputGroupMainProps> =
           {...(isExpanded !== undefined && { 'aria-expanded': isExpanded })}
           {...(ariaControls && { 'aria-controls': ariaControls })}
         />
-        {validated && <TextInputGroupIcon isStatus>{<StatusIcon aria-hidden="true" />}</TextInputGroupIcon>}
+        {validated && <TextInputGroupIcon isStatus>{<StatusIcon />}</TextInputGroupIcon>}
       </span>
     </div>
   );

package/src/components/Toolbar/examples/ToolbarWithFilters.tsx

@@ -231,7 +231,7 @@ export const ToolbarWithFilters: React.FunctionComponent = () => {
               onClick={onKebabToggle}
               variant="plain"
               aria-label="Toolbar with filters example kebab toggle"
-              icon={<EllipsisVIcon aria-hidden="true" />}
+              icon={<EllipsisVIcon />}
             />
           )}
         >

package/src/components/TreeView/TreeViewListItem.tsx

@@ -139,7 +139,7 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
       tabIndex={-1}
     >
       <span className={css(styles.treeViewNodeToggleIcon)}>
-        <AngleRightIcon aria-hidden="true" />
+        <AngleRightIcon />
       </span>
     </ToggleComponent>
   );

package/src/components/Wizard/WizardHeader.tsx

@@ -40,12 +40,7 @@ export const WizardHeader: React.FunctionComponent<WizardHeaderProps> = ({
   <div className={css(styles.wizardHeader, className)} {...props}>
     {!isCloseHidden && (
       <div className={css(styles.wizardClose)}>
-        <Button
-          variant="plain"
-          aria-label={closeButtonAriaLabel}
-          onClick={onClose}
-          icon={<TimesIcon aria-hidden="true" />}
-        />
+        <Button variant="plain" aria-label={closeButtonAriaLabel} onClick={onClose} icon={<TimesIcon />} />
       </div>
     )}
     <div className={css(styles.wizardTitle)}>

package/src/components/Wizard/WizardToggle.tsx

@@ -113,13 +113,13 @@ export const WizardToggle = ({
               <span className={css(styles.wizardToggleNum)}>{wizardToggleIndex}</span>
             )}{' '}
             {parentStep?.name || activeStep?.name}
-            {isActiveSubStep && <AngleRightIcon className={css(styles.wizardToggleSeparator)} aria-hidden="true" />}
+            {isActiveSubStep && <AngleRightIcon className={css(styles.wizardToggleSeparator)} />}
           </span>
           {isActiveSubStep && <span className={css(styles.wizardToggleListItem)}>{activeStep?.name}</span>}
         </span>
 
         <span className={css(styles.wizardToggleIcon)}>
-          <CaretDownIcon aria-hidden="true" />
+          <CaretDownIcon />
         </span>
       </button>
       <div className={css(styles.wizardOuterWrap)}>

package/src/demos/CustomMenus/examples/ActionsMenuDemo.tsx

@@ -46,7 +46,7 @@ export const ActionsMenuDemo: React.FunctionComponent = () => {
             isSelected={selectedItems.includes(0)}
             actions={
               <MenuItemAction
-                icon={<CodeBranchIcon aria-hidden />}
+                icon={<CodeBranchIcon />}
                 actionId="code"
                 // eslint-disable-next-line no-console
                 onClick={() => console.log('clicked on code icon')}
@@ -61,7 +61,7 @@ export const ActionsMenuDemo: React.FunctionComponent = () => {
           <SelectOption
             isDisabled
             isSelected={selectedItems.includes(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"
             value={1}
           >
@@ -69,14 +69,14 @@ export const ActionsMenuDemo: React.FunctionComponent = () => {
           </SelectOption>
           <SelectOption
             isSelected={selectedItems.includes(2)}
-            actions={<MenuItemAction icon={<ClipboardIcon aria-hidden />} actionId="copy" aria-label="Copy" />}
+            actions={<MenuItemAction icon={<ClipboardIcon />} actionId="copy" aria-label="Copy" />}
             value={2}
           >
             Item 3
           </SelectOption>
           <SelectOption
             isSelected={selectedItems.includes(3)}
-            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"
             value={3}
           >

package/src/demos/CustomMenus/examples/ContextSelectorDemo.tsx

@@ -128,7 +128,7 @@ export const ContextSelectorDemo: React.FunctionComponent = () => {
                 aria-label="Search menu items"
                 id="pf-v6-context-selector-search-button-id-1"
                 onClick={onSearchButtonClick}
-                icon={<SearchIcon aria-hidden="true" />}
+                icon={<SearchIcon />}
               />
             </InputGroupItem>
           </InputGroup>

package/src/demos/CustomMenus/examples/DrilldownMenuDemo.tsx

@@ -183,21 +183,21 @@ export const DrilldownMenuDemo: React.FunctionComponent = () => {
           </MenuItem>
           <MenuItem
             itemId="group:storage"
-            icon={<StorageDomainIcon aria-hidden />}
+            icon={<StorageDomainIcon />}
             direction="down"
             drilldownMenu={
               <DrilldownMenu id="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/demos/DashboardHeader.tsx

@@ -137,7 +137,7 @@ export const DashboardHeader: React.FC<DashboardHeaderProps> = ({ notificationBa
                       onClick={onKebabDropdownToggle}
                       variant="plain"
                       aria-label="Settings and help"
-                      icon={<EllipsisVIcon aria-hidden="true" />}
+                      icon={<EllipsisVIcon />}
                     />
                   )}
                 >
@@ -157,7 +157,7 @@ export const DashboardHeader: React.FC<DashboardHeaderProps> = ({ notificationBa
                       onClick={onFullKebabToggle}
                       variant="plain"
                       aria-label="Toolbar menu"
-                      icon={<EllipsisVIcon aria-hidden="true" />}
+                      icon={<EllipsisVIcon />}
                     />
                   )}
                 >

package/src/demos/DataList/examples/DataListExpandableControlInToolbar.tsx

@@ -182,7 +182,7 @@ export const DataListExpandableControlInToolbar: React.FunctionComponent = () =>
                         isExpanded={isOpen1}
                         variant="plain"
                         aria-label="Primary content kebab toggle"
-                        icon={<EllipsisVIcon aria-hidden="true" />}
+                        icon={<EllipsisVIcon />}
                       />
                     )}
                   >
@@ -258,7 +258,7 @@ export const DataListExpandableControlInToolbar: React.FunctionComponent = () =>
                         isExpanded={isOpen2}
                         variant="plain"
                         aria-label="Secondary content kebab toggle"
-                        icon={<EllipsisVIcon aria-hidden="true" />}
+                        icon={<EllipsisVIcon />}
                       />
                     )}
                   >
@@ -334,7 +334,7 @@ export const DataListExpandableControlInToolbar: React.FunctionComponent = () =>
                         isExpanded={isOpen3}
                         variant="plain"
                         aria-label="Tertiary content kebab toggle"
-                        icon={<EllipsisVIcon aria-hidden="true" />}
+                        icon={<EllipsisVIcon />}
                       />
                     )}
                   >

package/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx

@@ -221,7 +221,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                     onClick={onKebabDropdownToggle}
                     variant="plain"
                     aria-label="Settings and help"
-                    icon={<EllipsisVIcon aria-hidden="true" />}
+                    icon={<EllipsisVIcon />}
                   />
                 )}
               >
@@ -354,7 +354,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
               variant="plain"
               onClick={() => onToggle('toggle-id-0')}
               isExpanded={isActionsMenuOpen['toggle-id-0'] || false}
-              icon={<EllipsisVIcon aria-hidden="true" />}
+              icon={<EllipsisVIcon />}
             />
           )}
         >
@@ -388,7 +388,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                       variant="plain"
                       onClick={() => onToggle('toggle-id-1')}
                       isExpanded={isActionsMenuOpen['toggle-id-1'] || false}
-                      icon={<EllipsisVIcon aria-hidden="true" />}
+                      icon={<EllipsisVIcon />}
                     />
                   )}
                 >
@@ -423,7 +423,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                       variant="plain"
                       onClick={() => onToggle('toggle-id-2')}
                       isExpanded={isActionsMenuOpen['toggle-id-2'] || false}
-                      icon={<EllipsisVIcon aria-hidden="true" />}
+                      icon={<EllipsisVIcon />}
                     />
                   )}
                 >
@@ -459,7 +459,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                       variant="plain"
                       onClick={() => onToggle('toggle-id-3')}
                       isExpanded={isActionsMenuOpen['toggle-id-3'] || false}
-                      icon={<EllipsisVIcon aria-hidden="true" />}
+                      icon={<EllipsisVIcon />}
                     />
                   )}
                 >
@@ -494,7 +494,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                       variant="plain"
                       onClick={() => onToggle('toggle-id-4')}
                       isExpanded={isActionsMenuOpen['toggle-id-4'] || false}
-                      icon={<EllipsisVIcon aria-hidden="true" />}
+                      icon={<EllipsisVIcon />}
                     />
                   )}
                 >