Merge pull request #40 from turnercore/screen-reader-improvements

Screen reader improvements, some layout improvements, added reduced motion and accessibility options
turnercore · Jan 6, 2024 · 1e5412e · 1e5412e
2 parents 437b403 + 53a14e2
commit 1e5412e
Show file tree

Hide file tree

Showing 19 changed files with 640 additions and 105 deletions.
diff --git a/clocktower/app/account/profile/components/UpdateAccountForm.tsx b/clocktower/app/account/profile/components/UpdateAccountForm.tsx
@@ -51,6 +51,8 @@ import hash from '@/tools/hash'
 import updateUserAvatarSetSA from '../actions/updateUserAvatarSet'
 import { BsTrash3Fill } from 'react-icons/bs'
 import { DialogClose } from '@radix-ui/react-dialog'
+import { useAccessibility } from '@/providers/AccessibilityProvider'
+
 // validation schema for form
 const formSchema = z
   .object({
@@ -159,6 +161,7 @@ const UpdateAccountForm = ({
   const [currentColor, setCurrentColor] = useState(profile.color)
   const [avatarSet, setAvatarSet] = useState(profile.avatar_set || 1)
   const supabase = createClientComponentClient()
+  const { reduceMotion } = useAccessibility()
 
   useEffect(() => {
     async function getUserFromSession() {
@@ -566,12 +569,22 @@ const UpdateAccountForm = ({
                   </AlertDialogHeader>
                   <AlertDialogFooter>
                     <AlertDialogCancel>🙅‍♀️ Cancel</AlertDialogCancel>
-                    <AlertDialogAction
-                      className='vibrating-element bg-red-500'
-                      onClick={handleDelete}
-                    >
-                      Delete
-                    </AlertDialogAction>
+                    {reduceMotion ? (
+                      // If reduce motion is on, don't vibrate the button
+                      <AlertDialogAction
+                        className='bg-red-500'
+                        onClick={handleDelete}
+                      >
+                        Delete
+                      </AlertDialogAction>
+                    ) : (
+                      <AlertDialogAction
+                        className='vibrating-element bg-red-500'
+                        onClick={handleDelete}
+                      >
+                        Delete
+                      </AlertDialogAction>
+                    )}
                   </AlertDialogFooter>
                 </AlertDialogContent>
               </AlertDialog>

diff --git a/clocktower/app/layout.tsx b/clocktower/app/layout.tsx
@@ -4,7 +4,7 @@ import Footer from '@/components/layout/Footer'
 import { Metadata, Viewport } from 'next'
 import { Toaster } from '@/components/ui/toaster'
 import { GeistSans } from 'geist/font'
-import { Providers } from '@/app/providers'
+import { Providers } from '@/providers/providers'
 import { Suspense } from 'react'
 
 const url = process.env.NEXT_PUBLIC_DOMAIN || 'http://localhost:3000'

diff --git a/clocktower/app/magic/page.tsx b/clocktower/app/magic/page.tsx
@@ -1,8 +1,10 @@
 'use client'
 import React, { useEffect, useRef } from 'react'
 import anime from 'animejs'
+import { useAccessibility } from '@/providers/AccessibilityProvider'
 
 const MagicPage = () => {
+  const { reduceMotion, screenReaderMode } = useAccessibility()
   const headingRef = useRef(null)
   const wandRef = useRef(null)
   const mRef = useRef(null)
@@ -100,6 +102,42 @@ const MagicPage = () => {
     })
   }, [])
 
+  if (reduceMotion || screenReaderMode) {
+    return (
+      <div className='flex flex-col items-center mt-16'>
+        <div className='flex flex-row items-center'>
+          <p ref={wandRef} className='text-7xl font-bold mb-4 ml-8'>
+            🪄
+          </p>
+          <h1
+            ref={headingRef}
+            className='text-8xl font-bold mb-4 dark:text-black text-white'
+          >
+            <span ref={mRef}>M</span>
+            <span ref={aRef}>a</span>
+            <span ref={gRef}>g</span>
+            <span ref={iRef}>i</span>
+            <span ref={cRef}>c</span>
+          </h1>
+        </div>
+
+        <div className=' pl-28 mt-2'>
+          <p ref={paragraph1Ref} className='text-xl'>
+            What's going to happen next?
+          </p>
+          <div className='flex flex-row items-center'>
+            <p ref={hintRef} className='text-lg italic'>
+              Hint:{' '}
+            </p>
+            <p ref={paragraph2Ref} className='text-lg italic'>
+              Check your email.
+            </p>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
   return (
     <div className='flex flex-col items-center mt-16'>
       <div className='flex flex-row items-center'>

diff --git a/clocktower/app/page.tsx b/clocktower/app/page.tsx
@@ -17,13 +17,13 @@ const Home = async () => {
   return (
     <div className='relative flex flex-col text-center items-center mb-[100px]'>
       <SiteTitle />
-      <div className=' mb-8 flex flex-col items-center'>
+      <div className=' mb-8 flex flex-col items-center space-y-4'>
         <p className='text-2xl mb-2'>Shared game clocks for tabletop RPGs</p>
         {isLoggedIn ? (
-          <div>
+          <>
             <p>To make some clocks, select a tower from the dropdown above.</p>
             <Button variant='outline'>Or create a new tower!</Button>
-          </div>
+          </>
         ) : (
           <div className='flex flex-row space-x-3 items-center mx-auto'>
             <Button variant='outline' asChild>

diff --git a/clocktower/app/tower/[id]/components/ClockSettingsDialog.tsx b/clocktower/app/tower/[id]/components/ClockSettingsDialog.tsx
@@ -272,10 +272,11 @@ const ClockSettingsDialog: FC<ClockSettingsDialogProps> = ({
           </DialogTitle>
         </DialogHeader>
         <div className='flex flex-row space-x-2 items-center w-full'>
-          <Label> Name: </Label>
+          <Label> Clock Name: </Label>
           <Input
             type='text'
             placeholder='Clock Name'
+            aria-label='Clock Name'
             defaultValue={clockData.name}
             onBlur={handleNameChange}
           />
@@ -285,7 +286,11 @@ const ClockSettingsDialog: FC<ClockSettingsDialogProps> = ({
             {configuredPieChart}
             <AlertDialog>
               <AlertDialogTrigger asChild>
-                <Button variant='destructive' className='w-1/2 text-center'>
+                <Button
+                  aria-label='Delete Clock'
+                  variant='destructive'
+                  className='w-1/2 text-center'
+                >
                   <BsTrash3Fill className='w-full h-full' />
                 </Button>
               </AlertDialogTrigger>
@@ -299,6 +304,7 @@ const ClockSettingsDialog: FC<ClockSettingsDialogProps> = ({
                 <AlertDialogFooter>
                   <AlertDialogCancel>Cancel</AlertDialogCancel>
                   <AlertDialogAction
+                    aria-label='Confirm Delete Clock'
                     className='vibrating-element bg-red-500'
                     onClick={handleDelete}
                   >
@@ -310,9 +316,13 @@ const ClockSettingsDialog: FC<ClockSettingsDialogProps> = ({
           </div>
           <div className='w-1/2 flex flex-col space-y-6 mx-5'>
             <div className='flex flex-col space-y-2 w-full'>
-              <Label> {segments} Segments </Label>
+              <Label id='segments-label'>{segments} Segments</Label>
               <div className='flex flex-row space-x-2 items-center'>
                 <Slider
+                  aria-labelledby='segments-label'
+                  aria-label='Clock Segments Slider'
+                  name='clock-segments-slider'
+                  aria-
                   defaultValue={[clockData.segments]}
                   min={1}
                   max={18}
@@ -325,8 +335,9 @@ const ClockSettingsDialog: FC<ClockSettingsDialogProps> = ({
               </div>
             </div>
             <div className='flex flex-col space-y-2 w-full'>
-              <Label> Line Width </Label>
+              <Label id='line-width-slider-description'>Line Width</Label>
               <Slider
+                aria-describedby='line-width-slider-description'
                 defaultValue={[clockData.line_width]}
                 min={1}
                 max={50}
@@ -335,16 +346,23 @@ const ClockSettingsDialog: FC<ClockSettingsDialogProps> = ({
               />
             </div>
             <div className='flex flex-row space-x-2 items-center'>
-              <Label className='flex items-center space-x-2'> Rounded </Label>
+              <Label
+                htmlFor={`rounded-slider-${clockData.id}`}
+                className='flex items-center space-x-2'
+              >
+                Rounded Clock
+              </Label>
               <Input
+                id={`rounded-slider-${clockData.id}`}
                 type='checkbox'
                 checked={clockData.rounded}
                 onChange={handleIsRoundedChange}
               />
             </div>
             <div className='flex flex-col space-y-2 w-full'>
-              <Label> Color </Label>
+              <Label htmlFor={`color-picker-${clockData.id}`}> Color </Label>
               <RealtimeColorPicker
+                id={`color-picker-${clockData.id}`}
                 color={clockData.color}
                 onChange={handleColorChange}
               />