From 605d478e4d42dd2fd78c754553ae31435fd418d4 Mon Sep 17 00:00:00 2001 From: Lynn Date: Wed, 12 Jan 2022 12:48:46 +0100 Subject: [PATCH 1/4] Don't put
in

--- src/App.tsx | 134 +++++++++++++++++++++++++++------------------------- 1 file changed, 70 insertions(+), 64 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 028f4e5..ca867c1 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -5,9 +5,77 @@ import { useState } from "react"; import { Row, RowState } from "./Row"; import { Clue } from "./clue"; +const maxGuesses = 6; + +function About() { + return ( +

+

+ hello wordl is a remake of the word game{" "} + + Wordle + {" "} + by powerlanguage, which + I think is based on the TV show Lingo. +

+

+ You get {maxGuesses} tries to guess a target word. +
+ After each guess, you get Mastermind-style feedback: +

+ +

+ W and O aren't in the target word at all. +
+ R is correct! The third letter is R + .
+ D occurs elsewhere in the target word. +

+

+ Let's move the D in our next guess: +

+ +

So close!

+ +

Got it!

+

+ Report issues{" "} + here, or tweet{" "} + @chordbug. +

+
+ ); +} + function App() { const [about, setAbout] = useState(false); - const maxGuesses = 6; return (

hello wordl

@@ -29,69 +97,7 @@ function App() { {seed ? "Random" : "Today's"}
- {about && ( -
-

- hello wordl is a remake of the word game{" "} - - Wordle - - , which I think is based on the TV show Lingo. -

-

- You get {maxGuesses} tries to guess a target word. -
- After each guess, you get Mastermind-style feedback: -

-

- -

-

- W and O aren't in the target word at all. -
- R is correct! The third letter is R - .
- D occurs elsewhere in the target word. -

-

- Let's move the D in our next guess: - - So close! - - Got it! -

- Report issues{" "} - here, or - tweet @chordbug. -
- )} + {about && }
); From 4a084672371d69773289f3b143588e01e4390beb Mon Sep 17 00:00:00 2001 From: Lynn Date: Wed, 12 Jan 2022 17:40:23 +0100 Subject: [PATCH 2/4] Some screen reader thingies --- src/App.css | 9 +++++++++ src/Game.tsx | 21 +++++++++++++++------ src/Row.tsx | 12 +++++++++++- 3 files changed, 35 insertions(+), 7 deletions(-) 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(); }} > -
{rowDivs}
-

{hint || `\u00a0`}

-

+ {tableRows}
+

{hint || `\u00a0`}

+ {/*

{srStatus} -

+

*/} {seed ? (
diff --git a/src/Keyboard.tsx b/src/Keyboard.tsx index ceb1c24..3413d53 100644 --- a/src/Keyboard.tsx +++ b/src/Keyboard.tsx @@ -13,7 +13,7 @@ export function Keyboard(props: KeyboardProps) { ]; return ( -
+