Repository navigation
Console UI audit: accessibility, guidelines, copy and load performance - #50
Merged
Merged
Conversation
- npm run build writes .br/.gz next to every text asset (Node zlib, no new dependency); the gateway and meridian-control serve the variant the browser accepts with Content-Encoding and Vary. Console JS goes from 1.58 MB to 420 KB on the wire without compressing API or SSE responses. - meridian-control embeds the console's boot info in the page as a JSON data block (CSP-safe, '<' escaped), so the console renders without a /api/cloud/info round trip; self-hosted gateways no longer get a 404 probe on every load (dev server still probes). - Throttled mobile profile (4x CPU, 150 ms RTT, 1.6 Mbps): first paint 7.6 s -> 2.4 s, LCP 8.0 s -> 2.7 s, CLS unchanged (<= 0.07). - Tests: encoding negotiation (br > gzip > identity, q=0), boot block parsing, and that a hostile config value cannot break out of the block. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0177yERMgobFkKXuZUcZmpwZ
Audited every page of the gateway and Cloud consoles in light, dark and mobile views against WCAG 2.2 AA (axe-core), the Vercel Web Interface Guidelines and Anthropic's frontend-design guidance. Both consoles now report zero violations (60 + 46 page views), no horizontal scroll at 390 px, no console errors and a visible focus ring on every Tab stop. Accessibility - One main landmark per page (SidebarInset is a div); sidebar is an aside with a named nav; sign-in, onboarding, boot and error screens have main; 404 has an h1; the sign-in tagline is no longer a stray h2 - Accessible names for 18 filter selects, empty Actions headers and the per-member role select; Playground snippet tabs wired to panels; command palette title moved inside its dialog - Contrast >= 4.5:1: inactive tabs, sidebar captions, destructive text, toast descriptions, dark-mode critical text (--status-critical-ink) - Focus rings on tab panels, charts and clickable rows; scrolling tables and code blocks become keyboard-focusable Layout, forms, behaviour - Tab bars scroll instead of widening the page; panels and grid items shrink (min-w-0): node detail and routing no longer overflow on phones - Inputs: name, autocomplete (email, organization, one-time-code, off), inputmode, spellCheck off for identifiers; autoFocus desktop-only - Filters and tabs in the URL (useUrlState): keys, nodes, fleet audit, policies, metrics, node detail - Viewer's locale for numbers and dates; theme-color follows the theme; global prefers-reduced-motion; no transition: all; touch-action and overscroll-behavior; connect-gateway dialog no longer empties while closing Copy (frontend-design) - Specific link labels (Routing details, All nodes, All errors) without appended arrows; sentence-case eyebrows and scope labels instead of all caps; plain titles instead of dot-joined ones; decorative dots removed from the sign-in panel Repeatable audit - npm run audit:ui (axe-core + reflow + console + focus checks against the demo stack); docs/CONSOLE.md 'UI quality bar'; CHANGELOG Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0177yERMgobFkKXuZUcZmpwZ
Contributor
There was a problem hiding this comment.
Copilot was unable to review this pull request because the user who requested the review has insufficient remaining quota. Try requesting a review at a lower effort level.
An organization owner can choose the repository organization as the billing source for reviews requested by members with a paid Copilot license. Learn about Copilot code review billing.
The meridian-control image is published only for tagged releases, so `docker compose pull` never picked up new code on a main checkout. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0177yERMgobFkKXuZUcZmpwZ
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
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.
Audits every page of both consoles (self-hosted gateway and Meridian Cloud) against WCAG 2.2 AA (axe-core), the Vercel Web Interface Guidelines, Anthropic's frontend-design / accessibility-review / design-critique guidance and Cloudflare's web-perf checklist, and fixes what they found.
What changed
Broken / failing
min-w-0.mainlandmarks on every page; 404 page had noh1; scrollable code blocks and wide tables weren't keyboard-reachable.Load performance
Content-Encoding+Vary: Accept-Encoding(meridian/api/static_files.py). Main bundle 1.58 MB → 420 KB over the wire.<script type="application/json">, CSP-safe and</script>-escaped), so neither console waits on/api/cloud/infobefore first render.Guidelines
useUrlState), so reloads and shared links keep them.name,autoComplete,inputMode,spellCheck,one-time-code; autofocus only on pointer-fine devices.theme-colorfollows the theme; reduced motion honoured; notransition: all; overscroll containment in dialogs and menus.Tooling
npm run audit:ui -- --mode gateway|cloud: axe, 390 px reflow, console errors and visible-focus checks on every route in light, dark and mobile; exits 1 on any problem. Documented under "UI quality bar" indocs/CONSOLE.md.Checklist
pytest -q671 passed (newtests/test_static_files.py, boot-info escaping test); vitest 45 passed (readBootInfo)ruff check .,mypy meridian,mypy meridian_control,tsc,oxlint,npm run buildcleandocs/CONSOLE.md,CHANGELOG.mdValidation
npm run audit:ui: gateway 60 page views, cloud 46 page views, 0 axe violations, no horizontal overflow, no console errors, no focus stop without an indicator.scripts/console_demo.py [--cloud].Generated by Claude Code