Issue Summary

Informative (static) content is not readable by a screen reader.

Element Name: status autosuggestion results.
Location of the element: These results will appear when the user activates the "Status" combo box.

Problem that it causes: Screen reader users will not know the combo box results information. In addition, a label is not associated with mentioned combobox.

Steps to Reproduce

1. In the Crowd header section, activate the Directories link.
2. In the Directories, main content area navigate to the Status selection input field and observe the element with the screen reader on.

Screenshot

Actual Results

When the user activates the Status input field, a dropdown is available. The dropdown is inaccessible for the assistive technology users. Additionally, this dropdown menu and the input field is in the form of an editable combobox, but has some missing attributes and labels. Hence this makes it the assistive tech users difficult to access the information and features effectively.

Expected Results

When screen reader users navigate page content, they hear the content in the order of the code in the DOM.

• Code the input feild as a <input> element.
• Provide aria-autocomplete="none in the <input>, Indicates that the suggestions in the combobox popup are not values that complete the current textbox input.
• Provide aria-controls, Identifies the element that serves as the popup.
•  Provide aria-expanded="true/false", Indicates that the popup element is available.
• Provide aria-activedescendant, When an option in the listbox is visually indicated as having keyboard focus, refers to that option, When navigation keys, such as Down Arrow, are pressed, the JavaScript changes the value. Enables assistive technologies to know which element the application regards as focused while DOM focus remains on the input element.
• A visible label such as “Status” should be associated with the Combobox using the “for“ and “id” attribute.

For more Reference: https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-autocomplete-none.html

Workaround

Currently, there is no workaround available.

Bug Ref: 359634