Asset View : Combobox is missing appropriate roles and attributes.

Issue Summary

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

Element name:

• Jira filter

Location of the element: Combobox, in the "Connected tickets" tab section content, in the main content.

Note: The same issue applies to the "All actors" Combobox, in the "History" tab section content, in the main content.

Steps to reproduced 

1. Open the homepage
2. Navigate to the "Assets" link and activate it
3. Navigate to "Search for object" and activate it
4. Navigate to the input field and search for the object
5. Navigate to the links present in the table and activate it
6. Try to access the “Jira Filter“ custom combobox with a screen reader on

Actual Results

The role is not provided for the “Jira Filter” 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 role of combobox.
2. There is no accessible name for this combobox.
3. role=”option” is missing for combobox options.
4. The accessible name for this combobox is not announced for screen reader users.

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

Expected Results

Making custom combobox accessible →

1. role="combobox" and aria-autocomplete="list" to the <input> element to announce the correct role for this field.
2. aria-expanded property to the <input> element and toggle its value programmatically to true/ false depending on the expanded/ collapsed state of combobox.
3. <div> element with role=”listbox” and a unique id.
4. “aria-owns” attribute to <input> element having value of id property of <div> element.
5. role=”option” and unique id to the <div> elements present for options present for combobx.
6. aria-activedescendant property to the <input> element having value as id property of <li> element
7. A visible label such as “Jira filter” should be provided for Combobox using <label> element. Additionally “for“ and “id” attribute should be used to associate the label with its corresponding input field.
8. If visible label is not feasible option then provide the label via "aria-label" attribute or off-screen <label> element.

For details on implementation, please see this example → https://www.w3.org/favicon.icoEditable Combobox With List Autocomplete Example

Screenshot

Workaround

Not Available

Bug Ref: 746820

Bulldog Ref: