Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
Make the inserter results panel focusable and improve accessibility. #7663
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?