Tweak how accesskey on legend works

Fixes #3950.

Tests: web-platform-tests/wpt#12800

* Don't special-case focusable legend, like Edge/Chrome/Safari

* Fix grammar

* Fix wording

* Use lists to make it less ambiguous

* and

* Address domenic's comments

* Add an example

* Source formatting nits

Author: zcorpan

source

@@ -56825,7 +56825,7 @@ interface <dfn>HTMLDetailsElement</dfn> : <span>HTMLElement</span> {
   <p>The <span data-x="command-facet-Label">Label</span> of the command is the string given by the
   element's <code>textContent</code> IDL attribute.</p>
 
-  <p>The <span data-x="command-facet-AccessKey">AccessKey</span> of the command is the element's
+  <p>The <span data-x="command-facet-AccessKey">Access Key</span> of the command is the element's
   <span>assigned access key</span>, if any.</p>
 
   <p>The <span data-x="command-facet-HiddenState">Hidden State</span> of the command is true (hidden)
@@ -56891,7 +56891,7 @@ interface <dfn>HTMLDetailsElement</dfn> : <span>HTMLElement</span> {
 
   </ul>
 
-  <p>The <span data-x="command-facet-AccessKey">AccessKey</span> of the command is the element's
+  <p>The <span data-x="command-facet-AccessKey">Access Key</span> of the command is the element's
   <span>assigned access key</span>, if any.</p>
 
   <p>The <span data-x="command-facet-HiddenState">Hidden State</span> of the command is true (hidden)
@@ -56917,7 +56917,7 @@ interface <dfn>HTMLDetailsElement</dfn> : <span>HTMLElement</span> {
   with <span data-x="strip and collapse ASCII whitespace">ASCII whitespace stripped and
   collapsed</span>.</p>
 
-  <p>The <span data-x="command-facet-AccessKey">AccessKey</span> of the command is the element's
+  <p>The <span data-x="command-facet-AccessKey">Access Key</span> of the command is the element's
   <span>assigned access key</span>, if any.</p>
 
   <p>The <span data-x="command-facet-HiddenState">Hidden State</span> of the command is true (hidden)
@@ -56939,25 +56939,46 @@ interface <dfn>HTMLDetailsElement</dfn> : <span>HTMLElement</span> {
   <h5><dfn data-x="legend-command">Using the <code data-x="attr-accesskey">accesskey</code> attribute
   on a <code>legend</code> element to define a command</dfn></h5>
 
-  <p>A <code>legend</code> element that has an <span>assigned access key</span> and is a child of a
-  <code>fieldset</code> element that has a descendant that is not a descendant of the
-  <code>legend</code> element and is neither a <code>label</code> element nor a <code>legend</code>
-  element but that <span data-x="concept-command">defines a command</span>, itself <span
-  data-x="concept-command">defines a command</span>.</p>
+  <p>A <code>legend</code> element <span data-x="concept-command">defines a command</span> if all of
+  the following are true:</p>
+
+  <ul>
+   <li><p>It has an <span>assigned access key</span>.</p></li>
+
+   <li><p>It is a child of a <code>fieldset</code> element.</p></li>
+
+   <li><p>Its parent has a descendant that <span data-x="concept-command">defines a command</span>
+   that is neither a <code>label</code> element nor a <code>legend</code> element. This element,
+   if it exists, is <dfn>the <code>legend</code> element's <code>accesskey</code>
+   delegatee</dfn>.</p></li>
+  </ul>
 
   <p>The <span data-x="command-facet-Label">Label</span> of the command is the string given by the
   element's <code>textContent</code> IDL attribute.</p>
 
-  <p>The <span data-x="command-facet-AccessKey">AccessKey</span> of the command is the element's
+  <p>The <span data-x="command-facet-AccessKey">Access Key</span> of the command is the element's
   <span>assigned access key</span>.</p>
 
   <p>The <span data-x="command-facet-HiddenState">Hidden State</span>, <span
   data-x="command-facet-DisabledState">Disabled State</span>, and <span
   data-x="command-facet-Action">Action</span> facets of the command are the same as the respective
-  facets of the first element in <span>tree order</span> that is a descendant of the parent of the
-  <code>legend</code> element that <span data-x="concept-command">defines a command</span> but is not
-  a descendant of the <code>legend</code> element and is neither a <code>label</code> nor a
-  <code>legend</code> element.</p>
+  facets of <span>the <code>legend</code> element's <code>accesskey</code> delegatee</span>.</p>
+
+  <div class="example">
+   <p>In this example, the <code>legend</code> element specifies an <code
+   data-x="attr-accesskey">accesskey</code>, which, when activated, will delegate to the
+   <code>input</code> element inside the <code>legend</code> element.</p>
+
+   <pre><code class="html" data-x="">&lt;fieldset>
+ &lt;legend accesskey=p>
+  &lt;label>I want &lt;input name=pizza type=number step=1 value=1 min=0>
+   pizza(s) with these toppings&lt;/label>
+ &lt;/legend>
+ &lt;label>&lt;input name=pizza-cheese type=checkbox checked> Cheese&lt;/label>
+ &lt;label>&lt;input name=pizza-ham type=checkbox checked> Ham&lt;/label>
+ &lt;label>&lt;input name=pizza-pineapple type=checkbox> Pineapple&lt;/label>
+&lt;/fieldset></code></pre>
+  </div>
 
 
   <h5><dfn data-x="accesskey-command">Using the <code data-x="attr-accesskey">accesskey</code>
@@ -56979,7 +57000,7 @@ interface <dfn>HTMLDetailsElement</dfn> : <span>HTMLElement</span> {
   the <span data-x="command-facet-Label">Label</span> is the <code>textContent</code> of the element
   itself.</p>
 
-  <p>The <span data-x="command-facet-AccessKey">AccessKey</span> of the command is the element's
+  <p>The <span data-x="command-facet-AccessKey">Access Key</span> of the command is the element's
   <span>assigned access key</span>.</p>
 
   <p>The <span data-x="command-facet-HiddenState">Hidden State</span> of the command is true (hidden)