aria grid roles, mobile keyboard entry, on-screen input switch

frontend/src/components/Grid.tsx

@@ -19,6 +19,7 @@ export default function Grid() {
   const svgRef = useRef<SVGSVGElement>(null)
   const wrapperRef = useRef<HTMLDivElement>(null)
   const cellRefs = useRef<(HTMLButtonElement | null)[]>([])
+  const typingRef = useRef<HTMLInputElement>(null)
   const puzzle = useStore((s) => s.puzzle)
   const entries = useStore((s) => s.entries)
   const cellStatus = useStore((s) => s.cellStatus)
@@ -35,7 +36,8 @@ export default function Grid() {
   const height = puzzle?.height ?? 0
 
   useEffect(() => {
-    if (!selectedCell || !wrapperRef.current?.contains(document.activeElement)) return
+    if (!selectedCell || !wrapperRef.current) return
+    if (!wrapperRef.current.contains(document.activeElement)) return
     const idx = selectedCell.row * width + selectedCell.col
     cellRefs.current[idx]?.focus()
   }, [selectedCell, width])
@@ -53,6 +55,31 @@ export default function Grid() {
     activeSpan?.cells.map(([r, c]) => `${r},${c}`) ?? [],
   )
 
+  // on touch devices, move focus into the hidden typing field so the
+  // on-screen keyboard appears, with the tapped cell announced as its label
+  const buildCellLabel = (r: number, c: number): string => {
+    const st = useStore.getState()
+    if (!st.puzzle) return t('grid.cellEmpty')
+    if (st.puzzle.cells[r][c] === 'black') return t('grid.blackCell')
+    const num = st.puzzle.cell_numbers[`${r},${c}`]
+    const letter = st.entries[r]?.[c] || ''
+    const pencilLetter = !letter && st.pencilEntries[r]?.[c] ? st.pencilEntries[r][c] : ''
+    const status: CellStatus = st.cellStatus[r]?.[c] || 'default'
+    return t('grid.cellLabel', { row: r + 1, col: c + 1 }) +
+      (num ? t('grid.cellNumber', { num }) : '') +
+      (letter ? t('grid.cellLetter', { letter }) : t('grid.cellEmpty')) +
+      (status === 'correct' ? t('grid.cellCorrect') : status === 'incorrect' ? t('grid.cellIncorrect') : status === 'revealed' ? t('grid.cellRevealed') : pencilLetter ? t('grid.cellPencil', { letter: pencilLetter }) : '')
+  }
+
+  const focusTypingField = (r: number, c: number) => {
+    if (!window.matchMedia('(pointer: coarse)').matches) return
+    const field = typingRef.current
+    if (field) {
+      field.setAttribute('aria-label', buildCellLabel(r, c))
+      field.focus({ preventScroll: true })
+    }
+  }
+
   return (
     <div
       ref={wrapperRef}
@@ -100,7 +127,11 @@ export default function Grid() {
                 key={`${r},${c}`}
                 id={`cell-${r}-${c}`}
                 data-cell={`${r},${c}`}
-                onClick={() => !isBlack && selectCell(r, c)}
+                onClick={() => {
+                  if (isBlack) return
+                  selectCell(r, c)
+                  focusTypingField(r, c)
+                }}
                 style={{ cursor: isBlack ? 'default' : 'pointer' }}
               >
                 <rect
@@ -193,36 +224,62 @@ export default function Grid() {
           strokeWidth={1.5}
         />
       </svg>
-      {/* screen reader layer: one focusable cell per grid cell, invisible to the eye */}
+      {/* screen reader layer: a real ARIA grid mirroring the visual one */}
       <div
         className="grid-sr-grid"
+        role="grid"
+        aria-label={t('grid.ariaLabel', { width, height })}
+        aria-rowcount={height}
+        aria-colcount={width}
         style={{ gridTemplateColumns: `repeat(${width}, 1fr)`, aspectRatio: `${width} / ${height}` }}
       >
-        {Array.from({ length: height }, (_, r) =>
-          Array.from({ length: width }, (_, c) => {
-            const isBlack = puzzle.cells[r][c] === 'black'
-            const isSelected = selectedCell?.row === r && selectedCell?.col === c
-            const num = puzzle.cell_numbers[`${r},${c}`]
-            const letter = entries[r]?.[c] || ''
-            const pencilLetter = !letter && pencilEntries[r]?.[c] ? pencilEntries[r][c] : ''
-            const status: CellStatus = cellStatus[r]?.[c] || 'default'
-            const label = isBlack ? t('grid.blackCell') :
-              t('grid.cellLabel', { row: r + 1, col: c + 1 }) + (num ? t('grid.cellNumber', { num }) : '') + (letter ? t('grid.cellLetter', { letter }) : t('grid.cellEmpty')) +
-              (status === 'correct' ? t('grid.cellCorrect') : status === 'incorrect' ? t('grid.cellIncorrect') : status === 'revealed' ? t('grid.cellRevealed') : pencilLetter ? t('grid.cellPencil', { letter: pencilLetter }) : '')
-            return (
-              <button
-                key={`sr-${r}-${c}`}
-                ref={el => { cellRefs.current[r * width + c] = el }}
-                type="button"
-                className="grid-sr-cell"
-                tabIndex={isSelected ? 0 : -1}
-                aria-label={label}
-                onClick={() => !isBlack && selectCell(r, c)}
-              />
-            )
-          }),
-        )}
+        {Array.from({ length: height }, (_, r) => (
+          <div key={`sr-row-${r}`} role="row" aria-rowindex={r + 1} className="grid-sr-row" style={{ display: 'contents' }}>
+            {Array.from({ length: width }, (_, c) => {
+              const isBlack = puzzle.cells[r][c] === 'black'
+              const isSelected = selectedCell?.row === r && selectedCell?.col === c
+              const label = buildCellLabel(r, c)
+              return (
+                <button
+                  key={`sr-${r}-${c}`}
+                  ref={el => { cellRefs.current[r * width + c] = el }}
+                  type="button"
+                  className="grid-sr-cell"
+                  role="gridcell"
+                  aria-rowindex={r + 1}
+                  aria-colindex={c + 1}
+                  tabIndex={isSelected ? 0 : -1}
+                  aria-label={label}
+                  onClick={() => !isBlack && selectCell(r, c)}
+                />
+              )
+            })}
+          </div>
+        ))}
       </div>
+      <input
+        ref={typingRef}
+        className="grid-type-input"
+        type="text"
+        autoCapitalize="characters"
+        autoComplete="off"
+        spellCheck={false}
+        inputMode="text"
+        onChange={e => {
+          const value = e.target.value
+          e.target.value = ''
+          for (const ch of value.toLowerCase()) {
+            if (ch >= 'a' && ch <= 'z') useStore.getState().typeLetter(ch)
+            else if (ch === ' ') useStore.getState().toggleDirection()
+          }
+        }}
+        onKeyDown={e => {
+          if (e.key === 'Backspace' && !e.currentTarget.value) {
+            e.preventDefault()
+            useStore.getState().deleteLetter()
+          }
+        }}
+      />
       <CellFlip svgRef={svgRef} />
       <InkOverlay svgRef={svgRef} />
     </div>