Issue Description

The role is not provided for the “Directory” custom combobox. In addition, a label is not associated with the mentioned combobox.

Steps to Reproduce

1. Open the homepage 
2. Navigate to the "User" link and activate it.
3. Try to access the “Directory“ custom combobx with a screen reader on

Screenshot:

Actual Behaviour

The role is not provided for the “Directory” custom combobox. In addition, a label is not associated with mentioned combobox.

Following problems found with custom combobox →

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

1. The visible label is not associated with this combobox.

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

1. 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 result

1. Making custom combobox accessible →

• role="combobox" and aria-autocomplete="list" 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 combobx.
• aria-activedescendant property to the <input> element having value as id property of <li> element

• A visible label such as “Directory” should be associated with the Combobox using the “for“ and “id” attribute.

For details on implementation, please see this example → !https://www.w3.org/favicon.ico!Select-Only Combobox Example

Workaround

Not Available

Bug Ref: 359922