Skip to content

fix: add main landmark, skip link, and aria-label to canvas (WCAG 2.4.1/2.4.6) - #32

Merged
HongmingWang-Rabbit merged 1 commit into
mainfrom
fix/a11y-landmarks
Apr 14, 2026
Merged

fix: add main landmark, skip link, and aria-label to canvas (WCAG 2.4.1/2.4.6)#32
HongmingWang-Rabbit merged 1 commit into
mainfrom
fix/a11y-landmarks

Conversation

@HongmingWang-Rabbit

Copy link
Copy Markdown
Contributor

Summary

  • Wraps CanvasInner return in a React Fragment so a skip-nav <a> can live as a DOM sibling before <main> (no wrapping div added)
  • Adds <a href="#canvas-main">Skip to canvas</a>sr-only normally, revealed on keyboard focus — satisfying WCAG 2.4.1 bypass blocks
  • Adds id="canvas-main" to the <main> element so the skip link target is valid
  • Adds aria-label="Molecule AI workspace canvas" to the ReactFlow wrapper for WCAG 2.4.6 descriptive labels

Test plan

  • Canvas.a11y.test.tsx — 4 new jsdom tests: <main> landmark presence, skip link href/text, ReactFlow aria-label, DOM order (skip before main via compareDocumentPosition)
  • 369/369 Vitest tests pass (365 pre-existing + 4 new)
  • npm run build clean — no TypeScript errors, no Next.js warnings

Files changed

  • canvas/src/components/Canvas.tsx — 3 surgical edits (Fragment wrapper, skip link, id="canvas-main", aria-label prop)
  • canvas/src/components/__tests__/Canvas.a11y.test.tsx — new 139-line test file

🤖 Generated with Claude Code

….1/2.4.6)

- Wrap CanvasInner return in React Fragment to host skip-nav link as sibling of <main>
- Add <a href="#canvas-main"> skip link (sr-only, revealed on focus) before <main>
- Add id="canvas-main" to <main> element
- Add aria-label="Molecule AI workspace canvas" to ReactFlow wrapper
- Add Canvas.a11y.test.tsx: 4 jsdom tests covering all three a11y landmarks

369/369 tests pass; next build clean.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@HongmingWang-Rabbit

Copy link
Copy Markdown
Contributor Author

7-gate verification passed:

  • Gate 1 CI: 6/6 green
  • Gate 2 build: canvas next build clean
  • Gate 3 unit: 369/369 vitest pass (incl. 4 new Canvas.a11y tests)
  • Gate 4 diff: semantic , internal #canvas-main skip link, no XSS, no secrets
  • Gate 5 design: sr-only focus:not-sr-only pattern, dark-theme zinc-900/100 focus colors preserved
  • Gate 6 line review: aria-label meaningful, no role conflicts
  • Gate 7 Playwright: focused a11y smoke pass; full suite 11 passed / 4 skipped / 1 unrelated pre-existing flake (filestab-smoke, untouched by this PR)

Skip link hidden by default, visible only on keyboard focus (verified via screenshot). WCAG 2.4.1 bypass-blocks and 2.4.6 headings-labels satisfied via

+ aria-label on ReactFlow.

Merging.

@HongmingWang-Rabbit
HongmingWang-Rabbit merged commit 9ec566a into main Apr 14, 2026
6 checks passed
@HongmingWang-Rabbit
HongmingWang-Rabbit deleted the fix/a11y-landmarks branch April 14, 2026 07:23
HongmingWang-Rabbit pushed a commit that referenced this pull request Apr 14, 2026
Adds a `canvas-deploy-reminder` job to ci.yml that fires on every
push to main once `canvas-build` passes. It posts a commit comment via
the built-in GITHUB_TOKEN (no new secrets needed) reminding whoever
monitors CI to run:

  cd /g/personal_programs/molecule-monorepo
  git pull origin main
  docker compose build canvas && docker compose up -d canvas

The comment includes the commit SHA and a direct link to the build log.

Rationale: 5 consecutive merge cycles (PRs #21, #25, #30, #32, #34)
went undeployed because there is no auto-deploy hook and the manual
step was silently forgotten. A commit comment on the merge commit is
the lowest-friction reminder that requires no external secrets or infra.

Does NOT run on PRs — only on direct pushes to main (i.e. post-merge).
Uses `needs: canvas-build` so the reminder only fires after build+tests
pass; a failing build produces no comment.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
molecule-ai Bot pushed a commit that referenced this pull request Apr 21, 2026
fix: add main landmark, skip link, and aria-label to canvas (WCAG 2.4.1/2.4.6)
molecule-ai Bot pushed a commit that referenced this pull request Apr 21, 2026
Adds a `canvas-deploy-reminder` job to ci.yml that fires on every
push to main once `canvas-build` passes. It posts a commit comment via
the built-in GITHUB_TOKEN (no new secrets needed) reminding whoever
monitors CI to run:

  cd /g/personal_programs/molecule-monorepo
  git pull origin main
  docker compose build canvas && docker compose up -d canvas

The comment includes the commit SHA and a direct link to the build log.

Rationale: 5 consecutive merge cycles (PRs #21, #25, #30, #32, #34)
went undeployed because there is no auto-deploy hook and the manual
step was silently forgotten. A commit comment on the merge commit is
the lowest-friction reminder that requires no external secrets or infra.

Does NOT run on PRs — only on direct pushes to main (i.e. post-merge).
Uses `needs: canvas-build` so the reminder only fires after build+tests
pass; a failing build produces no comment.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant