fix(menubar): restore focus to menu trigger when Escape is pressed #11
Conversation
This file contains hidden or 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
When users press Escape to close a dropdown menu, focus now properly returns to the menu trigger button that opened it. This prevents keyboard users from losing their place in the navigation and ensures compliance with WCAG 2.1.2 (No Keyboard Trap). The fix also changes the keydown listener from component-level to document-level to ensure Escape works regardless of where focus is within the dropdown menu.
6 tasks
Collaborator
Author
|
Note: This PR also resolves issue #122 (WCAG 1.4.13 - Content on Hover or Focus). The same fix addresses both:
Evidence for issue #122: https://app.workback.ai/dashboard/issue/122/ |
Collaborator
|
Looks good to me. |
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.
Summary
Fixes WCAG 2.1.2 (No Keyboard Trap) by ensuring that when users press Escape to close a dropdown menu, focus returns to the menu trigger button.
Issue: When keyboard users opened a dropdown menu (e.g., "Per chi insegna", "Giuridico") and pressed Escape to close it, focus was lost, leaving users disoriented and requiring them to tab through the entire page again to return to the menu.
Solution:
setTimeout(0)to defer focus until after Stencil's render cycle completesevent.preventDefault()to prevent default Escape behaviorTest Plan
Evidence
Resolves issue #127: "Escape key fails to close 'Per chi insegna' dropdown menu"
View full audit details: https://app.workback.ai/dashboard/issue/127/
WCAG Reference: 2.1.2 No Keyboard Trap