Open
Conversation
navya9singh
added
the
deploy-preview
There was a problem hiding this comment.
Pull request overview
Fixes an accessibility issue in the small-viewport collapsed sidebar where off-screen nav content remained keyboard-focusable by additionally toggling CSS visibility alongside the existing slide animation.
Changes:
- Set the collapsed small-viewport sidebar to
visibility: hiddenby default. - Set
.showsidebar state tovisibility: visible. - Add a
visibilitytransition alongside the existingmargin-lefttransition to keep the slide animation.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
|
|
||
| transition-timing-function: ease; | ||
| transition: margin-left 0.3s; | ||
| transition: margin-left 0.3s, visibility 0.3s; |
Member
Author
There was a problem hiding this comment.
That's what the fix was. Removing it takes it back to the bug, but let me ask copilot 😄
When the sidebar is collapsed on small screens, its interactive elements (links, buttons) could still receive keyboard focus because they were only hidden via margin-left offset. Changes: - Add visibility: hidden to collapsed sidebar state and visibility: visible to the .show state in Sidebar.scss for CSS-level hiding - Use the inert attribute in the JS toggle handler to immediately remove sidebar items from the tab order and accessibility tree on close, eliminating the 300ms transition window where items remain focusable - Move focus back to the toggle button when closing the sidebar - Add a useEffect in the Sidebar component to set inert initially on mobile viewports, with a media query listener for responsive behavior Fixes Bug 2737380 Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
navya9singh
force-pushed
the
navyasingh/bug2737380
branch
from
87d6b9f to
829031b
Compare
Contributor
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://victorious-plant-05c166c10-3530.centralus.5.azurestaticapps.net |
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
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.
When the sidebar is collapsed on small viewports, it was only hidden by moving it off-screen (margin-left: -800px). Elements inside remained focusable, causing keyboard users to tab through invisible items.
Added visibility: hidden to the collapsed sidebar and visibility: visible when the .show class is applied. The visibility transition is synchronized with the margin-left transition so the slide animation still works correctly.
Fixes ADO Bug 2737380
I have verified this manually.