From 7c48dc82dd488ae566b974bee4d1b827831697df Mon Sep 17 00:00:00 2001 From: Mason Freed Date: Mon, 27 Jan 2025 16:41:42 -0800 Subject: [PATCH 1/4] 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 --- source | 126 ++++++++++++++++++++++++++++++++++++++------------------- 1 file changed, 84 insertions(+), 42 deletions(-) diff --git a/source b/source index d09409645ed..306f5f58e23 100644 --- a/source +++ b/source @@ -4006,6 +4006,10 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute devolved widget state.
  • The 'pointer-events' property
  • The 'user-select' property
    • +
  • The 'interactivity' property, and its + 'auto' and + 'inert' values.
    • +
  • The inert concept

    • The algorithm to HTMLDialogElement : HTMLElement { request">close requests, will no longer be able to close the dialog.

  • If the dialog was shown using its showModal() - method, the Document will still be blocked.

    • + method, the Document will still be blocked.

    For these reasons, it is generally better to never remove the HTMLDialogElement : HTMLElement { dialogs list does not contain subject.

    -

  • Add subject to subject's node document's open - dialogs list.

    • -
  • -

    Let subject's node document be blocked by the modal dialog subject.

    +

    Add subject to subject's node document's open + dialogs list.

    This will cause the focused area of the document to become inert (unless that currently focused area is a @@ -80217,56 +80218,89 @@ interface VisibilityStateEntry : PerformanceEntrySee also inert for an explanation of the attribute of the same name.

    -

    A node (in particular elements and text nodes) can be inert. When a node is - inert:

    - +

    An element or Text node must be considered inert if one of + the following is true:

      -

    • Hit-testing must act as if the 'pointer-events' CSS property were set to - 'none'.

      • - -

    • Text selection functionality must act as if the 'user-select' CSS property - were set to 'none'.

      • - -

    • If it is editable, the node behaves as if it were non-editable.

      • - -

    • The user agent should ignore the node for the purposes of find-in-page.

      • +

    • node is inert via modal blockage.

      • +

    • node's 'interactivity' property has a + computed value of 'inert'.

    -

    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 The behavior of inert nodes is defined by the CSS concept of inert. + 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 commands will become inoperable to users, in the manner described above.

    -

    User agents may allow the user to override the restrictions on find-in-page and - text selection, however.

    - -

    By default, a node is not inert.

    -

    Modal dialogs and inert subtrees

    -

    A Document document is blocked by a modal dialog - subject if subject is the topmost dialog element in - document's top layer. While document is so blocked, every node - that is connected to document, with the exception of the - subject element and its flat tree descendants, must become - inert.

    +

    A Document document is blocked by a modal subject + if subject is the topmost dialog element in document's + top layer. While document is so blocked, every element or + Text node that is connected to document, with the exception + of the subject element and its flat tree descendants, is considered + inert via modal blockage.

    -

    subject can additionally become inert via the inert attribute, but only if specified on subject itself - (i.e., subject escapes inertness of ancestors); subject's flat - tree descendants can become inert in a similar fashion.

    +

    In this case, subject can additionally become inert + via the inert attribute, but only if specified on + subject itself (i.e., subject escapes inertness of ancestors); + subject's flat tree descendants can become inert in a similar + fashion.

    The dialog element's showModal() method causes this mechanism to trigger, by adding the dialog element to its node document's top layer.

    +
    +

    The HTML Standard defines several ways for an element to be inert, + including the inert attribute, and the blocked by a + modal concept. The CSSUI specification additionally provides the 'interactivity' 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.

    + +

    The effect of the :modal { interactivity: auto; } 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:

    + + 
    <div inert>
+  <dialog></dialog>
+</div>
+<div style="interactivity:inert">
+  <dialog></dialog>
+</div>
    + +

    The reason that HTML "overrides" the 'interactivity' + 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 + 'interactivity', while still being able to override + other developer-controlled forms of interactivity such as the inert attribute.

    +
    +

    The inert attribute

    -

    The inert attribute is a boolean attribute that - indicates, by its presence, that the element and all its flat tree descendants which - don't otherwise escape inertness (such as modal dialogs) are to be made inert by the - user agent.

    +

    All HTML elements may have the inert + attribute, a boolean attribute.

    + +

    When an element has the inert attribute, it indicates that the element and its + descendants should become inert. This requirement + may be implemented indirectly through the style layer. For example, a web browser could implement + these requirements using the rules suggested in the Rendering + section.

    + +
    +

    Because this attribute is typically implemented using CSS, it's also possible to override it + using CSS. For example:

    + + 
    <div inert style="interactivity: auto"></div>
    + +

    In this case, the <div> will not be inert + because the author styles have overridden the user agent styles.

    +

    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 @@ -82008,8 +82042,8 @@ dictionary CommandEventInit : EventInit { starting point being the top-level traversable itself.

    • @@ -136802,6 +136836,14 @@ dialog:popover-open { display:block; } +:modal { + interactivity: auto; +} + +[inert] { + interactivity: inert; +} + [popover] { position: fixed; inset: 0; From c2906561c8e6e9bb5f5f72d8d25720647f57abf6 Mon Sep 17 00:00:00 2001 From: Mason Freed Date: Thu, 15 May 2025 09:09:53 -0700 Subject: [PATCH 2/4] Remove de-inertability (like antidisestablishmentarianism but shorter) --- source | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/source b/source index 306f5f58e23..fc5dfcea32c 100644 --- a/source +++ b/source @@ -80222,8 +80222,9 @@ interface VisibilityStateEntry : PerformanceEntry

    • node is inert via modal blockage.

      • -

    • node's 'interactivity' property has a - computed value of 'inert'.

      • +

    • node or a flat tree ancestor of node has an + 'interactivity' property with a computed + value of 'inert'.

    The behavior of inert nodes is defined by the CSS concept of inert. @@ -80243,9 +80244,9 @@ interface VisibilityStateEntry : PerformanceEntryIn this case, subject can additionally become inert via the inert attribute, but only if specified on - subject itself (i.e., subject escapes inertness of ancestors); - subject's flat tree descendants can become inert in a similar - fashion.

    + subject itself (i.e., subject escapes the dialog-induced inertness of + ancestors); subject's flat tree descendants can become inert + in a similar fashion.

    The dialog element's showModal() method causes this mechanism to trigger, by VisibilityStateEntry : PerformanceEntryThe HTML Standard defines several ways for an element to be inert, including the inert attribute, and the blocked by a modal concept. The CSSUI specification additionally provides the 'interactivity' 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.

    + data-x="css-interactivity">'interactivity'     property. These mechanisms for inducing + inertness are related but distinct. The relevant UA stylesheets that + define this behavior are included in the HTML Standard.

    The effect of the :modal { interactivity: auto; } UA stylesheet rule is to escape interactivity property inertness from ancestor elements of the modal @@ -80272,13 +80273,11 @@ interface VisibilityStateEntry : PerformanceEntry</dialog> </div> -

    The reason that HTML "overrides" the 'interactivity' - 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 - 'interactivity', while still being able to override - other developer-controlled forms of interactivity such as the inert attribute.

    +

    The reason that HTML "overrides" the 'interactivity' + property in the case of modal dialogs is that modal dialogs are the only mechanism in HTML or + CSS which allows a sub-tree of an inert tree to be made non-inert. All + other mechanisms for inducing inertness are irreversible: sub-trees + cannot be exempted from that inertness.

    The inert attribute

    @@ -80299,7 +80298,8 @@ interface VisibilityStateEntry : PerformanceEntry<div inert style="interactivity: auto"></div>

    In this case, the <div> will not be inert - because the author styles have overridden the user agent styles.

    + because the author inline styles have higher precedence than the user agent styles on the same + node.

    An inert subtree should not contain any content or controls which are critical to From a8b319f6246d83bc98afeaafd660a391eba2e321 Mon Sep 17 00:00:00 2001 From: Mason Freed Date: Mon, 19 May 2025 10:21:18 -0700 Subject: [PATCH 3/4] Fix `inert` attribute --- source | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/source b/source index fc5dfcea32c..c6defb894ef 100644 --- a/source +++ b/source @@ -80285,11 +80285,11 @@ interface VisibilityStateEntry : PerformanceEntryAll HTML elements may have the inert attribute, a boolean attribute.

    -

    When an element has the inert attribute, it indicates that the element and its - descendants should become inert. This requirement - may be implemented indirectly through the style layer. For example, a web browser could implement - these requirements using the rules suggested in the Rendering - section.

    +

    When an element has the inert attribute, it + indicates that the element and its descendants should become + inert. This requirement may be implemented indirectly through the style layer. For + example, a web browser could implement these requirements using the rules + suggested in the Rendering section.

    Because this attribute is typically implemented using CSS, it's also possible to override it From df3c1ca68040906f7850e065871587e1bd6aa47b Mon Sep 17 00:00:00 2001 From: Mason Freed Date: Mon, 19 May 2025 12:05:38 -0700 Subject: [PATCH 4/4] Remove span --- source | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/source b/source index c6defb894ef..c991bcb8099 100644 --- a/source +++ b/source @@ -80285,11 +80285,11 @@ interface VisibilityStateEntry : PerformanceEntryAll HTML elements may have the inert attribute, a boolean attribute.

    -

    When an element has the inert attribute, it - indicates that the element and its descendants should become - inert. This requirement may be implemented indirectly through the style layer. For - example, a web browser could implement these requirements using the rules - suggested in the Rendering section.

    +

    When an element has the inert attribute, it indicates that the + element and its descendants should become inert. + This requirement may be implemented indirectly through the style layer. For example, a web browser + could implement these requirements using the rules suggested in the Rendering + section.

    Because this attribute is typically implemented using CSS, it's also possible to override it