Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
+235 −298
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
601d1c0
refactor(misc): Remove aria-hidden from icons
mfrances17 Dec 9, 2024
7f94baf
update snap for failing test
mfrances17 Dec 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/react-core/src/components/Alert/AlertToggleExpandButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export const AlertToggleExpandButton: React.FunctionComponent<AlertToggleExpandB
{...props}
icon={
<span className={css(styles.alertToggleIcon)}>
<AngleRightIcon aria-hidden="true" />
<AngleRightIcon />
</span>
}
/>
Expand Down
2 changes: 1 addition & 1 deletion packages/react-core/src/components/BackToTop/BackToTop.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@

const [scrollElement, setScrollElement] = React.useState(null);

const toggleVisible = () => {

Check warning on line 36 in packages/react-core/src/components/BackToTop/BackToTop.tsx

View workflow job for this annotation

GitHub Actions / Lint 

The 'toggleVisible' function makes the dependencies of useEffect Hook (at line 74) change on every render. Move it inside the useEffect callback. Alternatively, wrap the definition of 'toggleVisible' in its own useCallback() Hook
if (scrollElement) {
const scrolled = scrollElement.scrollY ? scrollElement.scrollY : scrollElement.scrollTop;
if (!isAlwaysVisible) {
Expand Down Expand Up @@ -84,7 +84,7 @@
onClick={handleClick}
{...props}
>
<Button variant="primary" icon={<AngleUpIcon aria-hidden="true" />} iconPosition="end">
<Button variant="primary" icon={<AngleUpIcon />} iconPosition="end">
{title}
</Button>
</div>
Expand Down
4 changes: 2 additions & 2 deletions packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -181,14 +181,14 @@
} else if (!dateProp) {
setFocusedDate(today);
}
}, [dateProp]);

Check warning on line 184 in packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx

View workflow job for this annotation

GitHub Actions / Lint 

React Hook useEffect has a missing dependency: 'focusedDate'. Either include it or remove the dependency array

useEffect(() => {
// Calendar month should not be focused on page load
if ((shouldFocus || isDateFocused) && focusedDateValidated && focusRef.current) {
focusRef.current.focus();
}
}, [focusedDate, isDateFocused, focusedDateValidated, focusRef]);

Check warning on line 191 in packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx

View workflow job for this annotation

GitHub Actions / Lint 

React Hook useEffect has a missing dependency: 'shouldFocus'. Either include it or remove the dependency array

const onMonthClick = (ev: React.MouseEvent, newDate: Date) => {
setFocusedDate(newDate);
Expand Down Expand Up @@ -292,7 +292,7 @@
variant="plain"
aria-label={prevMonthAriaLabel}
onClick={(ev: React.MouseEvent) => onMonthClick(ev, prevMonth)}
icon={<AngleLeftIcon aria-hidden={true} />}
icon={<AngleLeftIcon />}
/>
</div>
<InputGroup>
Expand Down Expand Up @@ -358,7 +358,7 @@
variant="plain"
aria-label={nextMonthAriaLabel}
onClick={(ev: React.MouseEvent) => onMonthClick(ev, nextMonth)}
icon={<AngleRightIcon aria-hidden={true} />}
icon={<AngleRightIcon />}
/>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion packages/react-core/src/components/Card/CardHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ export const CardHeader: React.FunctionComponent<CardHeaderProps> = ({
{...toggleButtonProps}
icon={
<span className={css(styles.cardHeaderToggleIcon)}>
<AngleRightIcon aria-hidden="true" />
<AngleRightIcon />
</span>
}
/>
Expand Down
2 changes: 1 addition & 1 deletion packages/react-core/src/components/Card/examples/CardExpandable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion packages/react-core/src/components/Card/examples/CardExpandableWithIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion packages/react-core/src/components/Card/examples/CardHeaderInCardHead.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion packages/react-core/src/components/Card/examples/CardOnlyActionsInCardHead.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion packages/react-core/src/components/Card/examples/CardWithImageAndActions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion packages/react-core/src/components/ClipboardCopy/ClipboardCopyToggle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export const ClipboardCopyToggle: React.FunctionComponent<ClipboardCopyTogglePro
{...props}
icon={
<div className={css(styles.clipboardCopyToggleIcon)}>
<AngleRightIcon aria-hidden="true" />
<AngleRightIcon />
</div>
}
/>
Expand Down
2 changes: 1 addition & 1 deletion .../src/components/ClipboardCopy/examples/ClipboardCopyInlineCompactWithAdditionalAction.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
}
>
Expand Down
2 changes: 1 addition & 1 deletion packages/react-core/src/components/DataList/examples/DataListActions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
6 changes: 3 additions & 3 deletions packages/react-core/src/components/DataList/examples/DataListCheckboxes.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down Expand Up @@ -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}
Expand Down Expand Up @@ -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}
Expand Down
4 changes: 2 additions & 2 deletions packages/react-core/src/components/DataList/examples/DataListClickableRows.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down Expand Up @@ -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}
Expand Down
6 changes: 3 additions & 3 deletions packages/react-core/src/components/DataList/examples/DataListExpandable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down Expand Up @@ -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}
Expand Down Expand Up @@ -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}
Expand Down
6 changes: 3 additions & 3 deletions packages/react-core/src/components/DataList/examples/DataListMixedExpandable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down Expand Up @@ -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}
Expand Down Expand Up @@ -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}
Expand Down
4 changes: 2 additions & 2 deletions packages/react-core/src/components/DataList/examples/DataListWidthModifiers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down Expand Up @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion packages/react-core/src/components/DualListSelector/DualListSelectorTreeItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ const DualListSelectorTreeItemBase: React.FunctionComponent<DualListSelectorTree
tabIndex={-1}
>
<span className={css(styles.dualListSelectorItemToggleIcon)}>
<AngleRightIcon aria-hidden />
<AngleRightIcon />
</span>
</div>
)}
Expand Down
4 changes: 2 additions & 2 deletions ...t-core/src/components/DualListSelector/examples/DualListSelectorComplexOptionsActions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down Expand Up @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion packages/react-core/src/components/ExpandableSection/ExpandableSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)
})}
Expand Down
2 changes: 1 addition & 1 deletion packages/react-core/src/components/ExpandableSection/ExpandableSectionToggle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ export const ExpandableSectionToggle: React.FunctionComponent<ExpandableSectionT
isExpanded && direction === 'up' && styles.modifiers.expandTop
)}
>
<AngleRightIcon aria-hidden />
<AngleRightIcon />
</span>
)
})}
Expand Down
2 changes: 1 addition & 1 deletion packages/react-core/src/components/Form/FormFieldGroupToggle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export const FormFieldGroupToggle: React.FunctionComponent<FormFieldGroupToggleP
id={toggleId}
icon={
<span className={css(styles.formFieldGroupToggleIcon)}>
<AngleRightIcon aria-hidden="true" />
<AngleRightIcon />
</span>
}
/>
Expand Down
6 changes: 1 addition & 5 deletions packages/react-core/src/components/HelperText/HelperTextItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion packages/react-core/src/components/Label/LabelGroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down
8 changes: 4 additions & 4 deletions packages/react-core/src/components/Menu/MenuItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>}
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion packages/react-core/src/components/Menu/MenuItemAction.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
Expand Down
2 changes: 1 addition & 1 deletion packages/react-core/src/components/Menu/examples/MenuOptionMultiSelect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion packages/react-core/src/components/Menu/examples/MenuOptionSingleSelect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Loading
Loading