combo-box: custom item presentation content not announced

[TetraLogicalHelpdesk]

WCAG Level

Level A

Priority

High

Pages/screens/components affected

• Combo Box

Description

In the Custom Item Presentation example for combo box, options visible in the list box have images and additional information. However, when navigating the list box with assistive technologies, only the basic information (which is visible in the actual text edit field of the combo box) is announced.

User impact

Assistive technology users navigating through the available items in the list boxes won't get any of the additional information that is provided.

Required solution

Make sure that all the information that's visible/available for options in the list box is also conveyed to assistive technology users.

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 combo box with custom/rich item presentation.
3. Verify that the information presented visually for each item is also conveyed by the screen reader.

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]

This is caused by the fact that focus stays in the <input> element and does not move to the dropdown.