a number of small changes to make the audio ballot work

CodingForFun-coder · May 30, 2019 · 57173a8 · 57173a8
1 parent 5443d71
commit 57173a8
Show file tree

Hide file tree

Showing 26 changed files with 843 additions and 340 deletions.
diff --git a/public/index.html b/public/index.html
@@ -9,7 +9,7 @@
     />
     <meta name="theme-color" content="#000000" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <title>VotingWorks Ballot Marking Device</title>
+    <title aria-hidden="true">VotingWorks Ballot Marking Device</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/AppEndToEndWithoutModuleSmartcards.test.tsx b/src/AppEndToEndWithoutModuleSmartcards.test.tsx
@@ -41,20 +41,21 @@ it(`quick end-to-end flow with absent module-smartcards`, async () => {
 
   // Go to First Contest
   fireEvent.click(getByText('Get Started'))
+  fireEvent.click(getByText('Start Voting'))
 
   // Go to Pre Review Screen
-  while (!queryByText('Pre Review Screen')) {
+  while (!queryByText('Review Your Selections')) {
     fireEvent.click(getByText('Next'))
   }
-  getByText('Pre Review Screen')
+  getByText('Review Your Selections')
 
   // Go to Review Screen
-  fireEvent.click(getByText('Next'))
+  fireEvent.click(getByText('Review Selections'))
   getByText('Review Your Ballot Selections')
 
   // Print Screen
   fireEvent.click(getByText('Next'))
-  getByText('Print your ballot')
+  getByText('Print your official ballot')
 
   // Test Print Ballot Modal
   fireEvent.click(getByText('Print Ballot'))
@@ -66,5 +67,5 @@ it(`quick end-to-end flow with absent module-smartcards`, async () => {
   // Review and Cast Instructions
   // wait a little bit because the page transition is behind a setTimeout
   await sleep(100)
-  getByText('Verify and Cast Your Ballot')
+  getByText('Cast your printed ballot')
 })
diff --git a/src/__snapshots__/AppContestOvervote.test.tsx.snap b/src/__snapshots__/AppContestOvervote.test.tsx.snap
@@ -470,9 +470,10 @@ button.c9 {
     >
       <div
         class="c3"
+        id="audiofocus"
       >
         <h1
-          aria-label="United States, President and Vice-President."
+          aria-label="President and Vice-President."
         >
           <div
             class="c4"
@@ -481,7 +482,9 @@ button.c9 {
           </div>
           President and Vice-President
         </h1>
-        <p>
+        <p
+          aria-label="Vote for 1. You have selected 1. Use the down arrow to hear your options. Use the right arrow to move to the next contest."
+        >
           <strong>
             Vote for 
             1
@@ -504,26 +507,25 @@ button.c9 {
           class="c7"
         >
           <div
-            aria-labelledby="contest-header"
             class="c8"
-            role="group"
           >
             <label
+              aria-label="Joseph Barchi and Joseph Hallaren, Federalist."
               class="c9"
               for="barchi-hallaren"
             >
               <input
                 class="visually-hidden c10"
                 id="barchi-hallaren"
                 name="Joseph Barchi and Joseph Hallaren"
+                role="option"
                 type="checkbox"
                 value="barchi-hallaren"
               />
               <div
                 class="c3"
               >
                 <p
-                  aria-label="Joseph Barchi and Joseph Hallaren, Federalist."
                   class="c11"
                 >
                   <strong>
@@ -535,21 +537,22 @@ button.c9 {
               </div>
             </label>
             <label
+              aria-label="Adam Cramer and Greg Vuocolo, People's."
               class="c12"
               for="cramer-vuocolo"
             >
               <input
                 class="visually-hidden c10"
                 id="cramer-vuocolo"
                 name="Adam Cramer and Greg Vuocolo"
+                role="option"
                 type="checkbox"
                 value="cramer-vuocolo"
               />
               <div
                 class="c3"
               >
                 <p
-                  aria-label="Adam Cramer and Greg Vuocolo, People's."
                   class="c11"
                 >
                   <strong>
@@ -561,21 +564,22 @@ button.c9 {
               </div>
             </label>
             <label
+              aria-label="Daniel Court and Amy Blumhardt, Liberty."
               class="c12"
               for="court-blumhardt"
             >
               <input
                 class="visually-hidden c10"
                 id="court-blumhardt"
                 name="Daniel Court and Amy Blumhardt"
+                role="option"
                 type="checkbox"
                 value="court-blumhardt"
               />
               <div
                 class="c3"
               >
                 <p
-                  aria-label="Daniel Court and Amy Blumhardt, Liberty."
                   class="c11"
                 >
                   <strong>
@@ -587,21 +591,22 @@ button.c9 {
               </div>
             </label>
             <label
+              aria-label="Alvin Boone and James Lian, Constitution."
               class="c12"
               for="boone-lian"
             >
               <input
                 class="visually-hidden c10"
                 id="boone-lian"
                 name="Alvin Boone and James Lian"
+                role="option"
                 type="checkbox"
                 value="boone-lian"
               />
               <div
                 class="c3"
               >
                 <p
-                  aria-label="Alvin Boone and James Lian, Constitution."
                   class="c11"
                 >
                   <strong>
@@ -613,21 +618,22 @@ button.c9 {
               </div>
             </label>
             <label
+              aria-label="Ashley Hildebrand-McDougall and James Garritty, Whig."
               class="c12"
               for="hildebrand-garritty"
             >
               <input
                 class="visually-hidden c10"
                 id="hildebrand-garritty"
                 name="Ashley Hildebrand-McDougall and James Garritty"
+                role="option"
                 type="checkbox"
                 value="hildebrand-garritty"
               />
               <div
                 class="c3"
               >
                 <p
-                  aria-label="Ashley Hildebrand-McDougall and James Garritty, Whig."
                   class="c11"
                 >
                   <strong>
@@ -639,21 +645,22 @@ button.c9 {
               </div>
             </label>
             <label
+              aria-label="Martin Patterson and Clay Lariviere, Labor."
               class="c12"
               for="patterson-lariviere"
             >
               <input
                 class="visually-hidden c10"
                 id="patterson-lariviere"
                 name="Martin Patterson and Clay Lariviere"
+                role="option"
                 type="checkbox"
                 value="patterson-lariviere"
               />
               <div
                 class="c3"
               >
                 <p
-                  aria-label="Martin Patterson and Clay Lariviere, Labor."
                   class="c11"
                 >
                   <strong>
@@ -675,13 +682,15 @@ button.c9 {
     <button
       class="c14"
       id="next"
+      role="option"
       type="button"
     >
       Next
     </button>
     <button
       class="c15"
       id="previous"
+      role="option"
       type="button"
     >
       Back
@@ -700,12 +709,14 @@ button.c9 {
     <div />
     <button
       class="c15"
+      role="option"
       type="button"
     >
       Help
     </button>
     <button
       class="c15"
+      role="option"
       type="button"
     >
       Settings