Closed werdnanoslen closed 2 months ago
~FYI everything is passing checks except for the a11y CI step I added, because it can't run here 🙃 Sooo, maybe we shouldn't run this as a storybook test runner, since it requires a deployed storybook (sorta like how USWDS does it on their PRs). Thoughts on whether to merge this as just a11y updates, with an alternative CI for a11y, or can we still make this work?~
Nvm, I booted it to another branch/PR
yarn test-storybook
@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 package.json
. Is this new? Should this have been added as a new script?
yarn test-storybook
@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
package.json
. Is this new? Should this have been added as a new script?
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.CardHeader
element fromheader
todiv
to 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 semanticheader
element. If so, please mark as breaking.Pagination
,SocialLinks
, andSearchButton
's decorative svgs from screen readersLanguageSelector
only if specified, and for this component only uses it when appropriateStorybook-only changes:
DatePicker
,InputPrefix
,InputSufffix
,RangeInput
,Select
,Textarea
, andTextInput
stories to fix a11y warnings there, and tidied up a bitTag
story colors to meet contrast requirementsIconList
icons from screen readersFooter
'sh3
s top
s since class already handled styling and use of a heading seemed unwarrantedPagination
's storiesExtendedNav
due 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)