Skip to content

Inserter a11y improvements #525

Closed

Description

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.

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

Metadata

Assignees

No one assigned

    Labels

    [Feature] InserterThe 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).

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions