From 066fa0a045ad6ce26c702d60b0bf16cf0b622dae Mon Sep 17 00:00:00 2001 From: Mason Freed Date: Mon, 27 Jan 2025 16:41:42 -0800 Subject: [PATCH] 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 25a6b07eaae..f302399c842 100644 --- a/source +++ b/source @@ -4008,6 +4008,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 @@ -79967,56 +79968,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 @@ -81757,8 +81791,8 @@ dictionary CommandEventInit : EventInit { starting point being the top-level traversable itself.

    • @@ -136486,6 +136520,14 @@ dialog:popover-open { display:block; } +:modal { + interactivity: auto; +} + +[inert] { + interactivity: inert; +} + [popover] { position: fixed; inset: 0;