Skip to content
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

Inserter a11y improvements #525

Closed
afercia opened this issue Apr 27, 2017 · 0 comments · Fixed by #527
Closed

Inserter a11y improvements #525

afercia opened this issue Apr 27, 2017 · 0 comments · Fixed by #527
Labels
[Feature] Inserter The main way to insert blocks using the + button in the editing interface [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes).

Comments

@afercia
Copy link
Contributor

afercia commented Apr 27, 2017

See #515

The inserter toggle button and menu should use some ARIA roles, states, and properties to improve both the feedback for users and the actual interaction. For example:

  • the toggle button doesn't inform users that it's meant to open a menu, should use aria-haspopup
  • when activating the toggle button, there's no audible feedback about what happened, should use aria-expanded
  • the menu and menu items should use role="menu" and role="menuitem", this is not just for better semantics but also because we need to stop screen readers from intercepting keypresses, otherwise arrow navigation won't work (see Add arrow key navigation to the inserter window. #515)
  • the search field needs an explicitly associated label with for/id attributes (can be visually hidden)
  • the menu items need a focus style

I've played a bit with this, will do a PR soon.

@afercia afercia added the [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). label Apr 27, 2017
@mtias mtias added Framework Issues related to broader framework topics, especially as it relates to javascript [Feature] Inserter The main way to insert blocks using the + button in the editing interface and removed Framework Issues related to broader framework topics, especially as it relates to javascript labels Apr 28, 2017
@aduth aduth closed this as completed in #527 May 3, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Inserter The main way to insert blocks using the + button in the editing interface [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes).
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants