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

Simplify the Inserter accessibility #7058

merged 2 commits into from Jun 4, 2018


None yet
3 participants

afercia commented May 31, 2018


This PR aims to simplify the Inserter accessibility. The Inserter is now based on collapsible accordions and many a11y things were implemented with the previous version in mind. Please refer to the related issue #7052 for more details

  • removes the ARIA roles
  • removes arrows navigation
  • removes the active item tracking
  • uses a list for the items list

Using a list adds an useful information for users: assistive technologies will announce the total number of items in a list and some screen readers will also announce the position of each item. See screenshot below:

screen shot 2018-05-31 at 15 24 30

Worth noting Safari has a bug (or "feature"?) and doesn't expose styled lists as lists. It needs an explicitly set ARIA role list which would trigger a jsx-a11y validation error (while the W3C validator throws just a warning). It's a known Safari bug you can test on this pen:

Check the Safari dev tools > "node" tab, and see the styled ul has "no matching ARIA roles". Now that Chrome has a nice accessibility tab, you can double check on Chrome and see it correctly exposes the styled list as list. So, it seems Safari-specific.

screen shot 2018-05-31 at 16 00 52

How has this been tested?

  • npm test
  • rebased to latest changes from #7003 / #6998 and tested

Fixes #7052


This comment has been minimized.


afercia commented May 31, 2018


  • there's a lot of red in the diff
  • keyboard interaction and a11y is simpler
  • it will further improve when tabbing will be constrained, see #6987
  • screen reader users already have tools to "jump" through the block type groups: the headings (there are also shortcuts to jump through lists)

@afercia afercia requested a review from mtias May 31, 2018

@afercia afercia referenced this pull request May 31, 2018


Inserter UI adjustments #7059


This comment has been minimized.


mtias commented Jun 1, 2018

there's a lot of red in the diff

Always good!

@mtias mtias added this to the 3.0 milestone Jun 1, 2018



@youknowriad youknowriad merged commit 60d1f55 into master Jun 4, 2018

2 checks passed

codecov/project 46.35% (-0.01%) compared to 80864d4
continuous-integration/travis-ci/pr The Travis CI build passed

@youknowriad youknowriad deleted the update/inserter-simplify-a11y branch Jun 4, 2018

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