Issue Summary

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

Element name: Build plan Combobox

Location of the element: Editable Combobox, under the "Link to build plan" heading section, in the main content.

Steps to Reproduce

1. Open the homepage
2. Navigate to the "Create" button in the header and activate it.
3. Navigate the "Create Deployment Project" link and activate it 
4. Turn on the screen reader and try to access the "Build Plan" Combobox.

Actual Results

 The role is not provided for the “Build Plan” custom combobox.

Following problems found with custom combobox →

1. The custom combobox is missing the role of combobox.

1. role=”option” is missing for combobox options.

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

Expected Results

1. Making custom combobox accessible →

• role="combobox" and aria-autocomplete="list" to the <input> element to announce the correct role for this field.

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

• <div> element with role=”listbox” and a 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 combobx.

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

For details on implementation, please see this example → https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-autocomplete-list.html

Screenshot

Workaround

Not Available

Bug Ref: 460838