Add readonly attribute to fieldset element

Adds a readonly content attribute to fieldset that propagates read-only
state to descendant form controls that support it, mirroring how the
existing disabled attribute works.

Affected descendants are input elements in states that support readonly,
textarea elements, and form-associated custom elements. Controls for
which readonly is not meaningful (checkbox, radio, button, select) are
unaffected, as is anything inside the first legend child.

Introduces concept-fe-readonly parallel to concept-fe-disabled, and
formReadonlyCallback on form-associated custom elements parallel to
formDisabledCallback.

Closes #10293

Author: teoeter

source

@@ -58283,8 +58283,8 @@ interface <dfn interface>HTMLTextAreaElement</dfn> : <span>HTMLElement</span> {
 
   <div algorithm>
   <p>A <code>textarea</code> element is <span data-x="concept-fe-mutable">mutable</span> if it is
-  neither <span data-x="concept-fe-disabled">disabled</span> nor has a <code
-  data-x="attr-textarea-readonly">readonly</code> attribute specified.</p>
+  neither <span data-x="concept-fe-disabled">disabled</span> nor <span
+  data-x="concept-fe-readonly">readonly</span>.</p>
   </div>
 
   <div algorithm>
@@ -59479,6 +59479,7 @@ out of 233&#x2009;257&#x2009;824 bytes available&lt;/meter>&lt;/p></code></pre>
    <dt><span data-x="concept-element-attributes">Content attributes</span>:</dt>
    <dd><span>Global attributes</span></dd>
    <dd><code data-x="attr-fieldset-disabled">disabled</code></dd>
+   <dd><code data-x="attr-fieldset-readonly">readonly</code></dd>
    <dd><code data-x="attr-fae-form">form</code></dd>
    <dd><code data-x="attr-fe-name">name</code> <!-- variant --> </dd>
    <dt><span
@@ -59492,6 +59493,7 @@ interface <dfn interface>HTMLFieldSetElement</dfn> : <span>HTMLElement</span> {
   [<span>HTMLConstructor</span>] constructor();
 
   [<span>CEReactions</span>, <span data-x="xattr-Reflect">Reflect</span>] attribute boolean <dfn attribute for="HTMLFieldSetElement" data-x="dom-fieldset-disabled">disabled</dfn>;
+  [<span>CEReactions</span>, <span data-x="xattr-Reflect">Reflect</span>] attribute boolean <dfn attribute for="HTMLFieldSetElement" data-x="dom-fieldset-readonly">readonly</dfn>;
   readonly attribute <span>HTMLFormElement</span>? <span data-x="dom-fae-form">form</span>;
   [<span>CEReactions</span>, <span data-x="xattr-Reflect">Reflect</span>] attribute DOMString <dfn attribute for="HTMLFieldSetElement" data-x="dom-fieldset-name">name</dfn>;
 
@@ -59537,6 +59539,36 @@ interface <dfn interface>HTMLFieldSetElement</dfn> : <span>HTMLElement</span> {
   </ul>
   </div>
 
+  <div algorithm>
+  <p>The <dfn element-attr for="fieldset"><code
+  data-x="attr-fieldset-readonly">readonly</code></dfn> attribute, when specified, causes the form
+  control descendants of the <code>fieldset</code> element that support being <span
+  data-x="concept-fe-readonly">readonly</span>, excluding those that are descendants of the
+  <code>fieldset</code> element's first <code>legend</code> element child, if any, to be <span
+  data-x="concept-fe-readonly">readonly</span>.</p>
+
+  <p class="note">Unlike <code data-x="attr-fieldset-disabled">disabled</code>, which propagates to
+  every form control descendant, <code data-x="attr-fieldset-readonly">readonly</code> only affects
+  descendants for which the concept of being read-only is meaningful: <code>input</code> elements in
+  states that support <code data-x="attr-input-readonly">readonly</code>, <code>textarea</code>
+  elements, and <span data-x="form-associated custom element">form-associated custom
+  elements</span>.</p>
+  </div>
+
+  <div algorithm>
+  <p>A <code>fieldset</code> element is a <dfn data-x="concept-fieldset-readonly">readonly
+  fieldset</dfn> if it matches any of the following conditions:</p>
+
+  <ul>
+   <li>Its <code data-x="attr-fieldset-readonly">readonly</code> attribute is specified
+
+   <li>It is a descendant of another <code>fieldset</code> element whose <code
+   data-x="attr-fieldset-readonly">readonly</code> attribute is specified, and is <em>not</em> a
+   descendant of that <code>fieldset</code> element's first <code>legend</code> element child, if
+   any.</li>
+  </ul>
+  </div>
+
   <p>The <code data-x="attr-fae-form">form</code> attribute is used to explicitly associate the
   <code>fieldset</code> element with its <span>form owner</span>. The <code
   data-x="attr-fe-name">name</code> attribute represents the element's name.</p>
@@ -59673,6 +59705,25 @@ interface <dfn interface>HTMLFieldSetElement</dfn> : <span>HTMLElement</span> {
 
   </div>
 
+  <div class="example">
+
+   <p>The following snippet shows a <code>fieldset</code> whose <code
+   data-x="attr-fieldset-readonly">readonly</code> attribute makes every text-like control inside
+   read-only, while leaving controls that do not support <code
+   data-x="attr-input-readonly">readonly</code> (such as the radio buttons) unaffected:</p>
+
+   <pre><code class="html">&lt;fieldset readonly>
+ &lt;legend>Shipping address&lt;/legend>
+ &lt;p>&lt;label>Name: &lt;input name=name value="Ada Lovelace">&lt;/label>&lt;/p>
+ &lt;p>&lt;label>Notes: &lt;textarea name=notes>Leave at door.&lt;/textarea>&lt;/label>&lt;/p>
+ &lt;p>Delivery window:
+  &lt;label>&lt;input type=radio name=window value=am checked> Morning&lt;/label>
+  &lt;label>&lt;input type=radio name=window value=pm> Afternoon&lt;/label>
+ &lt;/p>
+&lt;/fieldset></code></pre>
+
+  </div>
+
 
   <h4>The <dfn element><code>legend</code></dfn> element</h4>
 
@@ -60438,7 +60489,6 @@ form.method === input; // => true</code></pre>
 
   </div>
 
-
   <h5>Form submission attributes</h5>
 
   <p><dfn>Attributes for form submission</dfn> can be specified both on <code>form</code> elements
@@ -78396,6 +78446,11 @@ customElements.define("x-foo", class extends HTMLElement {
    data-x="">formDisabledCallback</code> is called, given the new state as an
    argument.</p></li>
 
+   <li><p>When the <span data-x="concept-fe-readonly">readonly</span> state of a
+   <span>form-associated custom element</span> is changed, its <code
+   data-x="">formReadonlyCallback</code> is called, given the new state as an
+   argument.</p></li>
+
    <li><p>When the user agent updates a <span>form-associated custom element</span>'s value on behalf of
    a user or <span data-x="restore persisted state">as part of navigation</span>, its <code
    data-x="">formStateRestoreCallback</code> is called, given the new state and a string indicating
@@ -154812,6 +154867,11 @@ interface <dfn interface>External</dfn> {
           <code data-x="attr-textarea-readonly">textarea</code>
      <td> Whether to allow the value to be edited by the user
      <td> <span>Boolean attribute</span>
+    <tr>
+     <th> <code data-x="">readonly</code>
+     <td> <code data-x="attr-fieldset-readonly">fieldset</code>
+     <td> Whether the descendant form controls that support being read-only, except any inside <code>legend</code>, are read-only
+     <td> <span>Boolean attribute</span>
     <tr>
      <th> <code data-x="">readonly</code>
      <td> <span data-x="attr-face-readonly">form-associated custom elements</span>
@@ -158396,6 +158456,7 @@ INSERT INTERFACES HERE
   Tawanda Moyo, <!-- tawandamoyo on GitHub-->
   Taylor Hunt,
   Ted Mielczarek,
+  Teo Eterovic,
   Terence Eden, <!-- edent on GitHub -->
   Terrence Wood,
   Tetsuharu OHZEKI,