SelectCheckboxMenu: Update accessibility

[Rene-Stoeckel]

SelectCheckboxMenu: Update accessibility

[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]

PR is welcome...

[melloware]

@Rene-Stoeckel i may be able to help with this one.

[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?

[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?