From 04283d68118c50c6f55ad9475def2d1dcddb0aab Mon Sep 17 00:00:00 2001 From: Toni Barth Date: Fri, 20 Sep 2024 17:09:26 +0200 Subject: [PATCH] add a firefox fallback to display the keyboard shortcut as part of the aria-label, since aria-keyshortcuts don't work in Firefox right now --- client/package-lock.json | 7 +++++++ client/package.json | 1 + client/src/pages/game.tsx | 8 ++++++++ client/src/pages/game/slot-selector.tsx | 19 +++++++++++++++++++ client/src/pages/lobby.tsx | 16 ++++++++++++++++ 5 files changed, 51 insertions(+) diff --git a/client/package-lock.json b/client/package-lock.json index 4f3d974..a43f296 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -14,6 +14,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", @@ -2022,6 +2023,12 @@ "node": ">=6" } }, + "node_modules/detect-browser": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/detect-browser/-/detect-browser-5.3.0.tgz", + "integrity": "sha512-53rsFbGdwMwlF7qvCt0ypLM5V5/Mbl0szB7GPN8y9NCcbknYOeVVXdrXEq+90IwAfrrzt6Hd+u2E2ntakICU8w==", + "license": "MIT" + }, "node_modules/dir-glob": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz", diff --git a/client/package.json b/client/package.json index 38e7660..ac5b06b 100644 --- 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 index b6da079..68cb975 100644 --- 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 index 3dbefaf..ffbd822 100644 --- 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,6 +381,11 @@ 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")} @@ -387,6 +393,11 @@ export default ({ game }: { game: Game }) => { className="me-2" onClick={async () => await confirm(true)} aria-keyshortcuts={t("yesShortcut")} + aria-label={ + detect()?.name === "firefox" + ? `${t("yesShortcut")} ${t("yes")}` + : "" + } > {t("yes")} @@ -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 index e87e532..30a517c 100644 --- 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() { createGame(GameMode.Public)} aria-keyshortcuts={t("publicGameShortcut")} + aria-label={ + detect()?.name === "firefox" + ? `${t("publicGameShortcut")} ${t("publicGame")}` + : "" + } > {t("publicGame")} createGame(GameMode.Private)} aria-keyshortcuts={t("privateGameShortcut")} + aria-label={ + detect()?.name === "firefox" + ? `${t("privateGameShortcut")} ${t("privateGame")}` + : "" + } > {t("privateGame")} createGame(GameMode.Local)} aria-keyshortcuts={t("localGameShortcut")} + aria-label={ + detect()?.name === "firefox" + ? `${t("localGameShortcut")} ${t("localGame")}` + : "" + } > {t("localGame")}