Skip to content

Commit

Permalink
Add the inert attribute and tweak definition of inert subtrees
Browse files Browse the repository at this point in the history
  • Loading branch information
nt1m committed Oct 12, 2021
1 parent bc7d13e commit 5582f9c
Showing 1 changed file with 39 additions and 20 deletions.
59 changes: 39 additions & 20 deletions source
Original file line number Diff line number Diff line change
Expand Up @@ -74071,25 +74071,27 @@ END:VCARD</pre>

<h3>Inert subtrees</h3>

<p class="note">This section <strong>does not</strong> define or create any content attribute
named "inert". This section merely defines an abstract <em>concept</em> of
<span data-x="inert">inertness</span>.</p>
<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 marked as <dfn>inert</dfn>. When a node
is <span>inert</span>, then the user agent must act as if the node was absent for the purposes of
targeting user interaction events, may ignore the node for the purposes of
<span>find-in-page</span>, and may prevent the user from selecting text in that node. User agents
should allow the user to override the restrictions on search and text selection, however.</p>

<p class="example">For example, consider a page that consists of just a single <span>inert</span>
paragraph positioned in the middle of a <code>body</code>. If a user moves their pointing device
from the <code>body</code> over to the <span>inert</span> paragraph and clicks on the paragraph,
no <code data-x="event-mouseover">mouseover</code> event would be fired, and the <code
data-x="event-mousemove">mousemove</code> and <code data-x="event-click">click</code> events would
be fired on the <code>body</code> element rather than the paragraph.</p>

<p class="note">When a node is inert, it generally cannot be focused. Inert nodes that are <span
is <span>inert</span>:</p>

<ul>
<li><p>It behaves as if the
<dfn data-x-href="https://drafts.csswg.org/css-ui-4/#pointer-events-control">
<code>pointer-events</code></dfn> CSS property were set to the value none.</p></li>
<li><p>It generally cannot be focused. Inert nodes that are <span
data-x="concept-command">commands</span> will also get disabled.</p>
<li><p>Selecting text in that node may be prevented by the user agent.</p></li>
<li><p>The user agent may ignore the node for the purposes of text search user interfaces
(commonly known as "find in page").</p></li>
</ul>

<p>User agents may allow the user to override the restrictions on search, text selection,
however.</p>

<p>By default, an element is not <span>inert</span>.</p>

<p>While a <span>browsing context container</span> is marked as <span>inert</span>, its
<span>nested browsing context</span>'s <span>active document</span>, and all nodes in that
Expand All @@ -74103,17 +74105,33 @@ END:VCARD</pre>
<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 data-x="shadow-including descendant">shadow-including
descendants</span>, must be marked <span>inert</span>. (The elements excepted by this paragraph
can additionally be marked <span>inert</span> through other means; being part of a modal dialog
does not "protect" a node from being marked <span>inert</span>.)</p>
<var>subject</var> element and its <span>flat tree</span> descendants, must be marked
<span>inert</span>. (The elements excepted by this paragraph can additionally be marked
<span>inert</span> through other means; being part of a modal dialog does not "protect" a node
from being marked <span>inert</span>.)</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="top-layer-add">adding</span> the <code>dialog</code> element to its <span>node
document</span>'s <span>top layer</span>.</p>

<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 flat tree descendants are to be
made <span>inert</span> by the user agent.</p>

<p class="note">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 just 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 <code data-x="attr-fe-disabled">disabled</code> attribute is probably
more appropriate.</p>

<p>The <dfn data-x="dom-inert"><code>inert</code></dfn> IDL attribute must <span>reflect</span>
the content attribute of the same name.</p>

<h3>Tracking user activation</h3>

Expand Down Expand Up @@ -127248,6 +127266,7 @@ INSERT INTERFACES HERE
Tim Altman,
Tim Dresser,
Tim Johansson,
Tim Nguyen, <!-- nt1m on Github -->
Tim Perry,
Tim van der Lippe,
TJ VanToll,
Expand Down

0 comments on commit 5582f9c

Please sign in to comment.