Fix dropdown menu focus loss when using arrow keys with Safari and Voiceover #24186
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
talldan
added
[Focus] Accessibility (a11y)
talldan
requested review from
ajitbohra,
chrisvanpatten,
nerrad,
ntwb and
youknowriad
as code owners
|
Size Change: +28 B (0%) Total Size: 1.15 MB
ℹ️ View Unchanged
|
|
Hi @talldan 👋 This is what I see before the PR:
Focus is unpredictable, jumping between words and is lost after a short time. This is what I see with the fix from this PR:
Focus is predictable and consistent accross all items, and focus was kept inside the dropdown, as expected. |
enriquesanchez
approved these changes
Jul 24, 2020
youknowriad
pushed a commit
that referenced
this pull request
Jul 27, 2020
youknowriad
removed
the
Backport to WP 6.6 Beta/RC
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Resolves the issues with dropdown menus detailed on #18537.
The
NavigableContainercomponent had some specific handling that calledpreventedDefaulton key events. This function call seems to prevent Voiceover from initiating its own navigation from text content.Unfortunately this code was only checking for elements with the role
menuitem, while the More menu also containsmenuitemradios and could also containmenuitemcheckboxelements too.This PR ensures the various kinds of menu items are handled.
The second part is that when pressing left or right arrow keys, Voiceover navigates through characters. This would result in a focus loss, since it Voiceover seems to move focus to the next bit of text outside the menu, and on focus loss the menu closes unexpectedly.
Left and right arrow key presses are now also prevented. This is debatable, perhaps left should only be prevented on the first menu item, and right on the last to prevent focus leaving the menu?
How has this been tested?
Added e2e tests
Types of changes
Bug fix (non-breaking change which fixes an issue)
Checklist: