Skip to content

Fix the usage of aria-haspopup  #24796

@afercia

Description

@afercia

Describe the bug

The ARIA attribute aria-haspopup is used inconsistently across the Gutenberg UI. For example, some buttons that open a menu do use aria-haspopup, while others don't.

It is worth reminding that aria-haspopup changed between the ARIA 1.0 and 1.1 specifications.

In ARIA 1.0: https://www.w3.org/TR/wai-aria-1.0/states_and_properties#aria-haspopup

Indicates that the element has a popup context menu or sub-level menu.
This means that activation (note by me: this means activation by the user) renders conditional content. Note that ordinary tooltips are not considered popups in this context.
A popup is generally presented visually as a group of items that appears to be on top of the main page content.

In ARIA 1.1 it has been expanded to indicate opening of other patterns that aren't just menus: https://www.w3.org/TR/wai-aria-1.1/#aria-haspopup

Where the allowed values are:

false (default)	Indicates the element does not have a popup.
true            Indicates the popup is a menu.
menu            Indicates the popup is a menu.
listbox         Indicates the popup is a listbox.
tree            Indicates the popup is a tree.
grid            Indicates the popup is a grid.
dialog          Indicates the popup is a dialog.

It is clear that the concept of "popup" evolved to represent other kind of UIs.

Regardless, right now in Gutenberg there's the need to consistently communicate to assistive technology users whether a UI control opens some kind of additional UI. Worth noting that aria-expanded alone isn't sufficient because it represents a state, while aria-haspopup is a property.

Examples:
In the block toolbars, some buttons that open a menu do use aria-haspopup, for example:

  • the block switcher button
  • the text alignment button

Other buttons that open a menu don't use aria-haspopup, for example:

  • the "Replace" button in the Image block

Screenshots:

Screenshot 2020-08-25 at 12 47 54

Screenshot 2020-08-25 at 12 48 08

Screenshot 2020-08-25 at 12 48 24

There's also the case of a button that uses aria-haspopup but it opens... another toolbar. Semantically, this isn't correct and it can be confusing for users. I'll split this in a separate ticket. See the Heading block, where the "Change heading level" button opens another toolbar:

aria-haspopup for a toolbar

Screenshot 2020-08-25 at 16 52 04

Lastly, there are cases where a button opens a complex UI that is made of various parts. I'm not sure which of the aria-haspopup values would be the most appropriate in these cases. This would need some research and discussion. For example, see the case of the "Quick inserter" or the “Content structure” UIs. How can we properly communicate what kind of UI is going to be opened? At a first glance, the closest value might be "dialog" but this UIs aren't real ARIA dialogs.

Screenshot 2020-08-25 at 15 58 18

Metadata

Metadata

Assignees

No one assigned

    Labels

    [Focus] Accessibility (a11y)Changes that impact accessibility and need corresponding review (e.g. markup changes).[Status] In ProgressTracking issues with work in progress[Type] BugAn existing feature does not function as intended

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions