charles/claude-hooks
1
0
Fork 0
Code Issues 10 Pull requests Projects Releases Packages 1 Wiki Activity Actions

design(a11y): Penpot mockup — keyboard nav, focus rings, ARIA patterns for the dashboard #236

New issue
Closed
opened 2026-04-21 12:49:58 +00:00 by claude-desktop · 1 comment
claude-desktop commented 2026-04-21 12:49:58 +00:00
Collaborator
Copy link

User story

As a designer, I want a Penpot mockup that establishes the a11y spec for the dashboard — focus ring style, tab order conventions, ARIA live-region placement, keyboard shortcuts map — so that the implementer has an agreed-upon visual + behavioural standard rather than ad-hoc WCAG fixes sprinkled per component.

Acceptance criteria

Frames

  • Focus ring — a single consistent ring (color + offset + thickness) applied to every interactive element. Visible on keyboard focus, hidden on mouse (:focus-visible). Source colour from design/tokens.json.
  • Tab order diagram — per major page (Monitor, Pipeline, Planner, Board, Agents), an overlay showing the expected tab sequence. Skip-links for nav.
  • Keyboard shortcut map — table of global shortcuts (e.g., g m → Monitor, / → filter, ? → help, esc → close modal). Platform-aware (cmd vs ctrl).
  • ARIA live regions — where "running" / "completed" / toast notifications announce. Verbosity setting: polite vs assertive per event type.
  • Drag-and-drop a11y (Board) — keyboard alternative for drag (space to pick up, arrows to move, enter to drop). Visible grab handle.
  • Modal focus trap — Dialog.Root (Base UI) already does most of this; mockup confirms the visual + documents the expectation.

Tokens + copy

  • All focus ring + emphasis colors from design/tokens.json.
  • Copy uses the labor-hierarchy vocabulary (boss/dev/reviewer/designer/foreman) — no "bot" / "agent".

Handoff

  • Standard designer-handoff comment.
  • Add area:design-review on handoff.

Out of scope

  • Screen-reader narration rewrites on individual components — that's implementation.
  • Color-contrast audit of the Tokyo Night palette — separate pass if WCAG-AA isn't met (flag in handoff if it isn't).

References

  • @base-ui-components/react — Dialog / Popover already have a11y baked in, use as baseline.
  • apps/web/src/styles/tokens.css — source tokens.
  • Sibling impl ticket — blocks on this mockup.
## User story As a designer, I want a Penpot mockup that establishes the **a11y spec** for the dashboard — focus ring style, tab order conventions, ARIA live-region placement, keyboard shortcuts map — so that the implementer has an agreed-upon visual + behavioural standard rather than ad-hoc WCAG fixes sprinkled per component. ## Acceptance criteria ### Frames - [ ] **Focus ring** — a single consistent ring (color + offset + thickness) applied to every interactive element. Visible on keyboard focus, hidden on mouse (`:focus-visible`). Source colour from `design/tokens.json`. - [ ] **Tab order diagram** — per major page (Monitor, Pipeline, Planner, Board, Agents), an overlay showing the expected tab sequence. Skip-links for nav. - [ ] **Keyboard shortcut map** — table of global shortcuts (e.g., `g m` → Monitor, `/` → filter, `?` → help, `esc` → close modal). Platform-aware (cmd vs ctrl). - [ ] **ARIA live regions** — where "running" / "completed" / toast notifications announce. Verbosity setting: polite vs assertive per event type. - [ ] **Drag-and-drop a11y** (Board) — keyboard alternative for drag (space to pick up, arrows to move, enter to drop). Visible grab handle. - [ ] **Modal focus trap** — Dialog.Root (Base UI) already does most of this; mockup confirms the visual + documents the expectation. ### Tokens + copy - [ ] All focus ring + emphasis colors from `design/tokens.json`. - [ ] Copy uses the labor-hierarchy vocabulary (boss/dev/reviewer/designer/foreman) — no "bot" / "agent". ### Handoff - [ ] Standard designer-handoff comment. - [ ] Add `area:design-review` on handoff. ## Out of scope - Screen-reader narration rewrites on individual components — that's implementation. - Color-contrast audit of the Tokyo Night palette — separate pass if WCAG-AA isn't met (flag in handoff if it isn't). ## References - `@base-ui-components/react` — Dialog / Popover already have a11y baked in, use as baseline. - `apps/web/src/styles/tokens.css` — source tokens. - Sibling impl ticket — blocks on this mockup.
designer commented 2026-04-27 12:19:28 +00:00
Collaborator
Copy link

Penpot file from yesterday's session (URL was missed in the prior handoff):

https://design.jacquin.app/#/workspace?team-id=689d7fa4-f94b-81d4-8007-e39c2a70e029&project-id=689d7fa4-f94b-81d4-8007-e39c2a7171bf&file-id=b6ad92e1-d51e-804e-8007-e7c58718fd93

File: #236 — a11y: keyboard nav, focus rings, ARIA patterns (revn 143 at start of this run, modified 2026-04-26 19:09 UTC). Stopping here per operator instruction — no new frames added beyond what was already in the file. A follow-up dispatch can resume the handoff (full per-page table + token CSS + deviations) once the existing content is reviewed.

Penpot file from yesterday's session (URL was missed in the prior handoff): https://design.jacquin.app/#/workspace?team-id=689d7fa4-f94b-81d4-8007-e39c2a70e029&project-id=689d7fa4-f94b-81d4-8007-e39c2a7171bf&file-id=b6ad92e1-d51e-804e-8007-e7c58718fd93 File: `#236 — a11y: keyboard nav, focus rings, ARIA patterns` (revn 143 at start of this run, modified 2026-04-26 19:09 UTC). Stopping here per operator instruction — no new frames added beyond what was already in the file. A follow-up dispatch can resume the handoff (full per-page table + token CSS + deviations) once the existing content is reviewed.
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
main
chore/sync-pre-push-from-forge-base
fix/flows-yaml-dispatch-identity
feat/board-tap-to-assign
dev/1107
code-lead/1106
code-lead/1108
dev/1104
code-lead/1103
code-lead/1080
dev/1087
feat/flows-yaml-ci-events
chore/board-drop-stalled-and-density-controls
fix/flows-yaml-routes-always-register
flows-yaml/api-defaults
dev/1023
fix/event-log-history-bleed
fix/janitor-fix-ci-logs-and-cap
dev/1022
fix/board-card-provider
code-lead/1036
dev/1025
code-lead/1020
dev/1017
code-lead/1026
feat/web-shortcut-registry-1018
dev/1015
code-lead/1009
code-lead/1008
dev/975
dev/969
dev/973
dev/967
code-lead/968
code-lead/953
dev/970
dev/976
code-lead/966
code-lead/956
code-lead/951
dev/962
dev/963
dev/977
dev/955
dev/983
dev/961
dev/974
code-lead/950
code-lead/939
dev/941
dev/940
dev/937
dev/938
dev/936
dev/935
feat/web-i18n-fr-locale
feat/spec-editor-ui-polish
chore/drop-legacy-compat
fix/skills-drop-preview-pane
fix/882-skills-safety-rail
dev/911
dev/909
dev/923
dev/917
dev/915
feat/879-sr11-m2-drop-legacy-skill
code-lead/873
dev/881
code-lead/869
dev/867
code-lead/845
code-lead/843
code-lead/844
dev/837
dev/861
dev/849
code-lead/837
code-lead/842
fix/dedup-rebase-inflight
dev/838
code-lead/847
dev/833
code-lead/848
pr/838
code-lead/841
feat/settings-save-bar/836
code-lead/840
dev/846
code-lead/839
dev/832
fix/board-sse-stale-cache
dev/834
dev/835
feat/settings-breadcrumbs
feat/forge-oauth-credentials
refactor/service-config-consolidation
feat/agent-tokens-to-secrets
feat/gitlab-oauth-to-db
feat/authelia-rip-and-voice-fixes
fix/rebase-storm-and-dead-letter
code-lead/797
code-lead/796
dev/811
code-lead/798
dev/810
code-lead/795
dev/808
code-lead/794
dev/805
dev/802
dev/803
feat/avatar-menu-settings-entry
feat/per-agent-token-tracking
dev/793
dev/747
dev/752
code-lead/790
code-lead/759
dev/756
dev/760
dev/741
dev/767
dev/740
dev/709
dev/644
dev/637
boss/614
dev/600
dev/611
dev/585
fix/login-bonus-fixes
boss/544
dev/542
refactor/api-prefix-and-session-gate
dev/489
boss/531
boss/518
dev/499
boss/516
dev/530
dev/517
dev/519
dev/515
dev/522
dev/503
dev/471
boss/329
dev/417
dev/418
dev/402
boss/327
dev/334
dev/332
boss/326
boss/325
dev/331
boss/324
boss/323
boss/322
dev/294
test/s11-task-analytics
dev/262
boss/270
dev/268
foreman/ui-consolidation-spec
dev/234
boss/196
boss/176
boss/164
fix/124-session-persist-bind
boss/52
dev/87
boss/73
dev/77
dev/81
dev/82
boss/79
dev/42
dev/35
boss/7
No results found.
Labels
Clear labels   
area:agents
Agent types, pool scheduling, per-instance config

  
area:dashboard
Dashboard UI and observability surfaces

  
area:database
DB layer — schema, migrations, ORM, raw SQL

  
area:design
UI/UX mockup work — routes to designer agent

  
area:design-review
Design review dispatch — routes to design-reviewer agent

  
area:flows
Flow runner — YAML loader, executor, op registry, expression eval

  
area:infra
Deployment, isolation, containers, systemd units

  
area:meta
Tracking, scaffolding, project setup

  
area:security
Security — routes to reviewer-security (opus)

  
area:sessions
Session-id store, Claude SDK resume logic

  
area:webhook
Forgejo webhook routing and handlers

  
area:workdir
Clone cache, worktrees, git identity

  
security
Security-sensitive issue

  
type:bug
Bug

  
type:chore
Chore

  
type:meta
Tracking or decisions, not implementation work

  
type:user-story
User story

No labels
area:agents
area:dashboard
area:database
area:design
area:design-review
area:flows
area:infra
area:meta
area:security
area:sessions
area:webhook
area:workdir
security
type:bug
type:chore
type:meta
type:user-story
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
designer
2 participants
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Blocks
#237 feat(a11y): implement dashboard-wide keyboard nav, focus rings, ARIA live regions
charles/claude-hooks
Reference
charles/claude-hooks#236
No description provided.