Issue Summary

On the help center, the "Change type" combobox present inside "Upgrade or change a managed system" request form is inaccessible for screen reader users.

Note: Similar issue is observed for combobox such as "change risk", "change reason",  etc & these types of comboboxes are present throughout the help portal.

Steps to Reproduce

1. With screen reader turned on, navigate to the "Request portal"
2. Navigate to "Applications" tab & go to "Upgrade or change a managed system" link
3. Navigate to the combobox such as "Change type" & try to use up/down arrow keys to navigate through options inside it.

Actual Results

While navigating with screen reader, when user navigate to the "Change type" combobox & the label & role of "combobox" is not announced by the screen reader. Also when user press up/down arrow keys to navigate through options the screen reader doesn’t announce them. 

The combobox is created using custom elements such as <a> & <div> etc & they don’t have appropriate ARIA role, state & properties of combobox. In the code native dropdown code is also available but it is hidden from the Keyboard & screen reader users.

This makes screen reader users difficult the access the element effectively.

Screenshot

Expected Results

When screen reader user tabs into the "Change type" input field the role of combobox should be announced along with the visual label of the element.

Also screen reader should announce the options when user press up/down arrow keys to navigate & when presses enter it should select the focused option.

Apply following changes in the source code.

• Provide aria-hidden="true" & tabindex="-1" to following elements to hide them from Keyboard & screen reader users.
  • <div id="s2id_customfield_10104">
  • <input id="s2id_autogen2">
• Remove tabindex="-1" attribute from <select id="customfield_10104"> element to make it focusable for Keyboard & screen reader users.
• To maintain the visual focus, provide a focus indicator to <a class="select2-choice"> element as soon as the <select id="customfield_10104"> element receives keyboard focus.

Alternatively as a best practice refactor the combobox component as per ARIA practices to have all the relevant roles, state & properties of the combobox component.

Refer to the below links for more Information about the Accessible combobox implementations.

https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-autocomplete-list.html 

https://aui.atlassian.com/aui/latest/docs/single-select.html 

Workaround

Currently there is no known workaround for this behavior. A workaround will be added here when available