screen reader and keyboard usability pass

frontend/src/store.ts

@@ -138,9 +138,7 @@ interface PuzzleStore {
   pencilEntries: string[][]
   togglePencilMode: () => void
 
-  narratorEnabled: boolean
   narratorSettings: NarratorSettings
-  setNarratorEnabled: (enabled: boolean) => void
   setNarratorSettings: (settings: Partial<NarratorSettings>) => void
 
   partySubmitAnswer: (answer: string) => void
@@ -168,6 +166,7 @@ interface PuzzleStore {
   typeLetter: (letter: string) => void
   deleteLetter: () => void
   moveSelection: (dr: number, dc: number) => void
+  moveRowEdge: (home: boolean) => void
   tabClue: (forward: boolean) => void
   deselectCell: () => void
   validateSolution: () => Promise<void>
@@ -638,16 +637,10 @@ export const useStore = create<PuzzleStore>((set, get) => ({
   pencilMode: false,
   pencilEntries: [],
 
-  narratorEnabled: false,
   narratorSettings: { ...defaultNarratorSettings },
 
-  setNarratorEnabled: (enabled: boolean) => {
-    set({ narratorEnabled: enabled, narratorSettings: { ...get().narratorSettings, enabled } })
-  },
-
   setNarratorSettings: (partial: Partial<NarratorSettings>) => {
-    const next = { ...get().narratorSettings, ...partial }
-    set({ narratorSettings: next, narratorEnabled: next.enabled })
+    set({ narratorSettings: { ...get().narratorSettings, ...partial } })
   },
 
   undo: () => {
@@ -1335,6 +1328,26 @@ export const useStore = create<PuzzleStore>((set, get) => ({
     }
   },
 
+  moveRowEdge: (home) => {
+    const { selectedCell, puzzle, wordSpans, direction } = get()
+    if (!selectedCell || !puzzle) return
+    const row = selectedCell.row
+    const width = puzzle.width
+    let col: number | null = null
+    if (home) {
+      for (let c = 0; c < width; c++) {
+        if (puzzle.cells[row][c] !== 'black') { col = c; break }
+      }
+    } else {
+      for (let c = width - 1; c >= 0; c--) {
+        if (puzzle.cells[row][c] !== 'black') { col = c; break }
+      }
+    }
+    if (col === null) return
+    const span = findClueForCell(wordSpans, row, col, direction)
+    set({ selectedCell: { row, col }, activeClue: span?.number ?? get().activeClue })
+  },
+
   tabClue: (forward) => {
     const { wordSpans, direction, activeClue, puzzle } = get()
     if (!puzzle) return