Fix navigation link positions in three test plans: link, command butt…

…on and toggle button (#709) * Fix navigation link positions in three test plans: link, command button and toggle button * Generate .html source files with scripts automatically Co-authored-by: jscholes <[email protected]>
w3c · May 4, 2022 · 0c466ee · 0c466ee
1 parent 97d4bd6
commit 0c466ee
Show file tree

Hide file tree

Showing 15 changed files with 104 additions and 74 deletions.
diff --git a/tests/command-button/reference/2022-4-8_124112/button.html b/tests/command-button/reference/2022-4-8_124112/button.html
@@ -26,7 +26,9 @@ <h2 id="ex_label">Example</h2>
       <div id="example">
         <p>This <q>Print</q> action button uses a <code>div</code> element.</p>
         <a id="beforelink" href="#beforelink">Navigate forwards from here</a>
-        <div tabindex="0" role="button" id="action">Print Page</div>
+        <div>
+          <div tabindex="0" role="button" id="action">Print Page</div>
+        </div>
         <a id="afterlink" href="#afterlink">Navigate backwards from here</a>
       </div>
 

diff --git a/tests/command-button/reference/2022-4-8_124112/button.setFocusAfterButton.html b/tests/command-button/reference/2022-4-8_124112/button.setFocusAfterButton.html
@@ -44,7 +44,9 @@ <h2 id="ex_label">Example</h2>
       <div id="example">
         <p>This <q>Print</q> action button uses a <code>div</code> element.</p>
         <a id="beforelink" href="#beforelink">Navigate forwards from here</a>
-        <div tabindex="0" role="button" id="action">Print Page</div>
+        <div>
+          <div tabindex="0" role="button" id="action">Print Page</div>
+        </div>
         <a id="afterlink" href="#afterlink">Navigate backwards from here</a>
       </div>
 

diff --git a/tests/command-button/reference/2022-4-8_124112/button.setFocusBeforeButton.html b/tests/command-button/reference/2022-4-8_124112/button.setFocusBeforeButton.html
@@ -44,7 +44,9 @@ <h2 id="ex_label">Example</h2>
       <div id="example">
         <p>This <q>Print</q> action button uses a <code>div</code> element.</p>
         <a id="beforelink" href="#beforelink">Navigate forwards from here</a>
-        <div tabindex="0" role="button" id="action">Print Page</div>
+        <div>
+          <div tabindex="0" role="button" id="action">Print Page</div>
+        </div>
         <a id="afterlink" href="#afterlink">Navigate backwards from here</a>
       </div>
 

diff --git a/tests/command-button/reference/2022-4-8_124112/button.setFocusOnButton.html b/tests/command-button/reference/2022-4-8_124112/button.setFocusOnButton.html
@@ -44,7 +44,9 @@ <h2 id="ex_label">Example</h2>
       <div id="example">
         <p>This <q>Print</q> action button uses a <code>div</code> element.</p>
         <a id="beforelink" href="#beforelink">Navigate forwards from here</a>
-        <div tabindex="0" role="button" id="action">Print Page</div>
+        <div>
+          <div tabindex="0" role="button" id="action">Print Page</div>
+        </div>
         <a id="afterlink" href="#afterlink">Navigate backwards from here</a>
       </div>
 

diff --git a/tests/link-span-text/reference/2022-4-6_14258/link.html b/tests/link-span-text/reference/2022-4-6_14258/link.html
@@ -21,13 +21,15 @@ <h1>Link Example 1 (span element with text content</h1>
     <h2 id="ex_label">Example</h2>
     <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
       <a id="beforelink" href="#beforelink">Navigate forwards from here</a>
-      <span id="link"
-      tabindex="0"
-      role="link"
-      onclick="goToLink(event, 'https://www.w3.org/')"
-      onkeydown="goToLink(event, 'https://www.w3.org/')">
-      W3C website
-      </span>
+      <div>
+        <span id="link"
+        tabindex="0"
+        role="link"
+        onclick="goToLink(event, 'https://www.w3.org/')"
+        onkeydown="goToLink(event, 'https://www.w3.org/')">
+        W3C website
+        </span>
+      </div>
       <a id="afterlink" href="#afterlink">Navigate backwards from here</a>
       <div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
   </section>

diff --git a/tests/link-span-text/reference/2022-4-6_14258/link.setFocusAfterLink.html b/tests/link-span-text/reference/2022-4-6_14258/link.setFocusAfterLink.html
@@ -39,13 +39,15 @@ <h1>Link Example 1 (span element with text content</h1>
     <h2 id="ex_label">Example</h2>
     <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
       <a id="beforelink" href="#beforelink">Navigate forwards from here</a>
-      <span id="link"
-      tabindex="0"
-      role="link"
-      onclick="goToLink(event, 'https://www.w3.org/')"
-      onkeydown="goToLink(event, 'https://www.w3.org/')">
-      W3C website
-      </span>
+      <div>
+        <span id="link"
+        tabindex="0"
+        role="link"
+        onclick="goToLink(event, 'https://www.w3.org/')"
+        onkeydown="goToLink(event, 'https://www.w3.org/')">
+        W3C website
+        </span>
+      </div>
       <a id="afterlink" href="#afterlink">Navigate backwards from here</a>
       <div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
   </section>

diff --git a/tests/link-span-text/reference/2022-4-6_14258/link.setFocusBeforeLink.html b/tests/link-span-text/reference/2022-4-6_14258/link.setFocusBeforeLink.html
@@ -39,13 +39,15 @@ <h1>Link Example 1 (span element with text content</h1>
     <h2 id="ex_label">Example</h2>
     <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
       <a id="beforelink" href="#beforelink">Navigate forwards from here</a>
-      <span id="link"
-      tabindex="0"
-      role="link"
-      onclick="goToLink(event, 'https://www.w3.org/')"
-      onkeydown="goToLink(event, 'https://www.w3.org/')">
-      W3C website
-      </span>
+      <div>
+        <span id="link"
+        tabindex="0"
+        role="link"
+        onclick="goToLink(event, 'https://www.w3.org/')"
+        onkeydown="goToLink(event, 'https://www.w3.org/')">
+        W3C website
+        </span>
+      </div>
       <a id="afterlink" href="#afterlink">Navigate backwards from here</a>
       <div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
   </section>

diff --git a/tests/link-span-text/reference/2022-4-6_14258/link.setFocusOnLink.html b/tests/link-span-text/reference/2022-4-6_14258/link.setFocusOnLink.html
@@ -39,13 +39,15 @@ <h1>Link Example 1 (span element with text content</h1>
     <h2 id="ex_label">Example</h2>
     <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
       <a id="beforelink" href="#beforelink">Navigate forwards from here</a>
-      <span id="link"
-      tabindex="0"
-      role="link"
-      onclick="goToLink(event, 'https://www.w3.org/')"
-      onkeydown="goToLink(event, 'https://www.w3.org/')">
-      W3C website
-      </span>
+      <div>
+        <span id="link"
+        tabindex="0"
+        role="link"
+        onclick="goToLink(event, 'https://www.w3.org/')"
+        onkeydown="goToLink(event, 'https://www.w3.org/')">
+        W3C website
+        </span>
+      </div>
       <a id="afterlink" href="#afterlink">Navigate backwards from here</a>
       <div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
   </section>

diff --git a/tests/toggle-button/reference/2022-4-8_135651/button.html b/tests/toggle-button/reference/2022-4-8_135651/button.html
@@ -29,12 +29,14 @@ <h2 id="ex_label">Example</h2>
 
         <p>This <q>Mute</q> toggle button uses an <code>a</code> element.</p>
         <a id="beforelink" href="#beforelink">Navigate forwards from here</a>
-        <a tabindex="0" role="button" id="toggle" aria-pressed="false">
-          Mute
-          <svg aria-hidden="true" focusable="false">
-            <use xlink:href="#icon-sound"></use>
-          </svg>
-        </a>
+        <div>
+          <a tabindex="0" role="button" id="toggle" aria-pressed="false">
+            Mute
+            <svg aria-hidden="true" focusable="false">
+              <use xlink:href="#icon-sound"></use>
+            </svg>
+          </a>
+        </div>
         <a id="afterlink" href="#afterlink">Navigate backwards from here</a>
 
         <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none" id="svg_definitions">

diff --git a/tests/toggle-button/reference/2022-4-8_135651/button.setFocusAfterButton.html b/tests/toggle-button/reference/2022-4-8_135651/button.setFocusAfterButton.html
@@ -47,12 +47,14 @@ <h2 id="ex_label">Example</h2>
 
         <p>This <q>Mute</q> toggle button uses an <code>a</code> element.</p>
         <a id="beforelink" href="#beforelink">Navigate forwards from here</a>
-        <a tabindex="0" role="button" id="toggle" aria-pressed="false">
-          Mute
-          <svg aria-hidden="true" focusable="false">
-            <use xlink:href="#icon-sound"></use>
-          </svg>
-        </a>
+        <div>
+          <a tabindex="0" role="button" id="toggle" aria-pressed="false">
+            Mute
+            <svg aria-hidden="true" focusable="false">
+              <use xlink:href="#icon-sound"></use>
+            </svg>
+          </a>
+        </div>
         <a id="afterlink" href="#afterlink">Navigate backwards from here</a>
 
         <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none" id="svg_definitions">

diff --git a/...ggle-button/reference/2022-4-8_135651/button.setFocusAfterButtonAndSetStateToPressed.html b/...ggle-button/reference/2022-4-8_135651/button.setFocusAfterButtonAndSetStateToPressed.html
@@ -50,12 +50,14 @@ <h2 id="ex_label">Example</h2>
 
         <p>This <q>Mute</q> toggle button uses an <code>a</code> element.</p>
         <a id="beforelink" href="#beforelink">Navigate forwards from here</a>
-        <a tabindex="0" role="button" id="toggle" aria-pressed="false">
-          Mute
-          <svg aria-hidden="true" focusable="false">
-            <use xlink:href="#icon-sound"></use>
-          </svg>
-        </a>
+        <div>
+          <a tabindex="0" role="button" id="toggle" aria-pressed="false">
+            Mute
+            <svg aria-hidden="true" focusable="false">
+              <use xlink:href="#icon-sound"></use>
+            </svg>
+          </a>
+        </div>
         <a id="afterlink" href="#afterlink">Navigate backwards from here</a>
 
         <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none" id="svg_definitions">

diff --git a/tests/toggle-button/reference/2022-4-8_135651/button.setFocusBeforeButton.html b/tests/toggle-button/reference/2022-4-8_135651/button.setFocusBeforeButton.html
@@ -47,12 +47,14 @@ <h2 id="ex_label">Example</h2>
 
         <p>This <q>Mute</q> toggle button uses an <code>a</code> element.</p>
         <a id="beforelink" href="#beforelink">Navigate forwards from here</a>
-        <a tabindex="0" role="button" id="toggle" aria-pressed="false">
-          Mute
-          <svg aria-hidden="true" focusable="false">
-            <use xlink:href="#icon-sound"></use>
-          </svg>
-        </a>
+        <div>
+          <a tabindex="0" role="button" id="toggle" aria-pressed="false">
+            Mute
+            <svg aria-hidden="true" focusable="false">
+              <use xlink:href="#icon-sound"></use>
+            </svg>
+          </a>
+        </div>
         <a id="afterlink" href="#afterlink">Navigate backwards from here</a>
 
         <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none" id="svg_definitions">

diff --git a/...gle-button/reference/2022-4-8_135651/button.setFocusBeforeButtonAndSetStateToPressed.html b/...gle-button/reference/2022-4-8_135651/button.setFocusBeforeButtonAndSetStateToPressed.html
@@ -50,12 +50,14 @@ <h2 id="ex_label">Example</h2>
 
         <p>This <q>Mute</q> toggle button uses an <code>a</code> element.</p>
         <a id="beforelink" href="#beforelink">Navigate forwards from here</a>
-        <a tabindex="0" role="button" id="toggle" aria-pressed="false">
-          Mute
-          <svg aria-hidden="true" focusable="false">
-            <use xlink:href="#icon-sound"></use>
-          </svg>
-        </a>
+        <div>
+          <a tabindex="0" role="button" id="toggle" aria-pressed="false">
+            Mute
+            <svg aria-hidden="true" focusable="false">
+              <use xlink:href="#icon-sound"></use>
+            </svg>
+          </a>
+        </div>
         <a id="afterlink" href="#afterlink">Navigate backwards from here</a>
 
         <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none" id="svg_definitions">

diff --git a/tests/toggle-button/reference/2022-4-8_135651/button.setFocusOnButton.html b/tests/toggle-button/reference/2022-4-8_135651/button.setFocusOnButton.html
@@ -47,12 +47,14 @@ <h2 id="ex_label">Example</h2>
 
         <p>This <q>Mute</q> toggle button uses an <code>a</code> element.</p>
         <a id="beforelink" href="#beforelink">Navigate forwards from here</a>
-        <a tabindex="0" role="button" id="toggle" aria-pressed="false">
-          Mute
-          <svg aria-hidden="true" focusable="false">
-            <use xlink:href="#icon-sound"></use>
-          </svg>
-        </a>
+        <div>
+          <a tabindex="0" role="button" id="toggle" aria-pressed="false">
+            Mute
+            <svg aria-hidden="true" focusable="false">
+              <use xlink:href="#icon-sound"></use>
+            </svg>
+          </a>
+        </div>
         <a id="afterlink" href="#afterlink">Navigate backwards from here</a>
 
         <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none" id="svg_definitions">

diff --git a/.../toggle-button/reference/2022-4-8_135651/button.setFocusOnButtonAndSetStateToPressed.html b/.../toggle-button/reference/2022-4-8_135651/button.setFocusOnButtonAndSetStateToPressed.html
@@ -50,12 +50,14 @@ <h2 id="ex_label">Example</h2>
 
         <p>This <q>Mute</q> toggle button uses an <code>a</code> element.</p>
         <a id="beforelink" href="#beforelink">Navigate forwards from here</a>
-        <a tabindex="0" role="button" id="toggle" aria-pressed="false">
-          Mute
-          <svg aria-hidden="true" focusable="false">
-            <use xlink:href="#icon-sound"></use>
-          </svg>
-        </a>
+        <div>
+          <a tabindex="0" role="button" id="toggle" aria-pressed="false">
+            Mute
+            <svg aria-hidden="true" focusable="false">
+              <use xlink:href="#icon-sound"></use>
+            </svg>
+          </a>
+        </div>
         <a id="afterlink" href="#afterlink">Navigate backwards from here</a>
 
         <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display:none" id="svg_definitions">