diff --git a/src/App.css b/src/App.css index 89fe02b..69bc7ba 100644 --- a/src/App.css +++ b/src/App.css @@ -170,3 +170,12 @@ a:active { margin-top: 1em; font-variant-numeric: tabular-nums; } + +.Game-sr-feedback { + position: absolute; + left: -10000px; + top: auto; + width: 1px; + height: 1px; + overflow: hidden; +} diff --git a/src/Game.tsx b/src/Game.tsx index 03f2044..3770520 100644 --- a/src/Game.tsx +++ b/src/Game.tsx @@ -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(""); const [wordLength, setWordLength] = useState(5); const [hint, setHint] = useState(`Make your first guess!`); + const [srStatus, setSrStatus] = useState(``); const [target, setTarget] = useState(() => { resetRng(); return randomTarget(wordLength); @@ -81,6 +81,7 @@ function Game(props: GameProps) { setGameState(GameState.Lost); } else { setHint(""); + setSrStatus("Feedback goes here"); } } }; @@ -117,7 +118,13 @@ function Game(props: GameProps) { ); @@ -146,7 +153,6 @@ function Game(props: GameProps) { setTarget(randomTarget(length)); setWordLength(length); setHint(`${length} letters`); - (document.activeElement as HTMLElement)?.blur(); }} >