From 755ae90464d39aae6070afd35df0262d5a0d1685 Mon Sep 17 00:00:00 2001 From: Tim Nguyen Date: Thu, 10 Mar 2022 17:54:28 +0100 Subject: [PATCH] Add the inert attribute and tweak definition of inert subtrees Based on work in #4288 by Alice Boxhall. Tests: https://github.com/web-platform-tests/wpt/tree/master/inert. Closes #5650. Co-authored-by: Alice Boxhall --- source | 77 ++++++++++++++++++++++++++++++++++++++++++---------------- 1 file changed, 56 insertions(+), 21 deletions(-) diff --git a/source b/source index 12c5dfaef0a..228168813ad 100644 --- a/source +++ b/source @@ -3657,6 +3657,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
  • The 'outline' property
  • The 'cursor' property
  • The 'appearance' property
    • +
  • The 'pointer-events' property
    • +
  • The 'user-select' property

    • The algorithm to HTMLElement : Element { // user interaction [CEReactions] attribute boolean hidden; + [CEReactions] attribute boolean inert; undefined click(); [CEReactions] attribute DOMString accessKey; readonly attribute DOMString accessKeyLabel; @@ -11661,6 +11664,7 @@ https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20HTML%3E%

  • draggable
  • enterkeyhint
  • hidden
    • +
  • inert
  • inputmode
  • is
  • itemid
    • @@ -75150,40 +75154,66 @@ END:VCARD

    Inert subtrees

    -

    This section does not define or create any content attribute - named "inert". This section merely defines an abstract concept of - inertness.

    +

    See 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:

    + + + +

    Inert nodes generally cannot be focused. Inert nodes that are commands will also get disabled.

    +

    User agents may allow the user to override the restrictions on search 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 shadow-including - descendants, must be marked inert. (The elements excepted by this paragraph - can additionally be marked inert through other means; being part of a modal dialog - does not "protect" a node from being marked inert.)

    + subject element and its flat tree descendants, must become + inert. (The elements excepted by this paragraph can additionally become + inert through other means; being part of a modal dialog does not "protect" a node + from being inert.)

    The dialog element's showModal() method causes this mechanism to trigger, by adding the dialog element to its node + data-x="dom-dialog-showModal">showModal() method causes this mechanism to trigger, by + adding the dialog element to its node document's top layer.

    +

    The inert attribute

    + +

    The inert attribute is a boolean attribute that + indicates, by its presence, that the element and all its flat tree descendants are + to be made inert by the user agent.

    + +

    By default, there is no persistent visual indication of a subtree being inert. + Authors are encouraged to clearly mark what parts of their document are active and which are + inert, to avoid user confusion. In particular, it is worth remembering that not all users can see + all parts of a page at once; for example, users of screen readers, users on small devices or with + magnifiers, and even users using particularly small windows might not be able to see the active + part of a page and might get frustrated if inert sections are not obviously inert. For individual + controls, the disabled attribute is probably more + appropriate.

    + +

    The inert IDL attribute must reflect + the content attribute of the same name.

    +

    Tracking user activation

    @@ -124258,6 +124288,11 @@ interface External { link Images to use in different situations, e.g., high-resolution displays, small monitors, etc. (for rel="preload") Comma-separated list of image candidate strings + + inert + HTML elements + Whether the element is inert. + Boolean attribute inputmode HTML elements