update accname 'flash screen' example to use native clickable label element (#206)

cookiecrook · jnurthen · web-flow · commit 681094c3f42d · 2023-11-03T15:42:01.000-07:00
Co-authored-by: James Nurthen &lt;jnurthen@users.noreply.github.com&gt;
diff --git a/index.html b/index.html
@@ -435,10 +435,11 @@ <h4>Computation steps</h4>
                 </li>
               </ol>
               <aside class="example">
-                <p>Consider a <a class="role-reference" href="#checkbox">check box</a> label that contains a text input field: "Flash the screen [input] times". If the user has entered "5" for the embedded <a class="role-reference" href="#textbox">textbox</a>, the complete label is "Flash the screen 5 times", e.g.: </p>
-                <pre class="highlight">
-                  <code>&lt;div role="checkbox" aria-checked="false"&gt;Flash the screen &lt;span role="textbox" aria-multiline="false"&gt; 5 &lt;/span&gt; times&lt;/div&gt;</code>
-                </pre>
+                <p>Consider a <a class="role-reference" href="#checkbox">check box</a> label that contains a text input field: "Flash the screen [input] times". If the input field has the value "5", the complete label is "Flash the screen 5 times", e.g.:</p>
+                <pre class="highlight"><code>&lt;label for="flash"&gt;
+  &lt;input type="checkbox" id="flash"&gt;
+  Flash the screen &lt;span tabindex="0" role="textbox" aria-label="number of times" contenteditable&gt;5&lt;/span&gt; times.
+&lt;/label&gt;</code></pre>
               </aside>
             </li>
             <li id="comp_label" name="step2D"><em>AriaLabel:</em> Otherwise, if the <code>current node</code> has an <code>aria-label</code> [=attribute=] whose value is not undefined, not the empty string, nor, when trimmed of [=ascii whitespace|whitespace=], is not the empty string:
