context-menu: checkable menu items don't convey their role or state

[TetraLogicalHelpdesk]

WCAG Level

Level A

Priority

High

Pages/screens/components affected

• Combo Box
• Time Picker
• Date Time Picker

Description

The context menu example for Nested Menu Items includes menu items that can be checked/unchecked. The fact that these are checkable menu items, and their current state (whether they are checked or not checked) is not conveyed to assistive technologies.

User impact

Assistive technology users navigating through the context menu won't know which of the menu items are checkable/toggleable, and what their current state is.

Required solution

Make sure that the menu items that acts as checkboxes convey their role, as well as their current state.

Implementation guidance

Currently, the checkable menu items are conveyed with a role="menuitem", and their state is not programmatically exposed.

<vaadin-context-menu-item role="menuitem" class="vaadin-menu-item" menu-item-checked="" aria-haspopup="false" aria-selected="false" tabindex="0">
  Menu Item 1-1
</vaadin-context-menu-item>

Instead, menu items that act as checkboxes must have a role="menuitemcheckbox". Use the aria-checked attribute to denote the current state of the checkbox item.

<vaadin-context-menu-item role="menuitemcheckbox" aria-checked="true" ...>
  Menu Item 1-1
</vaadin-context-menu-item>

Note: if it's also possible to create context menus with mutually exclusive/radio buttons, see the relevant role="menuitemradio".

Test procedure(s)

Use these steps to confirm that the solution has been correctly applied to issues identified within the test sample, and to test the rest of the website for instances of the same issue:

1. Turn on your screen reader
2. Navigate through the context menu.
3. Verify that menu items that act as checkboxes are conveyed as such, and that their current state (checked or not checked) is also announced.

Definition of done

Complete all of these tasks before closing this issue or indicating it is ready for retest:

• All issues identified within the test sample have been resolved.
• The rest of the components, their variants, and the documentation website have been tested for the same issue.
• All issues identified throughout the rest of the components/website have been resolved or filed as new issues.

Related standards

• WCAG 2.1 Success Criterion 1.1.1 Non-text Content (Level A)
• WCAG 2.1 Success Criterion 1.3.1 Info and Relationships (Level A)
• WCAG 2.1 Success Criterion 4.1.2 Name, Role, Value (Level A)

More information

• W3C - Including the text of the visible label as part of the accessible name
• W3C Accessible Name and Description Computation 1.1

Test data

Test date: March 2021
Website: vaadin.com/components, vaadin.com/docs-beta

[web-padawan]

As previously mentioned, the implementation doesn't use checkable internally (this property was there only for demo).

To fix the issue based on the guidance, we would need to introduce checkable and checked boolean properties on the vaadin-context-menu-item component and use them to set role="menuitemcheckbox" and aria-checked attributes.

[rolfsmeds]

Also note that aria-selected="false" is applied to menu items (due to reuse from vaadin-item), but this should be fixed as part of #154. We might also want to ensure that this reuse doesn't lead to any incorrect aria attributes being applied to MenuBar items after that, however.

[rolfsmeds]

Related #687