add a firefox fallback to display the keyboard shortcut as part of th…

…e aria-label, since aria-keyshortcuts don't work in Firefox right now
Timtam · Sep 20, 2024 · 04283d6 · 04283d6
1 parent 60b9013
commit 04283d6
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 0 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -17,6 +17,7 @@
         "boolify-string": "^2.0.2",
         "bootstrap": "^5.3.3",
         "deepcopy": "^2.1.0",
+        "detect-browser": "^5.3.0",
         "howler": "^2.2.4",
         "i18next": "^23.10.1",
         "i18next-browser-languagedetector": "^7.2.1",

diff --git a/client/src/pages/game.tsx b/client/src/pages/game.tsx
@@ -1,6 +1,7 @@
 import EventManager from "@lomray/event-manager"
 import { bindKeyCombo, unbindKeyCombo } from "@rwh/keystrokes"
 import deepcopy from "deepcopy"
+import { detect } from "detect-browser"
 import { useEffect, useMemo } from "react"
 import Button from "react-bootstrap/Button"
 import ButtonGroup from "react-bootstrap/ButtonGroup"
@@ -364,6 +365,13 @@ export function Game() {
                                     : t("startGameShortcut")
                                 : ""
                         }
+                        aria-label={
+                            detect()?.name === "firefox" && canStartOrStopGame()
+                                ? game.state !== GameState.Open
+                                    ? `${t("stopGameShortcut")} ${t("stopGame")}`
+                                    : `${t("startGameShortcut")} ${t("startGame")}`
+                                : ""
+                        }
                     >
                         {canStartOrStopGame()
                             ? game.state !== GameState.Open

diff --git a/client/src/pages/game/slot-selector.tsx b/client/src/pages/game/slot-selector.tsx
@@ -1,5 +1,6 @@
 import EventManager from "@lomray/event-manager"
 import { bindKeyCombo, unbindKeyCombo } from "@rwh/keystrokes"
+import { detect } from "detect-browser"
 import { useEffect, useState } from "react"
 import Button from "react-bootstrap/Button"
 import ToggleButton from "react-bootstrap/ToggleButton"
@@ -380,13 +381,23 @@ export default ({ game }: { game: Game }) => {
                         className="me-2"
                         onClick={async () => await confirm(false)}
                         aria-keyshortcuts={t("noShortcut")}
+                        aria-label={
+                            detect()?.name === "firefox"
+                                ? `${t("noShortcut")} ${t("no")}`
+                                : ""
+                        }
                     >
                         {t("no")}
                     </Button>
                     <Button
                         className="me-2"
                         onClick={async () => await confirm(true)}
                         aria-keyshortcuts={t("yesShortcut")}
+                        aria-label={
+                            detect()?.name === "firefox"
+                                ? `${t("yesShortcut")} ${t("yes")}`
+                                : ""
+                        }
                     >
                         {t("yes")}
                     </Button>
@@ -531,6 +542,14 @@ export default ({ game }: { game: Game }) => {
                                 ? t("submitGuessShortcut")
                                 : ""
                         }
+                        aria-label={
+                            detect()?.name === "firefox" &&
+                            ((actionRequired() === PlayerState.Guessing &&
+                                selectedSlot !== "0") ||
+                                actionRequired() === PlayerState.Intercepting)
+                                ? `${t("submitGuessShortcut")} ${t("submitGuess")}`
+                                : ""
+                        }
                     >
                         {actionRequired() === PlayerState.Guessing ||
                         actionRequired() === PlayerState.Intercepting

diff --git a/client/src/pages/lobby.tsx b/client/src/pages/lobby.tsx
@@ -1,5 +1,6 @@
 import EventManager from "@lomray/event-manager"
 import { bindKeyCombo, unbindKeyCombo } from "@rwh/keystrokes"
+import { detect } from "detect-browser"
 import { useEffect, useMemo } from "react"
 import Dropdown from "react-bootstrap/Dropdown"
 import Table from "react-bootstrap/Table"
@@ -75,18 +76,33 @@ export function Lobby() {
                     <Dropdown.Item
                         onClick={() => createGame(GameMode.Public)}
                         aria-keyshortcuts={t("publicGameShortcut")}
+                        aria-label={
+                            detect()?.name === "firefox"
+                                ? `${t("publicGameShortcut")} ${t("publicGame")}`
+                                : ""
+                        }
                     >
                         {t("publicGame")}
                     </Dropdown.Item>
                     <Dropdown.Item
                         onClick={() => createGame(GameMode.Private)}
                         aria-keyshortcuts={t("privateGameShortcut")}
+                        aria-label={
+                            detect()?.name === "firefox"
+                                ? `${t("privateGameShortcut")} ${t("privateGame")}`
+                                : ""
+                        }
                     >
                         {t("privateGame")}
                     </Dropdown.Item>
                     <Dropdown.Item
                         onClick={() => createGame(GameMode.Local)}
                         aria-keyshortcuts={t("localGameShortcut")}
+                        aria-label={
+                            detect()?.name === "firefox"
+                                ? `${t("localGameShortcut")} ${t("localGame")}`
+                                : ""
+                        }
                     >
                         {t("localGame")}
                     </Dropdown.Item>