voiceover cursor moves out of the multiselect

Created on 9 January 2025, 3 months ago

Problem/Motivation

Followup for 📌 Improve keyboard navigation for categories dropdown Active

vo-arrow.mp4 illustrates a problem navigating the multiselect by VO-arrow left and right with voiceover active. in the video i first navigate down the multiselect with arrow down. i then use VO arrow left and move the voiceover cursor stepwise alternating between category label and corresponding checkbox. problem is after i pass the checkbox of the first option instead of stopping i am moving outside the dialog. the dialog remains expanded, and when i press arrow down again the focus get back inside the multiselect. when i try the same at the end of the multi select list and navigate there with VO arrow right the voiceover cursor moves outside the dialog as well but in this case the dialog collapses.

Steps to reproduce

navigate the multiselect by arrow up and down as well as VO arrow left and right and try to reach past the start or the end of the multiselect list.

Proposed resolution

prevent that the user is able to step outside the dialog while it is expanded by pressing arrow left or right

🐛 Bug report
Status

Active

Version

2.0

Component

User experience

Created by

🇩🇪Germany rkoller Nürnberg, Germany

Live updates comments and jobs are added and updated live.
  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

Sign in to follow issues

Comments & Activities

  • Issue created by @rkoller
  • 🇮🇳India utkarsh_33

    I think this issue was fixed in this commit..
    I manually tested this in chrome and safari but i cannot reproduce the issue on the latest 2.0.x.
    @rokoller can you again check if this issue still persists?If yes can you specify the browsers in which you can reproduce this issue?

  • 🇩🇪Germany rkoller Nürnberg, Germany

    the commit you've referenced is about something else, probably the commit was fixing #3458844-33: Improve keyboard navigation/general a11y for categories dropdown , but the problem this issue is about is still relevant, otherwise i wouldnt have opened the followup. the issue got raised in #3458844-36: Improve keyboard navigation/general a11y for categories dropdown . i've rested, and the problem persists with voiceover active in safari, edge and firefox on macos. as outlined in the issue summary and the acompanying video. simply activate voiceover, expand the multiselect. first navigate by the arrow down key one or two entries down then use VO-arrow left (VO = ctrl and option) and step back to the beginning of the multiselect dialog. and as you can see in the video the voiceover cursor steps outside the dialog and focuses elements outside the dialog that are located before the dilalog in the DOM. if you then press arrow down the voiceovercursor literally jumps back inside the dialog. the dialog remains open all the time. if you now scroll further down the dialog with the arrow down key and one or two entries before the end use the VO-arrow right button, now. the VO cursor is also reaching outside the dialog, but here the dialog immediatly collapses.

Production build 0.71.5 2024