SelectOneMenu: ARIA compliance

Description

Primeface’s SelectOneMenu simulates a combobox using a div with role="combobox" and a hidden input element (in showcase it has the id j_idt343:option_focus ) for the current selected value. To this hidden input element has the role text is assigned, as colored in the screenshot.

When using a screenreader on a page with such an combobox it reads out

text input with auto-completion empty

This might be a bit confused so let’s get the unproblematic parts ot it out of the way first:

• “auto-completion” comes from aria-autocomplete="list" which is absolutely correct set, see Moz Dev, ARIA autocomplete values
• “empty” comes from a not yet selected value and is updated when selecting one

So this leaves us with the first value “text input”, which comes from the role attribute of the hidden input element and indicates that on the page there is an text input element instead of an combobox.

According to the accessibilty test team at my work this is problematic for users, who are visible impaired.

Describe the solution you would like

Change the role attribute of the hidden input element from text to combobox so screen readers read out “combobox”.

Additional context

No response

[christophs78]

After talking to my disabled colleague, thinking about this issue and comparing with PrimeVue und Angular Material i think we may try to get rid of the focus-input with text=“text”. The other two implementations work pretty fine without this. They assign role=“combobox” to some DOM-element (eg span). See https://github.com/primefaces/primevue/blob/master/src/components/dropdown/Dropdown.vue. (Input only for editable Dropdown, all other cases span via v-if=“editable”, v-else)

[christophs78]

References (one more time):

• https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-select-only.html
• https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/combobox_role