Merge branch 'screen-reader'

src/App.css

@@ -44,6 +44,10 @@ body {
   user-select: none;
 }
 
+table.Game-rows {
+  margin: auto;
+}
+
 .Game-keyboard {
   display: flex;
   flex-direction: column;
@@ -170,3 +174,13 @@ a:active {
   margin-top: 1em;
   font-variant-numeric: tabular-nums;
 }
+
+.Game-sr-feedback,
+.sr-only {
+  position: absolute;
+  left: -10000px;
+  top: auto;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+}

src/Game.tsx

@@ -1,10 +1,10 @@
 import { useEffect, useState } from "react";
 import { Row, RowState } from "./Row";
 import dictionary from "./dictionary.json";
-import { Clue, clue } from "./clue";
+import { Clue, clue, describeClue } from "./clue";
 import { Keyboard } from "./Keyboard";
 import targetList from "./targets.json";
-import { dictionarySet, pick, resetRng, seed } from "./util";
+import { dictionarySet, pick, resetRng, seed, speak } from "./util";
 
 enum GameState {
   Playing,
@@ -17,8 +17,7 @@ interface GameProps {
   hidden: boolean;
 }
 
-const targets = targetList
-  .slice(0, targetList.indexOf("murky") + 1); // Words no rarer than this one
+const targets = targetList.slice(0, targetList.indexOf("murky") + 1); // Words no rarer than this one
 
 function randomTarget(wordLength: number) {
   const eligible = targets.filter((word) => word.length === wordLength);
@@ -31,6 +30,7 @@ function Game(props: GameProps) {
   const [currentGuess, setCurrentGuess] = useState<string>("");
   const [wordLength, setWordLength] = useState(5);
   const [hint, setHint] = useState<string>(`Make your first guess!`);
+  const [srStatus, setSrStatus] = useState<string>(``);
   const [target, setTarget] = useState(() => {
     resetRng();
     return randomTarget(wordLength);
@@ -57,6 +57,7 @@ function Game(props: GameProps) {
     if (/^[a-z]$/.test(key)) {
       setCurrentGuess((guess) => (guess + key).slice(0, wordLength));
       setHint("");
+      setSrStatus("");
     } else if (key === "Backspace") {
       setCurrentGuess((guess) => guess.slice(0, -1));
       setHint("");
@@ -72,7 +73,9 @@ function Game(props: GameProps) {
       setGuesses((guesses) => guesses.concat([currentGuess]));
       setCurrentGuess((guess) => "");
       if (currentGuess === target) {
-        setHint("You won! (Enter to play again)");
+        setHint(
+          `You won! The answer was ${target.toUpperCase()}. (Enter to play again)`
+        );
         setGameState(GameState.Won);
       } else if (guesses.length + 1 === props.maxGuesses) {
         setHint(
@@ -81,6 +84,7 @@ function Game(props: GameProps) {
         setGameState(GameState.Lost);
       } else {
         setHint("");
+        speak(describeClue(clue(currentGuess, target)));
       }
     }
   };
@@ -98,7 +102,7 @@ function Game(props: GameProps) {
   }, [currentGuess, gameState]);
 
   let letterInfo = new Map<string, Clue>();
-  const rowDivs = Array(props.maxGuesses)
+  const tableRows = Array(props.maxGuesses)
     .fill(undefined)
     .map((_, i) => {
       const guess = [...guesses, currentGuess][i] ?? "";
@@ -117,7 +121,13 @@ function Game(props: GameProps) {
         <Row
           key={i}
           wordLength={wordLength}
-          rowState={lockedIn ? RowState.LockedIn : RowState.Pending}
+          rowState={
+            lockedIn
+              ? RowState.LockedIn
+              : i === guesses.length
+              ? RowState.Editing
+              : RowState.Pending
+          }
           cluedLetters={cluedLetters}
         />
       );
@@ -146,11 +156,10 @@ function Game(props: GameProps) {
             setTarget(randomTarget(length));
             setWordLength(length);
             setHint(`${length} letters`);
-            (document.activeElement as HTMLElement)?.blur();
           }}
         ></input>
         <button
-          style={{ flex: "0" }}
+          style={{ flex: "0 0 auto" }}
           disabled={gameState !== GameState.Playing || guesses.length === 0}
           onClick={() => {
             setHint(
@@ -163,8 +172,13 @@ function Game(props: GameProps) {
           Give up
         </button>
       </div>
-      {rowDivs}
-      <p>{hint || `\u00a0`}</p>
+      <table className="Game-rows" tabIndex={0}>
+        <tbody>{tableRows}</tbody>
+      </table>
+      <p role="alert">{hint || `\u00a0`}</p>
+      {/* <p role="alert" className="Game-sr-feedback">
+        {srStatus}
+      </p> */}
       <Keyboard letterInfo={letterInfo} onKey={onKey} />
       {seed ? (
         <div className="Game-seed-info">

src/Keyboard.tsx

@@ -13,7 +13,7 @@ export function Keyboard(props: KeyboardProps) {
   ];
 
   return (
-    <div className="Game-keyboard">
+    <div className="Game-keyboard" aria-hidden="true">
       {keyboard.map((row, i) => (
         <div key={i} className="Game-keyboard-row">
           {row.map((label, j) => {
@@ -29,6 +29,7 @@ export function Keyboard(props: KeyboardProps) {
               <div
                 tabIndex={-1}
                 key={j}
+                role="button"
                 className={className}
                 onClick={() => {
                   props.onKey(label);

src/Row.tsx

@@ -1,7 +1,8 @@
-import { Clue, clueClass, CluedLetter } from "./clue";
+import { Clue, clueClass, CluedLetter, clueWord } from "./clue";
 
 export enum RowState {
   LockedIn,
+  Editing,
   Pending,
 }
 
@@ -13,6 +14,7 @@ interface RowProps {
 
 export function Row(props: RowProps) {
   const isLockedIn = props.rowState === RowState.LockedIn;
+  const isEditing = props.rowState === RowState.Editing;
   const letterDivs = props.cluedLetters
     .concat(Array(props.wordLength).fill({ clue: Clue.Absent, letter: "" }))
     .slice(0, props.wordLength)
@@ -22,12 +24,22 @@ export function Row(props: RowProps) {
         letterClass += " " + clueClass(clue);
       }
       return (
-        <div key={i} className={letterClass}>
+        <td
+          key={i}
+          className={letterClass}
+          aria-live={isEditing ? "assertive" : "off"}
+          aria-label={
+            isLockedIn
+              ? letter.toUpperCase() +
+                (clue === undefined ? "" : ": " + clueWord(clue))
+              : ""
+          }
+        >
           {letter}
-        </div>
+        </td>
       );
     });
   let rowClass = "Row";
   if (isLockedIn) rowClass += " Row-locked-in";
-  return <div className={rowClass}>{letterDivs}</div>;
+  return <tr className={rowClass}>{letterDivs}</tr>;
 }

src/clue.ts

@@ -39,3 +39,19 @@ export function clueClass(clue: Clue): string {
     return "letter-correct";
   }
 }
+
+export function clueWord(clue: Clue): string {
+  if (clue === Clue.Absent) {
+    return "no";
+  } else if (clue === Clue.Elsewhere) {
+    return "elsewhere";
+  } else {
+    return "correct";
+  }
+}
+
+export function describeClue(clue: CluedLetter[]): string {
+  return clue
+    .map(({ letter, clue }) => letter.toUpperCase() + " " + clueWord(clue!))
+    .join(", ");
+}

src/targets.json

@@ -3732,7 +3732,6 @@
   "neighborhood",
   "fragments",
   "symbolic",
-  "wales",
   "designated",
   "prescribed",
   "electricity",

src/util.ts

@@ -24,3 +24,24 @@ export function resetRng(): void {
 export function pick<T>(array: Array<T>): T {
   return array[Math.floor(array.length * random())];
 }
+
+// https://a11y-guidelines.orange.com/en/web/components-examples/make-a-screen-reader-talk/
+export function speak(
+  text: string,
+  priority: "polite" | "assertive" = "assertive"
+) {
+  var el = document.createElement("div");
+  var id = "speak-" + Date.now();
+  el.setAttribute("id", id);
+  el.setAttribute("aria-live", priority || "polite");
+  el.classList.add("sr-only");
+  document.body.appendChild(el);
+
+  window.setTimeout(function () {
+    document.getElementById(id)!.innerHTML = text;
+  }, 100);
+
+  window.setTimeout(function () {
+    document.body.removeChild(document.getElementById(id)!);
+  }, 1000);
+}