fix: accessibility for closing hamburger menu with keyboard #8674
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
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## master #8674 +/- ##
==========================================
- Coverage 15.96% 15.93% -0.03%
==========================================
Files 89 89
Lines 4710 4718 +8
Branches 821 823 +2
==========================================
Hits 752 752
- Misses 3449 3455 +6
- Partials 509 511 +2 ☔ View full report in Codecov by Sentry. |
cdrini
requested changes
Jan 15, 2024
There was a problem hiding this comment.
Nice, thank you @TanyaPina ! One UX/Accessibility change to the approach for focus out 👍
cdrini
added
Needs: Submitter Input
for more information, see https://pre-commit.ci
cdrini
added
Needs: Submitter Input
|
Hey @TanyaPina ! Are you still working on this one? Anything we can do to help knock it over the finish line? |
cdrini
removed
the
Needs: Submitter Input
cdrini
removed
the
On testing.openlibrary.org
cdrini
approved these changes
Apr 26, 2024
cdrini
reviewed
Apr 26, 2024
Comment on lines
446
to
456
| $('.header-dropdown').on('keydown', function (event) { | ||
| if (event.key === 'Escape') { | ||
| $('.header-dropdown > details[open]').not(this).removeAttr('open'); | ||
| } | ||
| }); | ||
|
|
||
| $('.dropdown-menu').each(function() { | ||
| $(this).find('a').last().on('focusout', function() { | ||
| $('.header-dropdown > details[open]').not(this).removeAttr('open'); | ||
| }); | ||
| }); |
There was a problem hiding this comment.
Oh I see the one's above do this 😅 We also shouldn't be using .not(this) here, since we actually do want to close this!
merwhite11
pushed a commit
to merwhite11/openlibrary
that referenced
this pull request
May 2, 2024
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.
Closes #7917
Issue: The user hamburger menu being unable to be closed through keyboard use, resulting in a menu that remains open even when focus is outside of it.
This PR fixes this issue by enabling the user to exit header dropdown menus with the press of the Escape key. Additionally, it traps focus in the hamburger menu list by cycling through the list items until the user chooses to exit the menu with the escape key.
Technical
While this PR applies escape key functionality to header dropdown menus, it currently fixes the focus issue within the hamburger dropdown menu specifically. A limitation with this fix would be if the user is in the last menu item and shift+tabs to go backwards, which results in them going to the first menu list item instead of the penultimate.
Testing
Screenshot
Loom video to show keyboard behavior:
https://www.loom.com/share/9f35dffdc8dd435f82a991f5be22db2a?sid=2cece70d-9271-494a-b81c-40822c6d5b85
Stakeholders