Connect HTML spec up to new CSS interactivity property

I was a bit unsure about a few parts of this PR, so help would be
appreciated from the editors. The idea is:
 1. Remove duplication - allow the CSS spec to define the *concept*
    of "inert".
 2. Make the `inert` HTML attribute set `interactivity:inert` via
    a new UA stylesheet rule.
 3. Make modal dialogs non-inert via an `interactivity:auto` UA
    stylesheet rule.
 {eventual step 4} A rule likely needs to be added for fullscreen
    elements also, setting `interactivity:auto`.

Fix reference

Add a bunch of notes, and refactor some things

Address comments

Start on "marked as explicitly inert"

Semi-revert the "marked as explicitly inert" approach, and tweak

Resolve nits

Add more to the Note about why the behavior is the way it is

Address nit

Merge fixup

Final

Author: mfreed7

source

@@ -4008,6 +4008,10 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
               <dfn data-x-href="https://drafts.csswg.org/css-ui/#devolved">devolved widget</dfn> state.</li>
       <li>The <dfn data-x-href="https://drafts.csswg.org/css-ui-4/#pointer-events-control">'pointer-events'</dfn> property</li>
       <li>The <dfn data-x-href="https://drafts.csswg.org/css-ui-4/#content-selection">'user-select'</dfn> property</li>
+      <li>The <dfn data-x-href="https://drafts.csswg.org/css-ui-4/#inertness" data-x="css-interactivity">'interactivity'</dfn> property, and its
+      <dfn data-x-href="https://drafts.csswg.org/css-ui/#valdef-interactivity-auto" data-x="interactivity-auto">'auto'</dfn> and
+      <dfn data-x-href="https://drafts.csswg.org/css-ui/#valdef-interactivity-inert" data-x="interactivity-inert">'inert'</dfn> values.</li>
+      <li>The <dfn data-x-href="https://drafts.csswg.org/css-ui-4/#inert">inert</dfn> concept</li>
     </ul>
 
     <p>The algorithm to <dfn
@@ -62143,8 +62147,8 @@ interface <dfn interface>HTMLDialogElement</dfn> : <span>HTMLElement</span> {
     request">close requests</span>, will no longer be able to close the dialog.</p></li>
 
     <li><p>If the dialog was shown using its <code data-x="dom-dialog-showModal">showModal()</code>
-    method, the <code>Document</code> will still be <span data-x="blocked by a modal
-    dialog">blocked</span>.</p></li>
+    method, the <code>Document</code> will still be <span data-x="blocked by a
+    modal">blocked</span>.</p></li>
    </ul>
 
    <p>For these reasons, it is generally better to never remove the <code
@@ -62462,12 +62466,9 @@ interface <dfn interface>HTMLDialogElement</dfn> : <span>HTMLElement</span> {
    dialogs list</span> does not <span data-x="list contains">contain</span>
    <var>subject</var>.</p></li>
 
-   <li><p>Add <var>subject</var> to <var>subject</var>'s <span>node document</span>'s <span>open
-   dialogs list</span>.</p></li>
-
    <li>
-    <p>Let <var>subject</var>'s <span>node document</span> be <span data-x="blocked by a modal
-    dialog">blocked by the modal dialog</span> <var>subject</var>.</p>
+    <p>Add <var>subject</var> to <var>subject</var>'s <span>node document</span>'s <span>open
+    dialogs list</span>.</p>
 
     <p class="note" id="note-dialog-plus-focus-fixup">This will cause the <span>focused area of the
     document</span> to become <span>inert</span> (unless that currently focused area is a
@@ -79967,56 +79968,89 @@ interface <dfn interface>VisibilityStateEntry</dfn> : <span>PerformanceEntry</sp
   <p class="note">See also <code data-x="attr-inert">inert</code> for an explanation of the
   attribute of the same name.</p>
 
-  <p>A node (in particular elements and text nodes) can be <dfn>inert</dfn>. When a node is
-  <span>inert</span>:</p>
-
+  <p>An element or <code>Text</code> <var>node</var> must be considered <span>inert</span> if one of
+  the following is true:</p>
   <ul>
-   <li><p>Hit-testing must act as if the <span>'pointer-events'</span> CSS property were set to
-   'none'.</p></li>
-
-   <li><p>Text selection functionality must act as if the <span>'user-select'</span> CSS property
-   were set to 'none'.</p></li>
-
-   <li><p>If it is <span>editable</span>, the node behaves as if it were non-editable.</p></li>
-
-   <li><p>The user agent should ignore the node for the purposes of <span>find-in-page</span>.</p></li>
+   <li><p><var>node</var> is <span>inert via modal blockage</span>.</p></li>
+   <li><p><var>node</var>'s <span data-x="css-interactivity">'interactivity'</span> property has a
+   <span>computed value</span> of <span data-x="interactivity-inert">'inert'</span>.</p></li>
   </ul>
 
-  <p class="note">Inert nodes generally cannot be focused, and user agents do not expose the inert
-  nodes to accessibility APIs or assistive technologies. Inert nodes that are <span
+  <p class="note">The behavior of inert nodes is defined by the CSS concept of <span>inert</span>.
+  Inert nodes generally cannot be focused, and user agents do not expose the inert nodes to
+  accessibility APIs or assistive technologies. Inert nodes that are <span
   data-x="concept-command">commands</span> will become inoperable to users, in the manner described
   above.</p>
 
-  <p>User agents may allow the user to override the restrictions on <span>find-in-page</span> and
-  text selection, however.</p>
-
-  <p>By default, a node is not <span>inert</span>.</p>
-
   <h4>Modal dialogs and inert subtrees</h4>
 
-  <p>A <code>Document</code> <var>document</var> is <dfn>blocked by a modal dialog</dfn>
-  <var>subject</var> if <var>subject</var> is the topmost <code>dialog</code> element in
-  <var>document</var>'s <span>top layer</span>. While <var>document</var> is so blocked, every node
-  that is <span>connected</span> to <var>document</var>, with the exception of the
-  <var>subject</var> element and its <span>flat tree</span> descendants, must become
-  <span>inert</span>.</p>
+  <p>A <code>Document</code> <var>document</var> is <dfn>blocked by a modal</dfn> <var>subject</var>
+  if <var>subject</var> is the topmost <code>dialog</code> element in <var>document</var>'s
+  <span>top layer</span>. While <var>document</var> is so blocked, every element or
+  <code>Text</code> node that is <span>connected</span> to <var>document</var>, with the exception
+  of the <var>subject</var> element and its <span>flat tree</span> descendants, is considered
+  <dfn>inert via modal blockage</dfn>.</p>
 
-  <p><var>subject</var> can additionally become <span>inert</span> via the <code
-  data-x="attr-inert">inert</code> attribute, but only if specified on <var>subject</var> itself
-  (i.e., <var>subject</var> escapes inertness of ancestors); <var>subject</var>'s <span>flat
-  tree</span> descendants can become <span>inert</span> in a similar fashion.</p>
+  <p class="note">In this case, <var>subject</var> can additionally become <span>inert</span>
+  via the <code data-x="attr-inert">inert</code> attribute, but only if specified on
+  <var>subject</var> itself (i.e., <var>subject</var> escapes inertness of ancestors);
+  <var>subject</var>'s <span>flat tree</span> descendants can become <span>inert</span> in a similar
+  fashion.</p>
 
   <p class="note">The <code>dialog</code> element's <code
   data-x="dom-dialog-showModal">showModal()</code> method causes this mechanism to trigger, by <span
   data-x="add an element to the top layer">adding</span> the <code>dialog</code> element to its
   <span>node document</span>'s <span>top layer</span>.</p>
 
+  <div class="note">
+   <p>The HTML Standard defines several ways for an element to be <span>inert</span>,
+   including the <code data-x="attr-inert">inert</code> attribute, and the <span>blocked by a
+   modal</span> concept. The <ref>CSSUI</ref> specification additionally provides the <span
+   data-x="css-interactivity">'interactivity'</span> property. These methods don't directly affect
+   each other, but do interact. The relevant UA stylesheets that define this
+   behavior are included in the HTML Standard.</p>
+
+   <p>The effect of the <code class="css" data-x="">:modal { interactivity: auto; }</code> UA
+   stylesheet rule is to escape interactivity property inertness from ancestor elements of the modal
+   dialog. For instance, if the two dialogs below are modal, they will not be inert when rendered in
+   the top layer:</p>
+
+   <pre><code class="html">&lt;div inert>
+  &lt;dialog>&lt;/dialog>
+&lt;/div>
+&lt;div style="interactivity:inert">
+  &lt;dialog>&lt;/dialog>
+&lt;/div></code></pre>
+
+    <p>The reason that HTML "overrides" the <span data-x="css-interactivity">'interactivity'</span>
+    property in the case of modal dialogs is that accessibility technology requires modal dialogs to
+    be truly modal. Content outside of an open modal dialog needs to always be inert. For this
+    reason, the spec is designed in such a way that developers are unable to override modal dialog
+    <span data-x="css-interactivity">'interactivity'</span>, while still being able to override
+    other developer-controlled forms of interactivity such as the <code
+    data-x="attr-inert">inert</code> attribute.</p>
+  </div>
+
   <h4>The <dfn data-x="attr-inert"><code>inert</code></dfn> attribute</h4>
 
-  <p>The <code data-x="attr-inert">inert</code> attribute is a <span>boolean attribute</span> that
-  indicates, by its presence, that the element and all its <span>flat tree</span> descendants which
-  don't otherwise escape inertness (such as modal dialogs) are to be made <span>inert</span> by the
-  user agent.</p>
+  <p>All <span>HTML elements</span> may have the <code data-x="attr-inert">inert</code>
+  attribute, a <span>boolean attribute</span>.</p>
+
+  <p>When an element has the <span>inert</span> attribute, it indicates that the element and its
+  <span data-x="descendant">descendants</span> should become <span>inert</span>. This requirement
+  may be implemented indirectly through the style layer. For example, a web browser could implement
+  these requirements <a href="#hiddenCSS">using the rules suggested in the Rendering
+  section</a>.</p>
+
+  <div class="note">
+   <p>Because this attribute is typically implemented using CSS, it's also possible to override it
+   using CSS. For example:</p>
+
+   <pre><code class="html">&lt;div inert style="interactivity: auto">&lt;/div></code></pre>
+
+   <p>In this case, the <code class="html" data-x="">&lt;div></code> will not be <span>inert</span>
+   because the author styles have overridden the user agent styles.</p>
+  </div>
 
   <p>An inert subtree should not contain any content or controls which are critical to
   understanding or using aspects of the page which are not in the inert state. Content in an inert
@@ -81757,8 +81791,8 @@ dictionary <dfn dictionary>CommandEventInit</dfn> : <span>EventInit</span> {
     <var>starting point</var> being the <span>top-level traversable</span> itself.</p>
 
     <!-- in theory, the top-level traversable _always_ has at least one focusable area: the
-    viewport. Even a "blocked by a modal dialog" doesn't disable the viewport (since the Document is
-    its DOM anchor, and the Document isn't made inert by "blocked by a modal dialog"). Note that
+    viewport. Even a "blocked by a modal" doesn't disable the viewport (since the Document is
+    its DOM anchor, and the Document isn't made inert by "blocked by a modal"). Note that
     child navigables can have inert viewports, though (if the navigable container
     itself is inert, for example) -->
    </li>
@@ -136486,6 +136520,14 @@ dialog:popover-open {
   display:block;
 }
 
+:modal {
+  interactivity: auto;
+}
+
+[inert] {
+  interactivity: inert;
+}
+
 [popover] {
   position: fixed;
   inset: 0;