Improve keyboard navigation for categories dropdown

One detail i've mentioned in the parent issue that still applies. if the category multi select is expanded and you tab the multi select closes while if one of the other three select fields are expanded tabbing has not effect and the user remains within the expanded select list.

I am working on this issue. Assigning it to myself.

This has been resolved. I have raised a merge request for the same.
Added video for reference.

I've tested MR566 on 11.x on macOS 14.7 and voiceover. A few observations.

1. about adding the ability to open the multi select by pressing return. that is not really in line with the behavior of the other three select fields in the filter fieldset (return.mp4). the category multi select is opened by pressing space and is also opened by pressing return. the other three are only opened by pressing space.
2. if you keep the down button pressed close to the end of the list the focus outline looks odd and then the focus branches out of the multi select and the multi select collapses (see the end of rotor.mp4)
3. another detail with the multi select or the select expanded. with the multiselect expanded if you are pressing tab the multiselect collapses while with the others by pressing tab nothing happens. you are only able to navigate by pressing the up and down arrow key. the left and right has no effect for the multiselect nor the normal selects
4. with voiceover active and if you are opening the the multiselect, two things happen, the first item gets auto selected and you get the entire list of category names announed in a row, which is simply overwhelming (vo_space.mp4)
5. all select fields are popup button the multiselect is only a regular button. plus the select fields announce as soon as the select field is expanded "menu 2 items". that way the user knows the selectfield is expanded and how many items it includes that is missing for the multiselect in the aural interface. (popupmenu.mp4)

I agree with Ralf, pressing Enter is not a standard way of opening a drop-down, and I think it could cause confusion to add it here.

Space, and alt+down arrow both open it, which is consistent with other drop-down controls on Windows and Linux. I think the equivalent on a Mac might be command+down, but I'm not a Mac user, so that could be worth confirming and adding.

The focus issues up and down are also worth investigating.

The voiceover behaviour sounds like a serious accessibility concern, so we should prioritise fixing that. I've not sure how we do that in JS.

it is not cmd arrow down but option arrow down(option is the name for alt on mac). and james are you on windows or linux or do you have both? cuz would be also interesting how the behavior in nvda on windows and or orca on linux is?

And one additional detail. the toggle button border has #d3d4d9 as the color. against white background that leads to a color contrast of only 1.5:1... SC1.4.11, to recognize the button, would require at least 3:1

Can someone check if Option+Down opens it on Mac, please? If it's equivalent to Alt, I'm hopeful it might already be covered.

I mainly use Linux, so I'll test Orca.

If anyone can test on Windows, that would be awesome.

lol i've actually manually tested your statement ;) i should have added that detail to my comment as well. so option-arrow down expands the multi select as well, same as all the three others.

and awesome, thanks for giving orca a spin!

Hi @rkoller, It would be grateful if you could update the issue summary and provide the acceptance criteria for this issue. 🙏

Added a first draft of the proposed resolution, trying to summarize the points raised within this issue. plus added the point about testing additional screenreaders in the remaining tasks section.

and one thing i still wonder but am unsure if it should be in the scope of this issue or in a follow up. at the moment there is a new query every time a checkbox is checked or unchecked on the multiselect element. first that is sort of an additional unnecessary load on d.o plus on every submitted query there is an immediate reload which might not be inline with SC3.2.2 https://www.w3.org/WAI/WCAG22/Understanding/on-input.html since it is not necessarily expected that there is a reflow on the check/uncheck.

Let's leave the apply for a separate issue (it already is - 📌 Consider adding Apply and Clear buttons to Categories dropdown Active )

The current remaining tasks are to (1) test in NVDA, Voiceover, Jaws, and Orca and then (2) update the issue summary with a list of fixes that are in scope for this issue.

So the latest state of the MR is as follows:-

voiceover disabled

3. if you keep "arrow down" pressed the focus scrolls down close to the end, it should not display more than one checkbox in focus at the same time and should smoothly scroll to the last option.(I Can't reproduce this)

voiceover enabled

1. expanding the multiselect element by pressing VO space should not auto select the first option “access control”. pressing VO space should only expand the multi select.(I Can't reproduce this)
2. when the first option is auto selected it should not announce every available category like illustrated in vo_space.mp4(I Can't reproduce this)
3. I am able to scroll at all when voiceover is enabled.(I Can't reproduce this)
4. the checkbox state if a checkbox is checked is announced properly

Marking it NR to get an initial feedback by @rkoller.

I've went through the points you've listed and tested with the latest state of MR566.

VoiceOver switched off:

1. ✅ i can confirm, i am unable to expand the multi select dialog by pressing the return key, only by space. works as expected now, excellent!
2. ✅ i can confirm, tried to hit tab while the multi select dialog was expanded and the dialog remained expanded and wasnt collapsed anymore. fab!
3. i just kept the arrow down key or arrow up key pressed, that way you saw several focus outlines at once while scrolling (arrow_down.mp4)

VoiceOver turned on:

1. & 2 when the multiselect was in focus i pressed VO-space to expand the multi select dialog. that way you see the first option got auto selected and the entire list of categories announced. i then noticed something else. i pressed esc to close the dialog. when i pressed VO-space again the previously ticked checkbox got unticked and all categories announced. again esc and again VO-space the first option got reticked. (see On_Off-Wall-Of-Text.mp4). the dialog should be expanded but the state of the first checkbox not changed.
3. ✅ i am unable to reproduce. I "guess" that was due to an accidental misconfiguration of voiceover that i just figured out a few days ago
4. if you move up and down the multi select list you notice the checkbox label is not announced as well as the current checkbox state same as if you change the checkbox state the new state is also not announced (checkboxes.mp4)
5. and one additional detail i got reminded to. if you expand the select list field you get the announcement of a summary which does not happen/exist for the multiselect fields (summary.mp4). in the example you see and hear that select list fields are labeled as pop up buttons while the multi select is just a button. and when expanded the select list field announces that it is a menu with 2 items for the multi select that does not exist in the aural interface.

I have attached a video of how VO works on my system.Following are the things that work fine for me (I am not sure if i am missing some settings or there is a version conflict):-

1) If i press VO space then the first checkbox is not getting selected automatically.
2) Entire list of categories is not getting announced.
3) As we navigate through the list of options it correctly announces the state of the checkbox along with the label.

@rkoller please suggest if there is something that i am missing.

well i think i know what we've both missed. i suppose you are testing with either firefox, chrome, edge or something alike, aren't you? ;) the videos i've done in #20 📌 Improve keyboard navigation for categories dropdown Active were created in safari (which is the default browser i use on macos). i've created a comparison video (comparison.mp4) with safari 18.1 on the left, firefox 132.0.2 in the middle and edge 130.0.2849.80 on the right on macos 14.7.1

so based on the points in #20 📌 Improve keyboard navigation for categories dropdown Active i went through everything again,and tagged the given points either "working" (either fixed or a none issue) or NW (needs work).

voiceover switched off
1. safari: working firefox: working edge: working
2. safari: working firefox: working edge: working
3. safari: NW firefox: NW edge: NW

voiceover switched on
1&2. safari: working firefox: working edge: working
3. safari: working firefox: working edge: working
4. safari: NW firefox: working edge: working
5. safari: NW firefox: NW edge: NW

One other aspect i've completely forgot about testing and mentioning is the support of home and end keys as well as the support of the page up and page down keys. both work when the multi select is expanded and in focus. but the detail that is not working is, that the checkbox focus remains on the access control checkbox. confusing for a keyboard user. in particular if you press the end key after the multi select got expanded and then you press the up key. you dont see any focus outline until the first checkbox is reached. and if you then press arrow down the focus outline moves and follows the keyboard input. the point about home and end buttons was raised by @drupa11y.

Re #23
With voiceover switched on now all the things mentioned are resolved except 5 which i am not sure whether we want to do that as the 2 elements are different in nature.
I have tested everything else on Safari and chrome and it works fine in these two browsers.It would be helpful if you can have a look at this once again @rkoller and verify the changes.
Marking it NR.

In this commit we can simply replace the role to menu and the sub div's role to menuitem if we want the multiselect filter to behave like the other filters but the problem is that it focuses on the whole div instead of the checkbox.I am pushing the changes with the above suggestions but someone testing this might switch to prior commit to see another version of this MR.