Issue Description

The element type not defined for the “Disability Cohort“ combobox options.

Steps to Reproduce

1. Navigate to the “Create“ button present in the header section and activate it.
2. Navigate to the “Disability Cohort“ form field.
3. Access the “Disability Cohort“ form field using screen reader running.

Screenshot

Actual Behaviour

The role “listbox“, “option“ is not defined for the combobox options such as “Assistive Tech Users“, “Keyboard Only users“, “Low Vision users“, etc. (that becomes available on activating “Disability Cohort“). As a result, while accessing the mentioned interactive elements, assistive technology users are unaware about the “Multiple selection“ functionality.

In Chrome / JAWS, the combobox options are not getting selected after pressing “Space“ or “Enter“ key combobox getting disappear.

In Safari / VoiceOver, the combobox options are getting selected visually but it is not being announced for screen reader users.

Expected Result

• Code the combobox options using appropriate ARIA roles, states and properties to enable assistive technology identify the checkbox accurately and users can interact with the components easily.
• Add role such as “option“ and "listbox" for the combobox options. Define appropriate states aria-selected and properties to make the combobox options accessible for screen reader users. Set aria-selected="true" or aria-selected="false" when the combobox options are in selected and unselected state respectively. Similarly for aria-expanded attribute, set the value true when it is expanded state and false in collapsed state.

(Note: the value of aria-selected attribute should change as per user interaction).

• Provide label as "Assistive Tech Users", "Keyboard Only Users", etc. for the checkboxes via “aria-label” attribute.

More information on how to implement this can be found at:

WCAG accessible checkbox examples