refactor(misc): Remove aria-hidden from icons (#11339)

* refactor(misc): Remove aria-hidden from icons * update snap for failing test
patternfly · Dec 18, 2024 · 86c16fd · 86c16fd
1 parent 0511acb
commit 86c16fd
Show file tree

Hide file tree

Showing 105 changed files with 235 additions and 298 deletions.
diff --git a/packages/react-core/src/components/Alert/AlertToggleExpandButton.tsx b/packages/react-core/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>
       }
     />

diff --git a/packages/react-core/src/components/BackToTop/BackToTop.tsx b/packages/react-core/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>

diff --git a/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx b/packages/react-core/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>

diff --git a/packages/react-core/src/components/Card/CardHeader.tsx b/packages/react-core/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>
               }
             />

diff --git a/packages/react-core/src/components/Card/examples/CardExpandable.tsx b/packages/react-core/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}

diff --git a/packages/react-core/src/components/Card/examples/CardExpandableWithIcon.tsx b/packages/react-core/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}

diff --git a/packages/react-core/src/components/Card/examples/CardHeaderInCardHead.tsx b/packages/react-core/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}

diff --git a/packages/react-core/src/components/Card/examples/CardOnlyActionsInCardHead.tsx b/packages/react-core/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}

diff --git a/packages/react-core/src/components/Card/examples/CardWithImageAndActions.tsx b/packages/react-core/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}

diff --git a/packages/react-core/src/components/ClipboardCopy/ClipboardCopyToggle.tsx b/packages/react-core/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>
     }
   />

diff --git a/.../src/components/ClipboardCopy/examples/ClipboardCopyInlineCompactWithAdditionalAction.tsx b/.../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>
     }
   >

diff --git a/packages/react-core/src/components/DataList/examples/DataListActions.tsx b/packages/react-core/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}

diff --git a/packages/react-core/src/components/DataList/examples/DataListCheckboxes.tsx b/packages/react-core/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}

diff --git a/packages/react-core/src/components/DataList/examples/DataListClickableRows.tsx b/packages/react-core/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}

diff --git a/packages/react-core/src/components/DataList/examples/DataListExpandable.tsx b/packages/react-core/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}

diff --git a/packages/react-core/src/components/DataList/examples/DataListMixedExpandable.tsx b/packages/react-core/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}

diff --git a/packages/react-core/src/components/DataList/examples/DataListWidthModifiers.tsx b/packages/react-core/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}

diff --git a/packages/react-core/src/components/DualListSelector/DualListSelectorTreeItem.tsx b/packages/react-core/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>
             )}

diff --git a/...t-core/src/components/DualListSelector/examples/DualListSelectorComplexOptionsActions.tsx b/...t-core/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}

diff --git a/packages/react-core/src/components/ExpandableSection/ExpandableSection.tsx b/packages/react-core/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>
             )
           })}

diff --git a/packages/react-core/src/components/ExpandableSection/ExpandableSectionToggle.tsx b/packages/react-core/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>
           )
         })}

diff --git a/packages/react-core/src/components/Form/FormFieldGroupToggle.tsx b/packages/react-core/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>
         }
       />

diff --git a/packages/react-core/src/components/HelperText/HelperTextItem.tsx b/packages/react-core/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}

diff --git a/packages/react-core/src/components/Label/LabelGroup.tsx b/packages/react-core/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>
       );

diff --git a/packages/react-core/src/components/Menu/MenuItem.tsx b/packages/react-core/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>

diff --git a/packages/react-core/src/components/Menu/MenuItemAction.tsx b/packages/react-core/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>
           );

diff --git a/packages/react-core/src/components/Menu/examples/MenuOptionMultiSelect.tsx b/packages/react-core/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>

diff --git a/packages/react-core/src/components/Menu/examples/MenuOptionSingleSelect.tsx b/packages/react-core/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>
-Original file line number
+Diff line change
@@ Expand Up @@
                     isExpanded && direction === 'up' && styles.modifiers.expandTop
                   )}
                 >
-                  <AngleRightIcon aria-hidden />
+                  <AngleRightIcon />
                 </span>
               )
             })}
@@ Expand Down @@