Skip to content

Commit

Permalink
fix(a11y): add explicit labels to alert icons (#373)
Browse files Browse the repository at this point in the history
Often information is conveyed by the icons of our alerts (this is an
error or warning, is this an external link) that is not conveyed
explicitly by the text. These icons are then not presentational, and
should be labeled.

## Changes

- Explicitly adds aria-labels to svgs in alerts, field level alerts, and
alert links
- removes `alt` text in favor of `aria-label` since alt text is not
universally supported on svg elements (changes to the Icon element's use
of alt text will be in a follow-up PR)

## How to test this PR

1. Are the svgs now properly labeled on alerts, field level alerts, and
alert links?

## Screenshots
![Screenshot 2024-06-28 at 4 46 36
AM](https://github.com/cfpb/design-system-react/assets/19983248/5f1d92a1-d0f8-40dd-8e79-b7ded6f5bde4)
  • Loading branch information
billhimmelsbach authored Oct 3, 2024
1 parent e336211 commit 546477b
Show file tree
Hide file tree
Showing 3 changed files with 12 additions and 3 deletions.
4 changes: 3 additions & 1 deletion src/components/Alert/Alert.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,9 @@ export const Alert = ({

return (
<div className={classes} data-testid='notification' {...properties}>
{showIcon ? <Icon {...iconByType[status]} /> : null}
{showIcon ? (
<Icon ariaLabel={`${status} icon`} {...iconByType[status]} />
) : null}
<div className='m-notification_content'>
{message ? (
<p
Expand Down
6 changes: 5 additions & 1 deletion src/components/Alert/AlertFieldLevel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,11 @@ export const AlertFieldLevel = ({
className={`a-form-alert a-form-alert${AlertFieldLevelClass[status]}`}
{...properties}
>
<Icon name={MapTypeToIconName[status]} alt={status} withBg />
<Icon
ariaLabel={`${status} icon`}
name={MapTypeToIconName[status]}
withBg
/>
<span className='a-form-alert_text' data-testid='message'>
{message}
</span>
Expand Down
5 changes: 4 additions & 1 deletion src/components/Alert/AlertLink.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,10 @@ export const AlertLink = ({
}: AlertLinkProperties): JSX.Element => (
<li className='m-list_item'>
<a className='m-list_link' href={href}>
{label} {isExternal ? <Icon name='external-link' /> : null}
{label}{' '}
{isExternal ? (
<Icon ariaLabel='external link' name='external-link' />
) : null}
</a>
</li>
);

0 comments on commit 546477b

Please sign in to comment.