Create updated tests for APG design pattern example: checkbox

Part of #443

tests/checkbox/data/commands.csv

@@ -1,8 +1,13 @@
 testId,task,mode,at,commandA,commandB,commandC,commandD,commandE,commandF
-1,navigate to unchecked checkbox,reading,JAWS,X_AND_SHIFT_X,F_AND_SHIFT_F,TAB_AND_SHIFT_TAB,UP_AND_DOWN,LEFT_AND_RIGHT(with Smart Navigation on),
-1,navigate to unchecked checkbox,reading,NVDA,X_AND_SHIFT_X,F_AND_SHIFT_F,TAB_AND_SHIFT_TAB,UP_AND_DOWN,,
-2,navigate to unchecked checkbox,interaction,JAWS,TAB_AND_SHIFT_TAB,,,,,
-2,navigate to unchecked checkbox,interaction,NVDA,TAB_AND_SHIFT_TAB,,,,,
+1,navigate forwards to checkbox,reading,JAWS,X,F,TAB,DOWN,RIGHT(with Smart Navigation on),
+1,navigate forwards to checkbox,reading,NVDA,X,F,TAB,DOWN,,
+2,navigate backwards to checkbox,reading,JAWS,SHIFT_X,SHIFT_F,SHIFT_TAB,UP,LEFT(with Smart Navigation on),
+2,navigate backwards to checkbox,reading,NVDA,SHIFT_X,SHIFT_F,SHIFT_TAB,UP,,
+3,navigate forwards to checkbox,interaction,JAWS,TAB,,,,,
+3,navigate forwards to checkbox,interaction,NVDA,TAB,,,,,
+4,navigate backwards to checkbox,interaction,JAWS,SHIFT_TAB,,,,,
+4,navigate backwards to checkbox,interaction,NVDA,SHIFT_TAB,,,,,
+TODO: fix remaining below
 3,navigate to unchecked checkbox,interaction,voiceover_macos,TAB_AND_SHIFT_TAB,CTRL_OPT_RIGHT_AND_CTRL_OPT_LEFT,CTRL_OPT_CMD_J_AND_SHIFT_CTRL_OPT_CMD_J,,,
 4,navigate to checked checkbox,reading,JAWS,X_AND_SHIFT_X,F_AND_SHIFT_F,TAB_AND_SHIFT_TAB,UP_AND_DOWN,LEFT_AND_RIGHT(with Smart Navigation on),
 4,navigate to checked checkbox,reading,NVDA,X_AND_SHIFT_X,F_AND_SHIFT_F,TAB_AND_SHIFT_TAB,UP_AND_DOWN,,

tests/checkbox/data/js/moveFocusAfterAndCheckFirstCheckbox.js

@@ -0,0 +1,3 @@
+// Move focus to link after first checkbox and set aria-checked on first checkbox
+testPageDocument.querySelector('#afterlink').focus();
+testPageDocument.querySelector('[role="checkbox"]').setAttribute('aria-checked', 'true');

tests/checkbox/data/js/moveFocusAfterFirstCheckbox.js

@@ -0,0 +1,2 @@
+// Move focus to link after first checkbox
+testPageDocument.querySelector('#afterlink').focus();

tests/checkbox/data/js/moveFocusBeforeAndCheckFirstCheckbox.js

@@ -0,0 +1,3 @@
+// Move focus to link before first checkbox and set aria-checked on first checkbox
+testPageDocument.querySelector('#beforelink').focus();
+testPageDocument.querySelector('[role="checkbox"]').setAttribute('aria-checked', 'true');

tests/checkbox/data/js/moveFocusBeforeFirstCheckbox.js

@@ -0,0 +1,2 @@
+// Move focus to link before first checkbox
+testPageDocument.querySelector('#beforelink').focus();

tests/checkbox/reference/2020-11-23_175030/checkbox-1/checkbox-1.html

@@ -19,9 +19,13 @@ <h1>Checkbox Example (Two State)</h1>
 
   <div id="ex1">
         <h3 id="id-group-label">Sandwich Condiments</h3>
+        <a id="beforelink" href="#beforelink">Navigate forwards from here</a>
         <div role="group" aria-labelledby="id-group-label">
           <ul class="checkboxes">
-            <li><div role="checkbox" aria-checked="false" tabindex= "0">Lettuce</div></li>
+            <li>
+              <div role="checkbox" aria-checked="false" tabindex= "0">Lettuce</div>
+              <a id="afterlink" href="#afterlink">Navigate backwards from here</a>
+            </li>
             <li><div role="checkbox" aria-checked="true"  tabindex= "0">Tomato</div></li>
             <li><div role="checkbox" aria-checked="false" tabindex= "0">Mustard</div></li>
             <li><div role="checkbox" aria-checked="false" tabindex= "0">Sprouts</div></li>