feat(a11y): Added skip link, and aria-live regions for announcing dic…

…e rolls
scottbenton · Oct 28, 2023 · 6c81693 · 6c81693
1 parent d9984db
commit 6c81693
Show file tree

Hide file tree

Showing 30 changed files with 431 additions and 50 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/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 }
           ),
-          "&>p[id$='-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
               ? {}
               : {
-                  "&>p[id$='-label']": {
+                  "&>[id$='-label']": {
                     backgroundColor: theme.palette.background.paperInlayDarker,
                     color: theme.palette.text.primary,
                   },
@@ -114,7 +114,7 @@ export function StatComponent(props: StatComponentProps) {
         display={"block"}
         textAlign={"center"}
         variant={"subtitle1"}
-        component={"p"}
+        component={"span"}
         lineHeight={1}
         id={`${label}-label`}
       >
@@ -135,7 +135,7 @@ export function StatComponent(props: StatComponentProps) {
             updateTrack ? { lineHeight: "1.5rem" } : {},
           ]}
           variant={"h6"}
-          component={"p"}
+          component={"span"}
           textAlign={"center"}
         >
           <Typography component={"span"} variant={"body1"} mr={0.2}>

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>
+  );
+}
diff --git a/src/components/shared/DialogTitleWithCloseButton.tsx b/src/components/shared/DialogTitleWithCloseButton.tsx
@@ -1,6 +1,13 @@
 import { Box, DialogTitle, IconButton, Typography } from "@mui/material";
-import { PropsWithChildren, ReactNode } from "react";
+import {
+  PropsWithChildren,
+  ReactNode,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import CloseIcon from "@mui/icons-material/Close";
+import { useScreenReaderAnnouncement } from "providers/ScreenReaderAnnouncementProvider";
 
 export interface DialogTitleWithCloseButtonProps extends PropsWithChildren {
   onClose: () => void;
@@ -11,22 +18,52 @@ export function DialogTitleWithCloseButton(
 ) {
   const { children, actions, onClose } = props;
 
+  const { announcement } = useScreenReaderAnnouncement();
+
+  const [changedAnnouncement, setChangedAnnouncement] = useState<
+    string | undefined
+  >();
+  const isFirstLoadRef = useRef(true);
+  useEffect(() => {
+    if (!isFirstLoadRef.current) {
+      setChangedAnnouncement(announcement);
+    }
+    isFirstLoadRef.current = false;
+  }, [announcement]);
+
   return (
-    <DialogTitle
-      display={"flex"}
-      alignItems={"center"}
-      justifyContent={"space-between"}
-      component={"div"}
-    >
-      <Typography variant={"h6"} component={"h2"}>
-        {children}
-      </Typography>
-      <Box display={"flex"} alignItems={"center"} flexShrink={0} ml={1}>
-        {actions}
-        <IconButton aria-label={"Close Dialog"} onClick={() => onClose()}>
-          <CloseIcon />
-        </IconButton>
+    <>
+      <Box
+        position={"absolute"}
+        width={1}
+        height={1}
+        padding={0}
+        m={-1}
+        overflow={"hidden"}
+        whiteSpace={"nowrap"}
+        border={0}
+        sx={{ clip: "rect(0, 0, 0, 0)" }}
+        aria-live={"polite"}
+        id={"live-dialog-announcement"}
+      >
+        {changedAnnouncement}
       </Box>
-    </DialogTitle>
+      <DialogTitle
+        display={"flex"}
+        alignItems={"center"}
+        justifyContent={"space-between"}
+        component={"div"}
+      >
+        <Typography variant={"h6"} component={"h2"}>
+          {children}
+        </Typography>
+        <Box display={"flex"} alignItems={"center"} flexShrink={0} ml={1}>
+          {actions}
+          <IconButton aria-label={"Close Dialog"} onClick={() => onClose()}>
+            <CloseIcon />
+          </IconButton>
+        </Box>
+      </DialogTitle>
+    </>
   );
 }
diff --git a/src/components/shared/Layout/HeaderMenu.tsx b/src/components/shared/Layout/HeaderMenu.tsx
@@ -22,6 +22,8 @@ import {
   CHARACTER_ROUTES,
   constructCharacterPath,
 } from "pages/Character/routes";
+import AccessibilityIcon from "@mui/icons-material/AccessibilityNew";
+import { AccessibilitySettingsDialog } from "../AccessibilitySettingsDialog/AccessibilitySettingsDialog";
 
 export function HeaderMenu() {
   const userId = useStore((store) => store.auth.uid);
@@ -34,6 +36,9 @@ export function HeaderMenu() {
   const { gameSystem, chooseGameSystem } = useGameSystem();
   const isLocal = getIsLocalEnvironment();
 
+  const [accessibilitySettingsOpen, setAccessibilitySettingsOpen] =
+    useState(false);
+
   return (
     <>
       <ButtonBase
@@ -50,6 +55,17 @@ export function HeaderMenu() {
         onClose={() => setMenuOpen(false)}
         anchorEl={anchorRef.current}
       >
+        <MenuItem
+          onClick={() => {
+            setMenuOpen(false);
+            setAccessibilitySettingsOpen(true);
+          }}
+        >
+          <ListItemIcon>
+            <AccessibilityIcon />
+          </ListItemIcon>
+          <ListItemText>Accessibility Settings</ListItemText>
+        </MenuItem>
         <MenuItem
           onClick={() => {
             setMenuOpen(false);
@@ -99,6 +115,10 @@ export function HeaderMenu() {
           </MenuItem>
         )}
       </Menu>
+      <AccessibilitySettingsDialog
+        open={accessibilitySettingsOpen}
+        onClose={() => setAccessibilitySettingsOpen(false)}
+      />
     </>
   );
 }
diff --git a/src/components/shared/Layout/Layout.tsx b/src/components/shared/Layout/Layout.tsx
@@ -16,6 +16,7 @@ import { sendPageViewEvent } from "lib/analytics.lib";
 import { UserNameDialog } from "components/shared/UserNameDialog";
 import { useStore } from "stores/store";
 import { AUTH_STATE } from "stores/auth/auth.slice.type";
+import { SkipToContentButton } from "./SkipToContentButton";
 
 export interface LayoutProps {}
 
@@ -68,8 +69,9 @@ export function Layout(props: LayoutProps) {
         backgroundColor: theme.palette.background.default,
       })}
     >
+      <SkipToContentButton />
       <Header />
-      <main>
+      <main id={"main-content"}>
         <Outlet />
       </main>
       <Footer />

diff --git a/src/components/shared/Layout/SkipToContentButton.tsx b/src/components/shared/Layout/SkipToContentButton.tsx
@@ -0,0 +1,24 @@
+import { Box, Button } from "@mui/material";
+
+export function SkipToContentButton() {
+  return (
+    <Button
+      LinkComponent={"a"}
+      variant={"contained"}
+      color={"primary"}
+      href={"#main-content"}
+      sx={{
+        position: "absolute",
+        top: 0,
+        left: 0,
+        transform: "translate(-100%)",
+        zIndex: 1000,
+        "&:focus": {
+          transform: "translate(0%)",
+        },
+      }}
+    >
+      Skip to Content
+    </Button>
+  );
+}