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:

    -

    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;