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

src/components/TranceCanvas.vue

@@ -9,7 +9,7 @@
     @touchend="onTouchEnd"
   >
     <!-- Category-driven canvas -->
-    <canvas ref="canvasEl" class="canvas-layer" />
+    <canvas ref="canvasEl" class="canvas-layer" aria-hidden="true" />
 
     <!-- Audio-init overlay -->
     <Transition name="init-fade">

src/views/CheckInView.vue

@@ -260,6 +260,7 @@ const accent = computed(() => token.value?.palette?.accent || '#a78bfa')
             class="intention-input"
             rows="2"
             placeholder="What do you want to carry into today?"
+            aria-label="Set your intention for today"
           />
           <button
             class="btn-accent"

src/views/HypnoView.vue

@@ -131,8 +131,13 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="hypno" @click="handleClick">
-    <canvas ref="canvasRef" class="hypno-canvas" />
+  <div
+    class="hypno"
+    role="application"
+    aria-label="Hypnotic orb field — tap to start, WASD or arrow keys to push orbs, Tab to select"
+    @click="handleClick"
+  >
+    <canvas ref="canvasRef" class="hypno-canvas" aria-hidden="true" />
 
     <!-- Entry gate -->
     <Transition name="gate">

src/views/SpiralView.vue

@@ -125,16 +125,32 @@ useAnimationCanvas(canvasRef, {
 </script>
 
 <template>
-  <div class="spiral-view" @click="toggleOrSkip">
-    <canvas ref="canvasRef" class="spiral-canvas" />
-
-    <div class="word-overlay">
+  <div
+    class="spiral-view"
+    role="button"
+    tabindex="0"
+    aria-label="Spiral trance visualization — press Space or Enter to advance"
+    @click="toggleOrSkip"
+    @keydown.space.prevent="toggleOrSkip"
+    @keydown.enter.prevent="toggleOrSkip"
+  >
+    <canvas ref="canvasRef" class="spiral-canvas" aria-hidden="true" />
+
+    <div class="word-overlay" aria-live="polite" aria-atomic="true">
       <div v-if="displayLabel" class="category-label">{{ displayLabel }}</div>
       <div :class="['word-display', { visible: isVisible }]">{{ displayText }}</div>
     </div>
 
     <!-- Reader progress bar -->
-    <div v-if="isReaderMode" class="reader-progress">
+    <div
+      v-if="isReaderMode"
+      class="reader-progress"
+      role="progressbar"
+      :aria-valuenow="Math.round(readerProgress)"
+      aria-valuemin="0"
+      aria-valuemax="100"
+      aria-label="Reading progress"
+    >
       <div class="reader-progress-fill" :style="{ width: `${readerProgress}%` }" />
     </div>
 

src/views/ZeromindView.vue

@@ -662,7 +662,8 @@ onUnmounted(() => {
     <canvas
       ref="canvas"
       class="zeromind-canvas"
-      aria-hidden="true"
+      aria-label="Interactive cosmic orb field — use arrow keys or WASD to push orbs"
+      role="img"
       @mousemove="onMouseMove"
       @mousedown.prevent="onMouseDown"
       @mouseup="onMouseUp"