fix: suppress PrimeVue default drawer close button to fix focus a11y
Review follow-up (crewli-reviewer). With header:'!hidden' the default close button was still mounted (display:none); PrimeVue Drawer.focus() falls back to focusing it (no [autofocus] in our slots), a no-op that strands keyboard focus behind the overlay. Set :show-close-icon="false" so the button is never created — focus() no-ops cleanly and v-focustrap focuses the visible brand-row X. Also: flip the previously tautological showCloseIcon test to assert the decision (toBe(false)); align the mobile close aria-label to English 'Close menu' (matching 'Collapse sidebar') for locale consistency. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -697,10 +697,13 @@ Resolved on branch `feat/mobile-shell-parity`:
|
||||
forces the header expanded on mobile.
|
||||
- **Extraneous X (defect 2):** PrimeVue's default drawer header X leaked through
|
||||
the non-important `header: 'hidden'` (it lost to the base `.p-drawer-header`
|
||||
display in stylesheet order) and overlapped the brand row. Force-hidden with
|
||||
`header: '!hidden'`; the mobile close affordance now lives in `SidebarHeader`'s
|
||||
brand row (an X / "Sluit menu", reusing the existing handler) — a single
|
||||
non-overlapping control mirroring the desktop collapse-chevron slot.
|
||||
display in stylesheet order) and overlapped the brand row. Now suppressed at
|
||||
the source with `:show-close-icon="false"` (also avoids an a11y trap: with the
|
||||
button merely display:none, `Drawer.focus()` falls back to focusing it and
|
||||
strands keyboard focus) plus `header: '!hidden'` to collapse the empty band.
|
||||
The mobile close affordance lives in `SidebarHeader`'s brand row (an X /
|
||||
"Close menu", reusing the existing handler) — a single non-overlapping control
|
||||
mirroring the desktop collapse-chevron slot.
|
||||
- **WorkspaceSwitcher (defect 3):** static audit (code + `@primeuix` base CSS)
|
||||
showed the drawer content is already a correct full-height flex column
|
||||
(`.p-drawer-left .p-drawer-content { height:100% }` + `flex-grow:1`), so the
|
||||
|
||||
Reference in New Issue
Block a user