Skip to content

Trance views: canvas aria-hidden, keyboard access, intention textarea label - #59

Merged
brooksRoley merged 1 commit into
mainfrom
claude/trance-a11y-canvas-keyboard
Sep 16, 2026
Merged

brooksRoley merged 1 commit into
mainfrom
claude/trance-a11y-canvas-keyboard

Conversation

@brooksRoley

Copy link
Copy Markdown
Owner

Accessibility sweep: trance views + CheckInView

Five targeted WCAG fixes across the public-facing trance routes and the daily check-in view.

Changes

SpiralView.vue

  • aria-hidden="true" on the decorative canvas (was announced as an unlabeled image by screen readers)
  • role="button" tabindex="0" + @keydown.space.prevent / @keydown.enter.prevent on the clickable root div — the view was previously keyboard-inaccessible (click-only)
  • aria-label describing the interaction on the root div
  • aria-live="polite" aria-atomic="true" on the word overlay so screen readers receive trance word updates
  • role="progressbar" + aria-valuenow/min/max on the reader progress bar

HypnoView.vue

  • aria-hidden="true" on canvas
  • role="application" + descriptive aria-label on root div naming the orb interaction (keyboard nav already handled by useCosmicPhysics)

ZeromindView.vue

  • role="img" + aria-label on the interactive canvas — keyboard handling already wired via window.addEventListener('keydown', onKeyDown); this gives screen readers context on what the canvas is

TranceCanvas.vue (/trance route)

  • aria-hidden="true" on the canvas-layer — purely decorative; the init overlay and text overlay provide the accessible content

CheckInView.vue

  • aria-label="Set your intention for today" on the intention <textarea> — was only relying on placeholder, which WCAG 1.3.1 does not accept as a label replacement

Verification

Build check blocked: no node_modules in this remote environment (vue-tsc not available). All changes are template-level HTML attribute additions — no new TS bindings, no new imports, no logic changes. readerProgress (used in the new :aria-valuenow binding in SpiralView) is already destructured from useTextOverlay() in that file's existing script block.

🤖 Generated with Claude Code

https://claude.ai/code/session_018wmqcKohSvBvTS37mKnbiJ


Generated by Claude Code

@vercel

vercel Bot commented Sep 5, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
channelzero Ready Ready Preview Sep 16, 2026 2:30am UTC

… label

- SpiralView: aria-hidden on canvas, tabindex+keyboard handler on click
  container (Space/Enter advance trance words), aria-live on word overlay,
  progressbar role+attrs on reader progress bar
- HypnoView: aria-hidden on canvas, role=application + aria-label on root
  div describing orb controls
- ZeromindView: role=img + aria-label on interactive canvas (keyboard nav
  already wired via window keydown listener)
- TranceCanvas: aria-hidden on canvas-layer
- CheckInView: aria-label on intention textarea (no associated <label>)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018wmqcKohSvBvTS37mKnbiJ
@brooksRoley
brooksRoley force-pushed the claude/trance-a11y-canvas-keyboard branch from 420f5fa to 4bebd5b Compare September 16, 2026 02:29
@brooksRoley
brooksRoley merged commit 3cc3905 into main Sep 16, 2026
2 of 3 checks passed
@brooksRoley
brooksRoley deleted the claude/trance-a11y-canvas-keyboard branch September 16, 2026 02:30
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.

2 participants