fix: a11y issue fixes #2917
fix: a11y issue fixes #2917
Conversation
|
Thanks! Are any of these also in here? |
| @@ -44,6 +44,7 @@ export const SearchButton = ({ | |||
| name={buttonText} | |||
| size={3} | |||
| aria-hidden={true} | |||
| aria-label="Magnifying glass search icon" | |||
There was a problem hiding this comment.
💣 chore: There's no need to label this icon, because aria-hidden=true.
Detail:
This icon is hidden from screen readers because it is decorative. The button is already labeled with text, so adding the aria-label would cause AT to read, "Search. Magnifying glass search icon".
I find it helpful to aim for a minimum of text. For instance if I do want to label the Search icon, I would simply use "Search". The fact that it's a magnifying glass (or an icon) doesn't add anything for someone who can't see it.
| @@ -62,6 +62,7 @@ const LanguageSelectorDropdown: React.FC<LanguageSelectorProps> = ({ | |||
| <li className="usa-language__primary-item"> | |||
| <LanguageSelectorButton | |||
| className={classes} | |||
| aria-controls="language-options" | |||
There was a problem hiding this comment.
💣 chore: This is a duplicate property, we should remove it.
The ID of the controlled menu is passed as a const via the controls attribute on this component. It's preferable to use the const anyway, so that updating the menu ID does not require an additional update to the controls prop.
Summary
This PR provides small accessibility fixes for components that had accessibility violations in storybook
Related Issues or PRs
Issue #2736
Issue #2916
Issue #2809
Issue #2880
How To Test
Check each component in storybook, shouldn't have any violations present.