fix: Make keyboard focus visible and name the unnamed controls - #929
Draft
lfrancke wants to merge 2 commits into
Draft
fix: Make keyboard focus visible and name the unnamed controls#929lfrancke wants to merge 2 commits into
lfrancke wants to merge 2 commits into
Conversation
Seven controls in the chrome carried `outline: none` with no replacement, so keyboard focus was invisible on the burger menu, the nav toggles, the TOC links, the copy button and every `summary`. asciidoctor-tabs does the same to its tab list items; that one is overridden here because its stylesheet is imported first. The rings use `currentcolor` rather than a new variable, so the design token work has nothing extra to reconcile and contrast stays out of scope. The search opener was a `div`, so it was neither focusable nor named and `Ctrl+K` was the only way in. Making it a `button` requires the popover and its results list to become siblings, because a button may not contain interactive content, which also stops a click inside the popover bubbling back to the opener and reopening it. The two logos, the four social links, the toolbar home link and Asciidoctor's per-heading section anchors were all reachable with no accessible name. The anchors are empty by construction, with the glyph coming from CSS, so they are named from their heading at runtime.
✅ Deploy Preview for stackable-docs ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
The section anchors, the code-block copy button and the nav menu toggle are all `visibility: hidden` until their container is hovered, so a keyboard user tabs onto a control that is not drawn and cannot see where focus is. Pairing each reveal with focus is what makes the focus rings on those three reachable without a mouse.
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
This continues my journey to improve our PageSpeed score.
We are not "great" on accessibility yet and this tries to fix some of that. It goes from 83 to 93 for me with this PR and more will come.
New:
Homepage
Operator
Old:
Homepage
Operator
There should be no user visible changes - I clicked around and it all looked good. But keyboard focus works much better. The menu bar for example can now be tabbed through and you can reach the search thing.
In the sidebar menu it is now also possible to tab through everything. Some items also didn't have a visible "ring" on it when selected via keyboard. That is all fixed. And some icons etc. now have alt names.
There will be more to come.