SelectCheckboxMenu: Update accessibility

[Rene-Stoeckel]

Description

When the SelectCheckboxMenu is used with screenreaders the following issues can be observed:

1. The widget is attributed with role="combobox", but neither supports the typing of text nor navigation with arrow keys, as
   expected in the official "Combobox Pattern | APG | WAI | W3C", see https://www.w3.org/WAI/ARIA/apg/patterns/combobox/
2. The element with the fokus is marked with readonly="readonly", although it is intended to be changed.
3. The subelements are marked with aria-hidden=true so that the screenreader does not read them when navigating via tab.
4. The items in the SelectCheckboxMenu are labelled in a way so that their label is read twice by the screenreader and their role is read four times by the screen reader.
5. When the popup list is opened the fokus is not set on the popup list but remains on the input.

For reference: The Primefaces SelectCheckboxMenu is rendered into the following structure:

<td role="gridcell" class="ui-panelgrid-cell">
	<label id="main:j_id_28" class="ui-outputlabel ui-widget" for="main:status_focus">
		<span class="ui-outputlabel-label">Status:</span>
	</label>
</td>
<td role="gridcell" class="ui-panelgrid-cell">
	<div id="main:status" class="ui-selectcheckboxmenu-multiple ui-selectcheckboxmenu ui-widget ui-state-default ui-corner-all" role="combobox" aria-haspopup="listbox" aria-expanded="false">
		<div class="ui-helper-hidden-accessible">
			<input id="main:status_focus" name="main:status_focus" type="text" readonly="readonly" role="combobox" aria-hidden="true" aria-controls="main:status_panel" aria-expanded="false">
		</div>
		<div class="ui-helper-hidden">
			<input id="main:status:0" name="main:status" type="checkbox" value="ALL" data-escaped="true" aria-checked="aria-checked" checked="checked" aria-labelledby="main:j_id_28">
			<label for="main:status:0">ALL</label>
			<input id="main:status:1" name="main:status" type="checkbox" value="APPROVED" data-escaped="true" aria-labelledby="main:j_id_28">
			<label for="main:status:1">APPROVED</label>
			<input id="main:status:2" name="main:status" type="checkbox" value="CANCELED" data-escaped="true" aria-labelledby="main:j_id_28">
			<label for="main:status:2">CANCELED</label>

Describe the solution you would like

1. Remove the aria role "combobox" as this widget works very differently and
   does not implement the official "Combobox Pattern | APG | WAI | W3C",
   see https://www.w3.org/WAI/ARIA/apg/patterns/combobox/
2. Use a button to trigger the popup list with the elements instead a div.
3. Link this button to the elements by using a aria-describedby attribute on the items.
4. Let the fokus be set to the popup list when it is openened.

Additional context

Primefaces 13.0.1 - 13.0.8.

[melloware]

Hmmm the PrimeVue MultiSelect uses ARIA role combobox see: https://primevue.org/multiselect/#accessibility

Can you try PrimeVue and see if it behaves with the screenreader how you expect it to?

[Rene-Stoeckel]

I have feedback from our tester concerning this primevue multiselect. It behaves much better, but still two issues were reported here:

1. ) the input field that has the role="combobox" is marked read only and screenreaders report it as read only.
2. ) When the fokus reaches this combobox it is always reported as blank (empty). I speculate that the value attribure of the input must be set according to the selected elements, e.g. value="New York, London".

[melloware]

Great that is helpful. I will take a deeper look.

[melloware]

@Rene-Stoeckel can you have your team test this one:
pf-11850.zip

1. Focus is on popup now
2. READONLY removed from Focus trap
3. Focus trap is updated with the current selections

[Rene-Stoeckel]

Here is some feedback with JAWS on the demo pf-11850.zip:

1. The popup opens with space or enter or alt+cursorDown, but not cursor-down or cursor-up as defined in the combobox pattern and expressed by the screenreader.
2. The fokus is set to the popup item list when it is opened.
3. Navigation is possible via tab and shift-tab, but cursor up and down should be used primarily according to the combobox pattern.
4. The selection/deselection of items only works with shift-space where screenreader correctly confirms the activation or the deactivation of a checkbox. When using space only (or enter) the item gets activated visually, but the screenreader gives no confirmation and reports the item as deactivated when navigating back. I'ts unclear if this is a JAWS issue, but it's not observed on the primevue multiselect.
5. When navigating from each item to the other via tab the screenreader reads the label of the item and the state, but not the number of the item and the out of total number as expected and shown in the primevue demo.
6. Once the fokus is on the closer icon, then its possible to step through the options with the cursor keys so that this cursor keys navigation does not scroll the currently focussed item into visibility on the popup panel, in contrast to tab (checkbox to checkbox) navigation. It's also not clear if this is a JAWS issue because it seems to add this kind of cursor key navigation due to the missing cursor-keys handling.
7. The screenreader correctly reads the selected items of the combobox when the popup is closed, but on the screen only "Item(s) Selected" is displayed and the labels of the items are not there.

To summarize, it's an improvement (2 and 7). It's unclear if the focus trap is a problem, because the primevue multiselect navigation works as expected with the screenreader even though the fokus stays on the same input all time there as well. JAWS probably just deals fine with it because of the correct use of the aria attributes.

[melloware]

Great feedback! Let me see if I can fix a few more of these like the cursor handling and better keyboard support.

as for #7 i always make the screen reader value all the selected values. the visual display of "Item(s) Selected"" is because of the property selectedLabel="Item(s) Selected" i wasn't sure if you wanted that to override the "selected" value for visually impaired users?