New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make the inserter results panel focusable and improve accessibility. #7663

Merged
merged 1 commit into from Jul 2, 2018

Conversation

Projects
None yet
2 participants
@afercia
Contributor

afercia commented Jul 2, 2018

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:

screen shot 2018-07-02 at 14 24 36

In this PR:

screen shot 2018-07-02 at 14 55 04

In this PR, announced by a screen reader:

screen shot 2018-07-02 at 14 55 27

How has this been tested?

npm test

fixes #7576

@afercia afercia requested a review from youknowriad Jul 2, 2018

@jorgefilipecosta

This seems to work well and the changes look good to me 👍

@afercia afercia merged commit b4435de into master Jul 2, 2018

2 checks passed

codecov/project 47.08% remains the same compared to a2e29d2
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details

@afercia afercia deleted the update/inserter-results-panel-focusable-a11y branch Jul 2, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment