UI: Fix most a11y violations, modernize a11y testing setup #1499
Conversation
jgwhite
added
pr/no-changelog
| // Selectors of elements to exclude from a11y auditing. See the following docs | ||
| // for more: | ||
| // https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#include-exclude-object | ||
| const exclude = [['.pds-logomark'], ['.pds-tabNav'], ['.card-header']]; |
There was a problem hiding this comment.
This is great, I really like the idea of having an exclusion list for known issues (but that we can still keep track of)
| --success-border: #{dehex(color.$green-100)}; | ||
| --error: #{dehex(color.$red-050)}; | ||
| --error-text: #{dehex(color.$red-600)}; | ||
| --error-border: #{dehex(color.$red-100)}; | ||
| --warning: #{dehex(color.$yellow-050)}; | ||
| --warning-text: #{dehex(color.$yellow-600)}; | ||
| --warning-text: #{dehex(color.$yellow-800)}; |
There was a problem hiding this comment.
I'd be curious to see how this impacts the UI, and possibly share that with design so they're aware of good accessible defaults for the warning and success styles
There was a problem hiding this comment.
Yeah, I’d like design’s sign-off on this too. I think the before/after screenshots in the PR description are the extent of the changes but there may be more.
There was a problem hiding this comment.
Yeah, these look good. Orange turning to brown is always the tough one! Marketing's new stateful color palette is something we'll look to leverage in product soon 🙂
We were facing a number of accessibility violations with no easy way to triage them. This patch updates us to the latest ember-a11y-testing and adopts the new
setupGlobalA11yHooksapproach wherein the audit is run automatically whenever we callvisit,clicketc.The new approach also allows us a single point to pass
excludeoptions to axe-core, giving us an easy way to mark certain DOM elements as pending (meaning: “we know these have issues, but we can’t fix them right now”). I’ve only added three violations to the exclude list. The rest of the violations were straightforward to fix so I’ve addressed them all directly.The only noticeable changes for users are as follows:
How should I check this?
Check out the branch locally and run the ember test suite. You should see everything is green. The complete steps:
git checkout ui-a11y-updates cd ui yarn ember serveThen visit http://localhost:4200/tests
Where have the dev-mode stripes gone?
Previously in development mode we’d see prominent diagonal stripes on any elements that violated axe-core’s a11y rules. It looked like this:
ember-a11y-testing dropped this feature in 4.0.0. The rationale can be found in ember-a11y/ember-a11y-testing#205 and the README, but in short the idea is to nudge users towards more-mainstream tools and focus on the ember testing workflow.
I still see violations when I run
ember test— what gives?There are still a11y failures reported when running the tests headless (
ember test). These will be addressed in a subsequent PR.