screen reader and keyboard usability pass

frontend/src/components/CellFlip.tsx

@@ -17,6 +17,9 @@ export default function CellFlip({ svgRef }: { svgRef: React.RefObject<SVGSVGEle
   const puzzle = useStore((s) => s.puzzle)
   const [flips, setFlips] = useState<FlipItem[]>([])
   const prevEntries = useRef<string[][]>([])
+  const timeouts = useRef<ReturnType<typeof setTimeout>[]>([])
+
+  useEffect(() => () => { timeouts.current.forEach(id => clearTimeout(id)) }, [])
 
   useEffect(() => {
     if (!puzzle) return
@@ -50,7 +53,7 @@ export default function CellFlip({ svgRef }: { svgRef: React.RefObject<SVGSVGEle
       }
 
       setFlips(f => [...f, ...newFlips])
-      setTimeout(() => {
+      timeouts.current.push(setTimeout(() => {
         // restore SVG letter visibility
         if (svgRef.current) {
           for (const flip of newFlips) {
@@ -59,7 +62,7 @@ export default function CellFlip({ svgRef }: { svgRef: React.RefObject<SVGSVGEle
           }
         }
         setFlips(f => f.filter(fl => !newFlips.some(n => n.id === fl.id)))
-      }, 600)
+      }, 600))
     }
   }, [entries, puzzle, svgRef])
 
@@ -92,13 +95,13 @@ export default function CellFlip({ svgRef }: { svgRef: React.RefObject<SVGSVGEle
               {flip.clueNumber && (
                 <span className="flip-num" style={{ fontSize: numSize }}>{flip.clueNumber}</span>
               )}
-              {flip.oldLetter && <span className="flip-letter" style={{ fontSize }}>{flip.oldLetter}</span>}
+              {flip.oldLetter && <span className="flip-letter" style={{ fontSize }} aria-hidden="true">{flip.oldLetter}</span>}
             </div>
             <div className="flip-face flip-back">
               {flip.clueNumber && (
                 <span className="flip-num" style={{ fontSize: numSize }}>{flip.clueNumber}</span>
               )}
-              <span className="flip-letter" style={{ fontSize }}>{flip.newLetter}</span>
+              <span className="flip-letter" style={{ fontSize }} aria-hidden="true">{flip.newLetter}</span>
             </div>
           </div>
         </div>