Improve keyboard navigation/general a11y 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 argh posted in the wrong tab and issue. apologies.

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. the solution for that would be adding an "apply" button to the multiselect element, so the user first has to check and uncheck all the desired checkboxes and then press the apply button.

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

voiceover disabled

1. Expanding the multiselect element by pressing return should be removed again. The multiselect should be expanded by pressing space so that is it inline with the other three select elements.
2. When the multiselect is expanded it shouldnt be collapsed and the focus moving to the security advisory coverage select element. the multiselect element should remain expanded and pressing tab should have no effect, so the behavior is inline with the other three select elements. you only collapse the multiselect by pressing the esc key.
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 when voiceover is enabled.
4. The checkbox state if a checkbox is checked is announced properly

The striked off points means that these issue existed and are fixed as a part of the MR.

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 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 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.

I've taken another look at the current state of the MR. Overall it looks quite solid, there are a few details i've noticed in no particular order:

1. if you have voiceover active and the muliselect is expanded and the focus is on the unchecked access control option and you press VO space in safari, instead of checking the category the checkbox remains unchecked and voiceover announces that it is an unchecked checkbox another time. in firefox and edge i am able to properly check and uncheck checkboxes by pressing VO space.

2. if you have voiceover on and you scroll the categories down until the end with the arrow down key in safari, the list collapses as soon as the last option is passed. that behavior does not happen with voiceover switched off in safari. in firefox and edge it does not happen no matter voiceover is enabled or disabled.

3. one detail in general, i've compared again the general behavior of select lists, went to admin/config/regional/language/add, and there if you reach the end of a list you automatically jump back to the top of the list and the other way around, if you reach the top of the list (by arrow up) you jump to the last item if you keep scrolling by the arrow key. so i wonder if the multi select should mirror that behavior as well?

in regard of #26 . what would be the recommended approach to switch to the prior commit? the commit_hash for the prior commit i could get with git log but what would be the best way to switch to it and being able to compare the two states? https://stackoverflow.com/a/4940090 suggests creating a branch?! the other suggestion by simply checking out the commit_hash here https://stackoverflow.com/a/30988318 would lead to a detached head? before i do anything wrong i thought i better ask.

Re #28.1 I just tested it on safari browser but i was not able to reproduce what is mentioned.I am attaching the screen recording for the same demonstrating how it works on my local.

I have addressed all the feedbacks on #28.Hope all the stuff on this are now done.@rkoller can you review this once again?

thank you! #28.1 and #28.2 looks good and fixed now, excellent!

- about #28.3 there is one detail i've just realized when retesting. when you get to the end of a list by pressing arrow down and then immediately continuing on top and the other way around when you press the up arrow and when reaching the first option and then you immediately continue from the bottom only applies when voice over is enabled. with voice over disabled on select lists you dont jump to the other end of the list and continue, you just stop.

- there is one detail that is potentially confusing and sending mixed signals for sighted screenreader users when voice over is enabled. when you tick a checkbox the voiceover cursor jumps ahead, sometime by one sometimes by more options, but the focus remains on the option a user just ticked and often moves back to the option in focus. so the focus and the voice over cursor are not in sync that way? (vo_cursor.mp4)

and could you provide me some advice how to best switch between commits? at the moment i am uncertain how to compare the two approaches you'Ve mentioned illustrated in the two different commits. but i've recorded another video to illustrate the aural interfaces of the multiselect and the select (popup_and_summary.mp4). for one you know when interacting with the select that you have a popup button so something will "show up" while for the multiselect you only have a "group" which doesnt provide much context about the inherent functionality. and for the select you get the summary with the number of available options while for the multiselect you have nothing.

Re #31:

about #28.3 there is one detail i've just realized when retesting. when you get to the end of a list by pressing arrow down and then immediately continuing on top and the other way around when you press the up arrow and when reaching the first option and then you immediately continue from the bottom only applies when voice over is enabled. with voice over disabled on select lists you dont jump to the other end of the list and continue, you just stop.

I am not able to reproduce this atleast in Chrome and Safari browser.The arrows work fine for me in both the cases.

and could you provide me some advice how to best switch between commits

I usually use git log to get the commit and checkout that commit id which i want to test.

as mentioned on slack i gonna discuss a few aspects of the MR in today a11y call, but wanted to provide two videos about another detail i've noticed testing the MR today. if you have voiceover active and the multi select expanded in case you are navigating the voiceover cursor by the left and right , if you reach the end of an option label the multi select collapses silently (see the two videos).... if you are using VO arrow left or right the voice over cursor steps through the the checkboxes and the checkbox labels.

created a follow up about the adjustment of the multi select to the aural interface of the select element #3498311: Mimic the aural interface of the select element for the multi select div

Fixed the issue mentioned in #33.Ready for reviews.

awesome thanks! i can confirm with voiceover active and if you are pressing the arrow left or right repeatedly the dialog isnt collapsing anymore.

but while testing i found another small detail :( in the video after the dialog is open i navigated with arrow down first. then with VO-arrow up, that way i was able to get out of the dialog.. but after pressing arrow down again the cursor was again inside the dialog. with VO arrow right at the end of the dialog you get outside dialog but in this case the dialog collapses.

the other small nitpick, not sure if it is a regression. on the select element with voiceover deactivated and you navigate with arrow up and down if you reach the end of the option list you dont jump to the start and same the other way around. that circling that you jump to the start from the bottom and to the bottom from the start is only with voiceover active. at the moment with the MR that looping is with voiceover activated and deactivated ( if that is tricky that might be also moved to a follow up)

Can we do that in a follow-up as it might take some time and i think the remaining part of the issue is fixed and might be delayed due to that small regression.
What are your thought @rkoller?

i'Ve already opened a follow up for the mimic the select element issue. the small regression would also be fine with me to move it into a follow up . the behavior with VO-arrow left and right i dont know on the other hand. it "might" be ok in a follow up as well. not sure how many screenreader users are using project browser at this point. i just have a bad feeling to commit with that kind of known problems. but on the other hand the MR improves the keyboard experience significantly. i dont know, maybe that is why i dislike deadlines ;) let chris decide.

direct links to the follow ups are:

#3498311: Mimic the aural interface of the select element for the multi select div
#3498569: voiceover cursor moves out of the multiselect
#3498573: minor regression between navigation a multiselect and a select element