Make the inserter results panel focusable and improve accessibility. #7663
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
jorgefilipecosta
approved these changes
Jul 2, 2018
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.
This PR seeks to improve the interaction and accessibility of the main inserter results panel. Scrollable div elements are natively focusable in Firefox, but not in other browsers. For keyboard users and assistive technology users, this adds inconsistency across browsers.
The Firefox behavior is for accessibility reasons: by making the div focusable, it allows to scroll using the arrow keys. Using a simple technique, it's possible to make it always focusable across all browsers. For more details see this post by Mr. Steve Faulkner: https://developer.paciellogroup.com/blog/2016/02/short-note-on-improving-usability-of-scrollable-regions/
For better accessiblity, the div now uses also an ARIA role and is labelled with an aria-label "Available block types".
Worth noting this is not completely new, as in Gutenberg 2.4 the inserter was a bit different because it used a tab interface, but the scrollable panel was focusable and properly labeled.
As per the focus style, I've opted to use the same style already used for the inserter expandable panel: a dotted outline:
The focused panel in Gutenberg 2.4:
In this PR:
In this PR, announced by a screen reader:
How has this been tested?
npm test
fixes #7576