#27 Added tab indices to numerous elements so they are reachable in t…

…he tab order. Adjusted aria text for multiple elements and added modest visual effects to indicate when non-interactive elements have focus. Added keyup handler on 'view question' link for keyboard support. Disabled autocomplete on table inputs. Added logic to toggle inert on the game board when a popup is visible.
ucfopen · Jul 11, 2023 · 02fb33e · 02fb33e
1 parent 4f438b5
commit 02fb33e
Show file tree

Hide file tree

Showing 13 changed files with 236 additions and 25 deletions.
diff --git a/src/__snapshots__/player.test.js.snap b/src/__snapshots__/player.test.js.snap
@@ -224,7 +224,10 @@ exports[`Player Render with no question 1`] = `
       className="popup help"
     >
       <div>
-        <h2>
+        <h2
+          aria-label="Secret Spreadsheet widget instructions. Cells of this spreadsheet have been intentionally hidden. Navigate the spreadsheet and input the hidden data until all cells have been filled. Capitalization and punctuation must be precise to match correctly. Navigate the table using your screen reader's dedicated key bindings, or use the tab key to move between blank cells."
+          tabIndex="0"
+        >
           Secret Spreadsheet - How it works:
         </h2>
         <div>
@@ -248,6 +251,7 @@ exports[`Player Render with no question 1`] = `
         </div>
         <button
           onClick={[Function]}
+          tabIndex="0"
           type="button"
           value="Got it!"
         >
@@ -265,6 +269,7 @@ exports[`Player Render with no question 1`] = `
        to complete the spreadsheet:
     </p>
     <form
+      inert="yes"
       onSubmit={[Function]}
     >
       <div
@@ -290,6 +295,7 @@ exports[`Player Render with no question 1`] = `
                   id="cell1"
                 >
                   <input
+                    autoComplete="off"
                     className="unanswered"
                     id="1-input"
                     onBlur={[Function]}
@@ -308,6 +314,7 @@ exports[`Player Render with no question 1`] = `
                   id="cell2"
                 >
                   <input
+                    autoComplete="off"
                     className="unanswered"
                     id="2-input"
                     onBlur={[Function]}
@@ -359,7 +366,10 @@ exports[`Player Render with question and body 1`] = `
       className="popup help"
     >
       <div>
-        <h2>
+        <h2
+          aria-label="Secret Spreadsheet widget instructions. Cells of this spreadsheet have been intentionally hidden. Navigate the spreadsheet and input the hidden data until all cells have been filled. Capitalization and punctuation must be precise to match correctly. Navigate the table using your screen reader's dedicated key bindings, or use the tab key to move between blank cells."
+          tabIndex="0"
+        >
           Secret Spreadsheet - How it works:
         </h2>
         <div>
@@ -383,6 +393,7 @@ exports[`Player Render with question and body 1`] = `
         </div>
         <button
           onClick={[Function]}
+          tabIndex="0"
           type="button"
           value="Got it!"
         >
@@ -400,6 +411,7 @@ exports[`Player Render with question and body 1`] = `
        to complete the spreadsheet:
     </p>
     <form
+      inert="yes"
       onSubmit={[Function]}
     >
       <div
@@ -425,6 +437,7 @@ exports[`Player Render with question and body 1`] = `
                   id="cell1"
                 >
                   <input
+                    autoComplete="off"
                     className="unanswered"
                     id="1-input"
                     onBlur={[Function]}
@@ -443,6 +456,7 @@ exports[`Player Render with question and body 1`] = `
                   id="cell2"
                 >
                   <input
+                    autoComplete="off"
                     className="unanswered"
                     id="2-input"
                     onBlur={[Function]}
@@ -473,8 +487,11 @@ exports[`Player Render with question and body 1`] = `
          missing cells
       </p>
       <p
+        aria-roledescription="button"
         className="link"
         onClick={[Function]}
+        onKeyUp={[Function]}
+        tabIndex="0"
       >
         View Question
       </p>
@@ -500,7 +517,10 @@ exports[`Player Render with question and no body 1`] = `
       className="popup help"
     >
       <div>
-        <h2>
+        <h2
+          aria-label="Secret Spreadsheet widget instructions. Cells of this spreadsheet have been intentionally hidden. Navigate the spreadsheet and input the hidden data until all cells have been filled. Capitalization and punctuation must be precise to match correctly. Navigate the table using your screen reader's dedicated key bindings, or use the tab key to move between blank cells."
+          tabIndex="0"
+        >
           Secret Spreadsheet - How it works:
         </h2>
         <div>
@@ -524,6 +544,7 @@ exports[`Player Render with question and no body 1`] = `
         </div>
         <button
           onClick={[Function]}
+          tabIndex="0"
           type="button"
           value="Got it!"
         >
@@ -541,6 +562,7 @@ exports[`Player Render with question and no body 1`] = `
        to complete the spreadsheet:
     </p>
     <form
+      inert="yes"
       onSubmit={[Function]}
     >
       <div
@@ -566,6 +588,7 @@ exports[`Player Render with question and no body 1`] = `
                   id="cell1"
                 >
                   <input
+                    autoComplete="off"
                     className="unanswered"
                     id="1-input"
                     onBlur={[Function]}
@@ -584,6 +607,7 @@ exports[`Player Render with question and no body 1`] = `
                   id="cell2"
                 >
                   <input
+                    autoComplete="off"
                     className="unanswered"
                     id="2-input"
                     onBlur={[Function]}
@@ -614,8 +638,11 @@ exports[`Player Render with question and no body 1`] = `
          missing cells
       </p>
       <p
+        aria-roledescription="button"
         className="link"
         onClick={[Function]}
+        onKeyUp={[Function]}
+        tabIndex="0"
       >
         View Question
       </p>
@@ -641,7 +668,10 @@ exports[`Player Render without randomization 1`] = `
       className="popup help"
     >
       <div>
-        <h2>
+        <h2
+          aria-label="Secret Spreadsheet widget instructions. Cells of this spreadsheet have been intentionally hidden. Navigate the spreadsheet and input the hidden data until all cells have been filled. Capitalization and punctuation must be precise to match correctly. Navigate the table using your screen reader's dedicated key bindings, or use the tab key to move between blank cells."
+          tabIndex="0"
+        >
           Secret Spreadsheet - How it works:
         </h2>
         <div>
@@ -665,6 +695,7 @@ exports[`Player Render without randomization 1`] = `
         </div>
         <button
           onClick={[Function]}
+          tabIndex="0"
           type="button"
           value="Got it!"
         >
@@ -682,6 +713,7 @@ exports[`Player Render without randomization 1`] = `
        to complete the spreadsheet:
     </p>
     <form
+      inert="yes"
       onSubmit={[Function]}
     >
       <div
@@ -707,6 +739,7 @@ exports[`Player Render without randomization 1`] = `
                   id="cell1"
                 >
                   <input
+                    autoComplete="off"
                     className="unanswered"
                     id="1-input"
                     onBlur={[Function]}
@@ -725,6 +758,7 @@ exports[`Player Render without randomization 1`] = `
                   id="cell2"
                 >
                   <input
+                    autoComplete="off"
                     className="unanswered"
                     id="2-input"
                     onBlur={[Function]}
@@ -755,8 +789,11 @@ exports[`Player Render without randomization 1`] = `
          missing cells
       </p>
       <p
+        aria-roledescription="button"
         className="link"
         onClick={[Function]}
+        onKeyUp={[Function]}
+        tabIndex="0"
       >
         View Question
       </p>

diff --git a/src/components/player/__snapshots__/cell.test.js.snap b/src/components/player/__snapshots__/cell.test.js.snap
@@ -6,6 +6,7 @@ exports[`Cell component Rendered with user input center aligned 1`] = `
   id={1}
 >
   <input
+    autoComplete="off"
     className="unanswered"
     onBlur={[MockFunction]}
     onChange={[Function]}
@@ -22,6 +23,7 @@ exports[`Cell component Rendered with user input left aligned 1`] = `
   id={1}
 >
   <input
+    autoComplete="off"
     className="unanswered"
     onBlur={[MockFunction]}
     onChange={[Function]}

diff --git a/src/components/player/__snapshots__/popup.test.js.snap b/src/components/player/__snapshots__/popup.test.js.snap
@@ -5,7 +5,10 @@ exports[`Popup component Is rendered 1`] = `
   className="popup help"
 >
   <div>
-    <h2>
+    <h2
+      aria-label="Secret Spreadsheet widget instructions. Cells of this spreadsheet have been intentionally hidden. Navigate the spreadsheet and input the hidden data until all cells have been filled. Capitalization and punctuation must be precise to match correctly. Navigate the table using your screen reader's dedicated key bindings, or use the tab key to move between blank cells."
+      tabIndex="0"
+    >
       Secret Spreadsheet - How it works:
     </h2>
     <div>
@@ -29,6 +32,7 @@ exports[`Popup component Is rendered 1`] = `
     </div>
     <button
       onClick={[MockFunction]}
+      tabIndex="0"
       type="button"
       value="Got it!"
     >

diff --git a/src/components/player/__snapshots__/question.test.js.snap b/src/components/player/__snapshots__/question.test.js.snap
@@ -6,15 +6,19 @@ exports[`Question component Is rendered with question body 1`] = `
 >
   <div>
     <p
+      aria-label="Question: Test entry question: Test question body"
       className="mainQuestion"
+      tabIndex="0"
     >
       Test entry question
     </p>
     <p>
       Test question body
     </p>
     <button
+      aria-label="After closing this dialog focus will be automatically moved to the first empty cell in the spreadsheet."
       onClick={[MockFunction]}
+      tabIndex="0"
       type="button"
       value="Next"
     >
@@ -30,12 +34,16 @@ exports[`Question component Is rendered without question body 1`] = `
 >
   <div>
     <p
+      aria-label="Question: Test entry question: "
       className="mainQuestion"
+      tabIndex="0"
     >
       Test entry question
     </p>
     <button
+      aria-label="After closing this dialog focus will be automatically moved to the first empty cell in the spreadsheet."
       onClick={[MockFunction]}
+      tabIndex="0"
       type="button"
       value="Next"
     >