fix: a11y omnibus package #2819
Conversation
Otherwise, headers need to be in a certain DOM context to avoid a11y issues, and this is how USWDS does it
|
Nvm, I booted it to another branch/PR |
| @@ -20,9 +20,9 @@ Source: https://designsystem.digital.gov/components/tag/ | |||
| export const DefaultTag = (): React.ReactElement => <Tag>My Tag</Tag> | |||
|
|
|||
| export const CustomBg = (): React.ReactElement => ( | |||
| <Tag background="#e44608">My Tag</Tag> | |||
| <Tag background="#d83933">My Tag</Tag> | |||
There was a problem hiding this comment.
Totally a nit, but this could be a different color (that's also accessible of course). Right now this is the same as bg-secondary so there's no visual difference looking at the CustomBg and CustomClass stories.
There was a problem hiding this comment.
I remember doing that on purpose, but I forget why 😅
There was a problem hiding this comment.
i think because it looked like bg-secondary, but it wasn't, so I was trying to keep it within the palette
@werdnanoslen I looked at the code and it looks good to me. I just wanted to run this testing command, but I don't see it the command in |
oh whoops, I'll remove it. I started this ticket by seeing if we should run playwright as a GH task, but I didn't figure out how and pivoted to just fixing the issues it found from running locally. |
Summary
Fixes a bunch of a11y issues that Playwright surfaced (322 of 553 tests failed):
Source changes:
Icons, defaulting to the former being true in storybook. Removed part of a test to this end.CardHeaderelement fromheadertodivto avoid a11y issues that Storybook helpfully demonstrated, and it's how USWDS implements it anyway (probably for the same reason). This might be breaking in case anyone used css to target the rendered semanticheaderelement. If so, please mark as breaking.Pagination,SocialLinks, andSearchButton's decorative svgs from screen readersLanguageSelectoronly if specified, and for this component only uses it when appropriateStorybook-only changes:
DatePicker,InputPrefix,InputSufffix,RangeInput,Select,Textarea, andTextInputstories to fix a11y warnings there, and tidied up a bitTagstory colors to meet contrast requirementsIconListicons from screen readersFooter'sh3s tops since class already handled styling and use of a heading seemed unwarrantedPagination's storiesExtendedNavdue to false-positive in StorybookRelated Issues or PRs
Resolves #2811
Resolves #2809
How To Test
If you have Playwright installed locally, run
yarn test-storybook. Otherwise, check the Accessibility tab of all the storiesScreenshots (optional)