[FX-2076] Polyfills :focus-visible; adds :focus-visible outlines #5887
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
dzucconi
commented
Jul 6, 2020
dzucconi
commented
Jul 6, 2020
damassi
approved these changes
Jul 6, 2020
eessex
approved these changes
Jul 6, 2020
dzucconi
force-pushed
the
feat/FX-2076--focus-visible
branch
from
7d4d770
to
3e73c07
Compare
dzucconi
commented
Jul 7, 2020
dzucconi
force-pushed
the
feat/FX-2076--focus-visible
branch
from
3e73c07
to
167b289
Compare
Merged
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Re: FX-2076
So in the gif above you can get a sense of the behavior — a 1px purple focus ring outline will show up only when tabbing/shift+tabbing. What you'll notice is that big pieces of navigation and pages are not accessible via keyboard, and in other places elements have too many focus points making navigation tedious.
I think the most appropriate next steps here are making the global nav accessible — (there's a ticket to create a tech plan for this, cc @sweir27)
I'll make tickets for some of the bigger inaccessible items as well (notably the filter sidebar is totally inaccessible for some reason). We should also install some simple linting rules to guide developers away from sticking
onClickhandlers on divs, for instance.The source for the polyfill is here
Support for :focus-visible sans polyfill here