Skip to content

Inserter a11y improvements #525

@afercia

Description

@afercia

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.

Metadata

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
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions