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; |
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 😄
There was a problem hiding this comment.
This will not be a concern. The user would have to tab at the exact moment the sidebar is closing to hit the brief window where elements are still focusable. Adding inert or JS-based tabindex toggling adds complexity for a very unlikely case.
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
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://victorious-plant-05c166c10-3530.centralus.5.azurestaticapps.net |
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.