a11y(frontend): bump touch targets, legal line-height, surface Saturn keyboard hint#37
Open
a11y(frontend): bump touch targets, legal line-height, surface Saturn keyboard hint#37
Conversation
…rface Saturn keyboard hint - Apply min-h-11 to the ethstar logo, Propose more repos, Sign in, Sign out, and the hero "browse the repositories" button so every primary control clears WCAG 2.5.5 at 44x44 CSS px. - Bump prose-p/prose-li line-height to 1.7 on /privacy and /cookies articles for a calmer reading rhythm on legal copy. - Add a desktop-only KeyboardHint inside the Saturn section that fades in via a plain-CSS :focus-within rule keyed on data-roving-scope="saturn". The underlying arrow-key roving tabindex and Enter-to-jump behaviors were already wired; this just surfaces the shortcuts so keyboard users discover them. - Cover all three fixes with Playwright regressions: touch-target sizing in accessibility.spec.ts; Enter-jump + hint reveal in saturn-nav.spec.ts.
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Global ⌘K / Ctrl+K palette built on cmdk + shadcn CommandDialog. Capture-phase window keydown so inputs can't swallow it; a header trigger button opens it by click on mouse/touch. Four groups: Navigate (Home/Privacy/Cookies), Account (conditional Sign in/Sign out), Actions (Propose more repos), Repositories (opens GitHub in a new tab — nav-only, no Star action duplicating the chip menu). Lazy-loaded on first open; chunk warmed on idle so first-open feels instant. Palette unmounts when closed so the search input resets naturally on each open. Exposed via CommandPaletteContext so AuthHeader and any other surface can call `useCommandPalette().open()` without prop-drilling. Covered by 16 Vitest unit tests (groups, filtering, callbacks, no-Star invariant) and 6 Playwright E2Es (⌘K from /, Esc, click trigger, Enter-opens-repo with stubbed window.open, Home-from-/privacy navigation, ⌘K on /privacy).
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
Addresses three non-blocking follow-ups from the 2026-04-18 design critique plus a deferred P3:
min-h-11brings each to 44px without changing visual weight./privacy+/cookiesprose getsprose-p:leading-[1.7] prose-li:leading-[1.7]so body copy and lists breathe.use-roving-tabindex.ts/saturn-chip.tsx, but the critique reviewer never found them. A new focus-within-revealedKeyboardHintsurfaces "← → to navigate · Enter to open · Shift+Enter for actions" once any chip is focused.CommandDialog. Four groups: Navigate (Home/Privacy/Cookies), Account (conditional Sign in/Sign out), Actions (Propose more repos), Repositories (opens GitHub in new tab — nav-only, no Star action).How
min-h-11on the five controls (plusmin-w-11on the icon-only Sign out).<article>elements.KeyboardHintinside the Saturn section; opacity toggle lives as a plain CSS:focus-withinrule inindex.csskeyed on[data-roving-scope="saturn"]to stay decoupled from section class-name churn.keydownonwindowso inputs can't swallow ⌘K. ACommandPaletteContextexposes{ open }to any surface;AuthHeaderconsumes it for the discoverable ⌘K trigger button.accessibility.spec.ts), Enter-jump and hint reveal (saturn-nav.spec.ts), and 6 palette specs incommand-palette.spec.ts(⌘K, Esc, trigger click, Enter-opens-repo with stubbedwindow.open, cross-route navigation).Test plan
make typecheck/make lint-frontend/make checknpm run test:unit -- --run(455/455)npx playwright test e2e/accessibility.spec.ts e2e/saturn-nav.spec.ts e2e/legal-pages.spec.ts e2e/command-palette.spec.ts— all new tests pass/and/privacy, filtering works, repo selection opens GitHub in a new tab, navigate items route correctly