psa-systems/mokosh-apps
Watch
9
0
Fork
You've already forked mokosh-apps
 0
Code Issues Pull requests 1 Projects Releases 14 Packages Wiki Activity Actions

fix(a11y): hide mobile sidebar drawer from AT when closed (MAPPS-285) #291

Merged
YousifShkara merged 1 commit from fix/MAPPS-285-duplicate-sidebar-nav into main 2026-06-21 07:13:24 +02:00
Conversation 0 Commits 1 Files changed 1 +13
YousifShkara commented 2026-06-21 07:13:20 +02:00
Owner
Copy link

The off-canvas mobile drawer was always in the DOM, slid out via -translate-x-full for the slide-in animation. lg:hidden removed it from the accessibility tree at the lg+ breakpoint (CSS display: none), but at smaller viewports the drawer was still semantically visible: a screen-reader user heard the whole nav menu a second time after the desktop sidebar at the breakpoint edge, and tabbed through duplicate links. Bind aria-hidden to open so the drawer is exposed to assistive tech only while the user has actually opened it. The desktop sidebar's hidden lg:flex already covers the inverse case via display: none. Same pattern Material UI's Drawer and HeadlessUI's Dialog.Panel use.

#MAPPS-285

The off-canvas mobile drawer was always in the DOM, slid out via `-translate-x-full` for the slide-in animation. `lg:hidden` removed it from the accessibility tree at the lg+ breakpoint (CSS `display: none`), but at smaller viewports the drawer was still semantically visible: a screen-reader user heard the whole nav menu a second time after the desktop sidebar at the breakpoint edge, and tabbed through duplicate links. Bind `aria-hidden` to `open` so the drawer is exposed to assistive tech only while the user has actually opened it. The desktop sidebar's `hidden lg:flex` already covers the inverse case via `display: none`. Same pattern Material UI's `Drawer` and HeadlessUI's `Dialog.Panel` use. #MAPPS-285
fix(a11y): hide mobile sidebar drawer from AT when closed (MAPPS-285)
All checks were successful
Create release / Create release from merged PR (pull_request) Has been skipped
Details
Check / clippy + fmt + tests (pull_request) Successful in 1m15s
Details
1fc7a36d17 
The off-canvas mobile drawer was always in the DOM, slid out via `-translate-x-full` for the slide-in animation. `lg:hidden` removed it from the accessibility tree at the lg+ breakpoint (CSS `display: none`), but at smaller viewports the drawer was still semantically visible: a screen-reader user heard the whole nav menu a second time after the desktop sidebar at the breakpoint edge, and tabbed through duplicate links. Bind `aria-hidden` to `open` so the drawer is exposed to assistive tech only while the user has actually opened it. The desktop sidebar's `hidden lg:flex` already covers the inverse case via `display: none`. Same pattern Material UI's `Drawer` and HeadlessUI's `Dialog.Panel` use.

#MAPPS-285
YousifShkara deleted branch fix/MAPPS-285-duplicate-sidebar-nav 2026-06-21 07:13:24 +02:00
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
YousifShkara
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference
psa-systems/mokosh-apps!291
No description provided.