Merge pull request #262 from scottbenton/fix/a11y-testing

feat(home page): addressed a11y violations on the home page
scottbenton · Oct 29, 2023 · 06a4cfb · 06a4cfb
2 parents 9dcb023 + 7a290bf
commit 06a4cfb
Show file tree

Hide file tree

Showing 37 changed files with 548 additions and 73 deletions.
diff --git a/src/Router.tsx b/src/Router.tsx
@@ -18,6 +18,7 @@ import { useListenToCampaigns } from "stores/campaign/useListenToCampaigns";
 import { useListenToAuth } from "stores/auth/useListenToAuth";
 import { useListenToWorlds } from "stores/world/useListenToWorlds";
 import { useListenToOracleSettings } from "stores/settings/useListenToOracleSettings";
+import { useListenToAccessibilitySettings } from "stores/accessibilitySettings/useListenToAccessibilitySettings";
 
 const router = createBrowserRouter(
   createRoutesFromElements(
@@ -108,6 +109,8 @@ const router = createBrowserRouter(
 export function Router() {
   useListenToAuth();
 
+  useListenToAccessibilitySettings();
+
   useListenToCharacters();
   useListenToCampaigns();
   useListenToWorlds();

diff --git a/src/api-calls/custom-move-oracle-settings/settings/_getRef.ts b/src/api-calls/custom-move-oracle-settings/settings/_getRef.ts
@@ -5,7 +5,7 @@ import {
   doc,
   DocumentReference,
 } from "firebase/firestore";
-import { OracleSettings } from "types/UserSettings.type";
+import { OracleSettings } from "types/UserOracleSettings.type";
 
 export function constructUserSettingsCollectionPath(userId: string) {
   return `/users/${userId}/settings`;

diff --git a/src/api-calls/custom-move-oracle-settings/settings/listenToOracleSettings.ts b/src/api-calls/custom-move-oracle-settings/settings/listenToOracleSettings.ts
@@ -1,6 +1,6 @@
 import { onSnapshot, setDoc } from "firebase/firestore";
 import { decodeDataswornId } from "functions/dataswornIdEncoder";
-import { OracleSettings } from "types/UserSettings.type";
+import { OracleSettings } from "types/UserOracleSettings.type";
 import { getUserOracleSettingsDoc } from "./_getRef";
 
 export function listenToOracleSettings(

diff --git a/src/api-calls/custom-move-oracle-settings/updateSettings.ts b/src/api-calls/custom-move-oracle-settings/updateSettings.ts
@@ -1,4 +1,4 @@
-import { arrayRemove, arrayUnion, setDoc, updateDoc } from "firebase/firestore";
+import { setDoc, updateDoc } from "firebase/firestore";
 import { getCampaignSettingsDoc, getCharacterSettingsDoc } from "./_getRef";
 import { createApiFunction } from "api-calls/createApiFunction";
 import { SettingsDoc } from "types/Settings.type";

diff --git a/src/api-calls/user/settings/_getRef.ts b/src/api-calls/user/settings/_getRef.ts
@@ -0,0 +1,30 @@
+import { firestore } from "config/firebase.config";
+import {
+  CollectionReference,
+  DocumentReference,
+  collection,
+  doc,
+} from "firebase/firestore";
+import { IAccessibilitySettings } from "types/UserAccessibilitySettings.type";
+
+export function constructUserSettingsCollectionPath(userId: string) {
+  return `/users/${userId}/settings`;
+}
+
+export function constructUserAccessibilitySettingsDocPath(userId: string) {
+  return `/users/${userId}/settings/accessibility`;
+}
+
+export function getUserSettingsCollectionRef(userId: string) {
+  return collection(
+    firestore,
+    constructUserSettingsCollectionPath(userId)
+  ) as CollectionReference<any>;
+}
+
+export function getUserAccessibilitySettingsDoc(userId: string) {
+  return doc(
+    firestore,
+    constructUserAccessibilitySettingsDocPath(userId)
+  ) as DocumentReference<IAccessibilitySettings>;
+}
diff --git a/src/api-calls/user/settings/listenToAccessibilitySettings.ts b/src/api-calls/user/settings/listenToAccessibilitySettings.ts
@@ -0,0 +1,12 @@
+import { onSnapshot } from "firebase/firestore";
+import { IAccessibilitySettings } from "types/UserAccessibilitySettings.type";
+import { getUserAccessibilitySettingsDoc } from "./_getRef";
+
+export const listenToAccessibilitySettings = (
+  uid: string,
+  onSettings: (settings: IAccessibilitySettings) => void
+) => {
+  return onSnapshot(getUserAccessibilitySettingsDoc(uid), (snapshot) => {
+    onSettings(snapshot.data() ?? {});
+  });
+};
diff --git a/src/api-calls/user/settings/updateAccessibilitySettings.ts b/src/api-calls/user/settings/updateAccessibilitySettings.ts
@@ -0,0 +1,14 @@
+import { ApiFunction } from "api-calls/createApiFunction";
+import { setDoc, updateDoc } from "firebase/firestore";
+import { IAccessibilitySettings } from "types/UserAccessibilitySettings.type";
+import { getUserAccessibilitySettingsDoc } from "./_getRef";
+
+export const updateAccessibilitySettings: ApiFunction<
+  { uid: string; settings: Partial<IAccessibilitySettings> },
+  void
+> = (params) => {
+  const { uid, settings } = params;
+  return setDoc(getUserAccessibilitySettingsDoc(uid), settings, {
+    merge: true,
+  });
+};
diff --git a/src/components/features/ProgressTrack/ProgressTrack.tsx b/src/components/features/ProgressTrack/ProgressTrack.tsx
@@ -6,7 +6,7 @@ import {
   Stack,
   Typography,
 } from "@mui/material";
-import { useEffect, useState } from "react";
+import { useEffect, useId, useState } from "react";
 import { ProgressTrackTick } from "./ProgressTrackTick";
 import MinusIcon from "@mui/icons-material/Remove";
 import PlusIcon from "@mui/icons-material/Add";
@@ -160,12 +160,15 @@ export function ProgressTrack(props: ProgressTracksProps) {
     setChecks(checks);
   }, [max, value]);
 
+  const labelId = useId();
+
   return (
     <Box>
       <Box>
         {difficulty && !hideDifficultyLabel && (
           <Typography
             variant={"subtitle1"}
+            component={"p"}
             color={(theme) => theme.palette.text.secondary}
             fontFamily={(theme) => theme.fontFamilyTitle}
           >
@@ -175,6 +178,8 @@ export function ProgressTrack(props: ProgressTracksProps) {
         {(label || onEdit) && (
           <Typography
             variant={"h6"}
+            component={"p"}
+            id={labelId}
             color={(theme) => theme.palette.text.primary}
             fontFamily={(theme) => theme.fontFamilyTitle}
           >
@@ -194,6 +199,7 @@ export function ProgressTrack(props: ProgressTracksProps) {
         {description && (
           <Typography
             variant={"subtitle1"}
+            component={"p"}
             color={(theme) => theme.palette.text.secondary}
             whiteSpace={"pre-wrap"}
           >
@@ -204,12 +210,14 @@ export function ProgressTrack(props: ProgressTracksProps) {
       <Box display={"flex"} mt={label ? 1 : 0}>
         {onValueChange && (
           <ButtonBase
+            aria-label={"Decrement Track"}
             onClick={() =>
               onValueChange &&
               onValueChange(
                 value > 0 ? value - getDifficultyStep(difficulty) : 0
               )
             }
+            focusRipple
             sx={(theme) => ({
               backgroundColor:
                 theme.palette.darkGrey[
@@ -238,6 +246,14 @@ export function ProgressTrack(props: ProgressTracksProps) {
           borderTop={1}
           borderBottom={1}
           borderColor={(theme) => theme.palette.divider}
+          role={"progressbar"}
+          aria-labelledby={labelId}
+          aria-valuemin={0}
+          aria-valuemax={max}
+          aria-valuenow={value}
+          aria-valuetext={`${value} (${Math.floor(
+            value / 4
+          )} boxes fully filled)`}
         >
           {checks.map((value, index) => (
             <Box
@@ -250,12 +266,13 @@ export function ProgressTrack(props: ProgressTracksProps) {
                   index !== 0 ? theme.palette.divider : undefined,
               })}
             >
-              <ProgressTrackTick value={value} key={index} />
+              <ProgressTrackTick value={value} key={index} aria-hidden />
             </Box>
           ))}
         </Box>
         {onValueChange && (
           <ButtonBase
+            aria-label={"Increment Track"}
             onClick={() =>
               onValueChange(
                 value < max ? value + getDifficultyStep(difficulty) : max

diff --git a/src/components/features/ProgressTrack/ProgressTrackTick.tsx b/src/components/features/ProgressTrack/ProgressTrackTick.tsx
@@ -13,6 +13,7 @@ const tickProps = (sizeValue: number) => ({
   height: sizeValue,
   strokeWidth: 4,
   style: { stroke: "currentcolor" },
+  "aria-hidden": true,
 });
 
 export function ProgressTrackTick(props: ProgressTrackTickProps) {

diff --git a/src/components/features/Track.tsx b/src/components/features/Track.tsx
@@ -6,7 +6,7 @@ import {
   SxProps,
   Theme,
 } from "@mui/material";
-import { useEffect, useState } from "react";
+import { useEffect, useId, useState } from "react";
 
 export interface TrackProps {
   label?: string;
@@ -49,6 +49,8 @@ export function Track(props: TrackProps) {
     setNumbers(getArr(min, max));
   }, [min, max]);
 
+  const labelId = useId();
+
   return (
     <Box sx={sx} display={"flex"} overflow={"auto"}>
       {label && (
@@ -75,12 +77,15 @@ export function Track(props: TrackProps) {
           <Typography
             fontFamily={(theme) => theme.fontFamilyTitle}
             variant={"subtitle1"}
+            id={labelId}
+            component={"p"}
           >
             {label}
           </Typography>
         </Box>
       )}
       <ToggleButtonGroup
+        aria-labelledby={labelId}
         exclusive
         disabled={disabled || loading}
         value={value}

diff --git a/src/components/features/characters/StatComponent.tsx b/src/components/features/characters/StatComponent.tsx
@@ -68,7 +68,7 @@ export function StatComponent(props: StatComponentProps) {
             ["background-color", "border-color", "outline-width"],
             { duration: theme.transitions.duration.shorter }
           ),
-          "&>h6#track-label": {
+          "&>[id$='-label']": {
             transition: theme.transitions.create(
               ["background-color", "color"],
               { duration: theme.transitions.duration.shorter }
@@ -82,7 +82,7 @@ export function StatComponent(props: StatComponentProps) {
             updateTrack || disableRoll
               ? {}
               : {
-                  "&>h6#track-label": {
+                  "&>[id$='-label']": {
                     backgroundColor: theme.palette.background.paperInlayDarker,
                     color: theme.palette.text.primary,
                   },
@@ -114,8 +114,9 @@ export function StatComponent(props: StatComponentProps) {
         display={"block"}
         textAlign={"center"}
         variant={"subtitle1"}
+        component={"span"}
         lineHeight={1}
-        id={"track-label"}
+        id={`${label}-label`}
       >
         {label}
         {hasAdds && label !== "Adds" && "*"}
@@ -134,6 +135,7 @@ export function StatComponent(props: StatComponentProps) {
             updateTrack ? { lineHeight: "1.5rem" } : {},
           ]}
           variant={"h6"}
+          component={"span"}
           textAlign={"center"}
         >
           <Typography component={"span"} variant={"body1"} mr={0.2}>
@@ -154,7 +156,10 @@ export function StatComponent(props: StatComponentProps) {
           }}
           type={"number"}
           size={"small"}
-          inputProps={{ inputMode: "numeric" }}
+          inputProps={{
+            inputMode: "numeric",
+            "aria-labelledby": `${label}-label`,
+          }}
           onFocus={() => setIsInputFocused(true)}
           onBlur={() => setIsInputFocused(false)}
         />

diff --git a/src/components/shared/AccessibilitySettingsDialog/AccessibilitySettingsDialog.tsx b/src/components/shared/AccessibilitySettingsDialog/AccessibilitySettingsDialog.tsx
@@ -0,0 +1,59 @@
+import {
+  Box,
+  Button,
+  Checkbox,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  FormControlLabel,
+} from "@mui/material";
+import { DialogTitleWithCloseButton } from "../DialogTitleWithCloseButton";
+import { useStore } from "stores/store";
+
+export interface AccessibilitySettingsDialogProps {
+  open?: boolean;
+  onClose: () => void;
+}
+
+export function AccessibilitySettingsDialog(
+  props: AccessibilitySettingsDialogProps
+) {
+  const { open, onClose } = props;
+
+  const accessibilitySettings = useStore(
+    (store) => store.accessibilitySettings.settings
+  );
+
+  const updateSettings = useStore(
+    (store) => store.accessibilitySettings.updateSettings
+  );
+
+  return (
+    <Dialog open={open ?? false} onClose={onClose}>
+      <DialogTitleWithCloseButton onClose={onClose}>
+        Accessibility Settings
+      </DialogTitleWithCloseButton>
+      <DialogContent>
+        <Box sx={{ pt: 1 }}>
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={accessibilitySettings.verboseRollResults ?? false}
+                onChange={(evt, value) =>
+                  updateSettings({ verboseRollResults: value }).catch(() => {})
+                }
+              />
+            }
+            label={"Announce rolls and modifiers when rolling?"}
+            sx={{ textTransform: "capitalize", marginRight: 3 }}
+          />
+        </Box>
+      </DialogContent>
+      <DialogActions>
+        <Button variant={"contained"} onClick={onClose}>
+          Done
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}