fix(web): sidebar a11y P1 + compact/expanded toggle polish#1
Open
fix(web): sidebar a11y P1 + compact/expanded toggle polish#1
Conversation
Closes panvex-17w, panvex-asb, panvex-atn: - bump rail to w-16 + buttons to h-11 w-11 so the sidebar, theme toggle, and logout meet the 44pt/48dp touch-target minimum. - add aria-label and aria-current="page" to icon-only nav buttons; reveal the visual tooltip on group-focus-within so keyboard users see labels. - distinguish the active item with a 2px accent left bar so the cue is not color-only (WCAG 1.4.1). - name the <aside> + <nav> landmarks as "Primary"; expose the full brand name to AT (visible glyph stays the initial). Also adds focus-visible outlines to the sidebar buttons + theme toggle.
- BottomNav: aria-label="Primary", aria-current/aria-label per tab, active:scale-[0.97] press feedback, focus-visible outline. - BottomNav: cap mobile tabs at 5 (Dashboard, Servers, Fleet groups, Clients) with overflow (Activity, Settings, Profile) behind a "More" bottom sheet. Sidebar still renders the full list on desktop. - Logout: gate handleLogout behind ConfirmProvider's useConfirm to prevent accidental cache wipes from a 44px target adjacent to the theme toggle. - Sidebar: center the footer (theme toggle) and hide the rail's scrollbar via [scrollbar-width:none] [&::-webkit-scrollbar]:hidden. Closes panvex-6kg, panvex-b62, panvex-9ph. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
ThemeToggleButton now uses Lucide Sun/Moon icons (w-5 h-5) and text-lg to match the nav buttons and the LogOut button. The two sidebar-footer wrappers (theme + logout) now share the same shell: py-3 border-t border-border w-full flex justify-center, so both buttons sit on the same horizontal axis as the nav items above. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
- Sidebar grows to w-56 (224px) when expanded with item labels next to icons, or stays at w-16 as the icon rail. Brand area shows a chevron toggle that flips between Collapse / Expand. Tooltips render only in compact mode. - AppShell persists the preference in localStorage under panvex.sidebarExpanded and animates main content margin (md:ml-16 ↔ md:ml-56) with a 200ms width transition. Mobile (<md) is unaffected since the sidebar is hidden there and BottomNav drives navigation. - Fix horizontal scroll: the active-item indicator used before:-left-3 (-12px) which sat 2px outside the 64px rail and made the body scroll. Replaced with -left-[10px] so the bar lands flush with the rail edge, and added overflow-x-hidden on the AppShell wrapper as a belt. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
…oltip - ThemeToggleButton accepts `expanded` and matches Log out layout in full sidebar mode (gap-3 h-11 px-3) instead of an icon-only square. - AppShell threads sidebar `expanded` to the footer slot via render-prop so the theme toggle stays in sync with the rest of the rail. - Sidebar tooltips switch to inverted tonal pair (bg-fg / text-bg) so the compact rail's tooltip stays legible against the page background in dark mode (the prior bg-bg-card-hi blended with --panvex-bg).
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
1 participant
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.
Summary
P1 batch of sidebar/UX fixes on the dashboard shell. All five commits work together; the last one is the polish pass after the bigger changes landed.
aria-current,aria-expanded, focus-visible outlines, screen-reader brand label, focus management on logout (da210c9,0d02716).localStorage(panvex.sidebarExpanded); chevron toggle on the brand header (7878fde).7878fde).43f5b4c,fa08db2).bg-bg-card-hi(which blended with--panvex-bgin dark mode) to inverted tonal pairbg-fg / text-bg(fa08db2).0d02716).Test plan
npx tsc --noEmitcleannpm run lintclean--panvex-bg🤖 Generated with Claude Code