Make Single List View screen reader readable

KatharinaSimma · May 1, 2023 · 8dfc2e1 · 8dfc2e1
1 parent 9931320
commit 8dfc2e1
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 7 deletions.
diff --git a/app/[listsId]/ListTitle.tsx b/app/[listsId]/ListTitle.tsx
@@ -17,7 +17,11 @@ export default function ListTitle(props: Props) {
 
   return (
     <div className="flex flex-wrap items-center justify-center gap-3 py-14">
-      <h1 className="text-3xl text-center border border-transparent">
+      <h1
+        className="text-3xl text-center border border-transparent"
+        role="status"
+        aria-label="List title"
+      >
         {props.list.title}
       </h1>
       <div className="flex gap-3">
@@ -39,7 +43,12 @@ export default function ListTitle(props: Props) {
           })}
         </div>
         {props.progress !== '0' ? (
-          <div className="radial-progress text-primary" style={style}>
+          <div
+            className="radial-progress text-primary"
+            style={style}
+            role="status"
+            aria-label="List progress"
+          >
             {props.progress}%
           </div>
         ) : null}

diff --git a/app/[listsId]/SingleViewList.tsx b/app/[listsId]/SingleViewList.tsx
@@ -194,7 +194,7 @@ export default function SingleViewList(props: Props) {
         <>
           <div className="flex flex-wrap items-center gap-1 my-2 justify-items-center">
             {data.singleListWithTasks.sharedUsers.length > 1 && (
-              <div className="w-full">
+              <p className="w-full" role="status">
                 You
                 {data.singleListWithTasks.sharedUsers.map((user: User) => {
                   if (props.currentUser === user.username) {
@@ -211,9 +211,8 @@ export default function SingleViewList(props: Props) {
                   );
                 })}
                 share this list.
-              </div>
+              </p>
             )}
-            {onShareError ? <p className="text-error">{onShareError}</p> : null}
           </div>
 
           <div className="flex flex-wrap items-center my-2 justify-items-center">
@@ -227,7 +226,7 @@ export default function SingleViewList(props: Props) {
                 placeholder="enter a username"
                 value={username}
                 onChange={(event) => setUsername(event.currentTarget.value)}
-                onFocus={() => setOnError('')}
+                onFocus={() => setOnShareError('')}
               />
               <button
                 className="flex btn btn-outline btn-primary"
@@ -239,6 +238,11 @@ export default function SingleViewList(props: Props) {
                 <ShareIcon className="w-6 h-6" />
               </button>
             </div>
+            {onShareError ? (
+              <p className="m-3 text-error" role="status">
+                {onShareError}
+              </p>
+            ) : null}
           </div>
           <EditLIstTitle list={data.singleListWithTasks} />
           <div className="w-full my-3">

diff --git a/app/components/TaskComponent.tsx b/app/components/TaskComponent.tsx
@@ -31,7 +31,6 @@ export default function TaskComponent(props: Props) {
   const [done, setDone] = useState(props.task.done);
   const [title, setTitle] = useState(props.task.title);
   const [editTitle, setEditTitle] = useState(false);
-
   const { task } = props;
 
   const [handleDeleteTask, { loading }] = useMutation(deleteTaskMutation, {
@@ -81,6 +80,18 @@ export default function TaskComponent(props: Props) {
           id={`task-title-${task.id}`}
           className="checkbox checkbox-primary"
           checked={done}
+          onKeyUp={async (event) => {
+            if (event.key === 'Enter') {
+              setDone(!done);
+              await handleUpdateTask({
+                variables: {
+                  id: task.id,
+                  title: title,
+                  done: !done,
+                },
+              });
+            }
+          }}
           onChange={async () => {
             setDone(!done);
             await handleUpdateTask({