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:
2026-06-03 04:12:27 +02:00
parent ecbcdea814
commit eca624ee9d
5 changed files with 37 additions and 22 deletions

View File

@@ -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