Get IT Help: Roles not defined for custom combobox

Issue Summary

The role is not provided for the “Martin Test Insight Object 2(optional)” custom combobox. In addition, a visual label is not associated with the mentioned custom combobox.

Steps to Reproduce

1. Navigate to "Help center" and activate it.
2. Navigate to the "Charlottes First Project" link and activate it
3. Try to access the “Martin Test Insight Object 2(optional)” custom combobox with screen reader on.
4. Observe the comboboxes are missing roles.

Actual Results

The role is not provided for the “Martin Test Insight Object 2(optional)” custom combobox. In addition, a label is not provided for the mentioned combobox.

Following problems found with custom combobox →

1. The custom combobox is missing the roles of "combobox" and "listbox".
2. role=”option” is missing for combobox options.
3. The visual label “Martin Test Insight Object 2(optional)” is not associated with combobox.

Due to this, screen reader users may not be able to use the functionality effectively.

Although, the necessary instructions "Press down to open the menu" is provided for the combobox. 

Expected Results

Making custom combobox accessible →

• role="combobox" to the <input> element to announce correct role for this field.

• aria-expanded property to the <input> element and toggle its value programmatically to true/ false depending on expanded/ collapsed state of combobox.

• <div> element with role=”listbox” and unique id.

• “aria-owns” attribute to <input> element having value of id property of <div> element.

• role=”option” and unique id to the <div> elements present for options present for combobox.

• aria-activedescendant property to the <input> element having value as id property of <li> element

• A visible label such as “Martin Test Insight Object 2(optional)” should be associated with Combobox using “for“ and “id” attributes.

For details on implementation, please see this example → https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/

https://www.w3.org/WAI/ARIA/apg/patterns/combobox/

https://react-select.com/home

Screenshot

Workaround

Currently there is no known workaround for this behaviour.