Skip to content

Frontend UX/a11y polish: filter menu, hover-only actions, nav tooltips, focus/motion #9628

Description

@MarkusNeusinger

Frontend polish findings from the 2026-07-08 audit (verified still-open 2026-07-09):

  • Medium#13 — FilterMenu arrow-key highlight never scrolls into view (FilterMenu.tsx, 350px maxHeight; setHighlightedIndex in FilterSearch.tsx:176), and the search input lacks combobox ARIA (role=combobox, aria-expanded, aria-activedescendant, aria-controls).
  • Medium#16 — hover-only card actions unreachable on touch and invisible to keyboard: ImageCard copy button opacity:0 revealed only via .MuiCard-root:hover & but still in tab order (ImageCard.tsx:266); SpecOverview action row same pattern plus .blur() on click (SpecOverview.tsx:237,244,260). Reveal on :focus-visible/:focus-within; @media (hover:none) low-opacity always.
  • Medium#7 — nav vocabulary assumes insider knowledge (specs vs plots, mcp, pal/libs shorthands) with zero tooltips (NavBar.tsx:14-22).
  • Low#2 — NavBar search button loses its focus indicator via all: unset (NavBar.tsx:199); active link lacks aria-current="page".
  • Low#3rise + loader animations ignore prefers-reduced-motion (tokens.css:115 block covers only cursor/flank; HeroSection.tsx, PlotOfTheDayTerminal.tsx, LoaderSpinner.tsx); MapPage/DebugPage remove outlines without full replacement.
  • Low#4 — hero stacks three competing taglines; centered "from .md to art." breaks the left-aligned rhythm (HeroSection.tsx:56-170).
  • Low#23useUrlSync bypasses React Router with raw history.replaceState (useUrlSync.ts:64) — router location permanently stale on /plots; document as intentional or migrate to useSearchParams(..., {replace:true}).

Prior art: #9622 fixed the SpecTabs half of the tabs findings (High#5, Low#1). Audit: agentic/audits/2026-07-08-product-ux.md.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions