Help Center : Combobox is missing appropriate roles and /or attributes.

Issue Summary

The element appears and functions like a Listbox but is missing the required ARIA role(s) and/or attribute(s).

Name of the Element:
-Popular list box

Location:
Located beside the heading "All portals", in the main region

Steps to Reproduce

1. In the Help Center portal keeping the screen reader navigate to the main content area.
2. Inspect the dropdown menu to order the projects.

Actual Results

The <input> elements do not use role="combobox", aria-expanded, and aria-activedescendant attributes. As well, the comboboxes do not have programmatically defined accessible names. The listbox options do not use role="listbox", role="option", and aria-selected attributes. As a result, users of assistive technologies will not be able to understand the functionality associated with the comboboxes.

Expected Results

• Make sure that Combobox components are programmatically determined. If possible, use a native "<select>" element. These have out-of-the-box accessibility. If this is not possible, create a Combobox with ARIA. Provide role=”combobox” for the <div> element containing mentioned combo boxes.

• Provide role="listbox" for the <div> element containing combo box options and also reference id of <label> element to the same <div> element using “aria-labelledby” attribute.

• Specify the “aria-expanded” attribute and set the value as “true“ when it is in the selected state. Make sure that the value should be updated on user interaction.

• The attributes "aria-autocomplete", "aria-haspopup", and "aria-controls" further define the exact behaviour of the component. They are not strictly required for conformance. However, we strongly encourage you to use these attributes.

Additionally, make sure the options available in combo boxes are also accessible for screen reader users.

Refer to this link for https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/ implementation. 

Screenshot

Workaround

No workaround is available.

Bug Ref: 744594

Bulldog Ref: