Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add the inert attribute and tweak definition of inert subtrees #7134

Merged
merged 1 commit into from
Mar 10, 2022
Merged

Add the inert attribute and tweak definition of inert subtrees #7134

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
77 changes: 56 additions & 21 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3656,6 +3656,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
<li>The <dfn data-x-href="https://drafts.csswg.org/css-ui/#outline">'outline'</dfn> property</li>
<li>The <dfn data-x-href="https://drafts.csswg.org/css-ui/#cursor">'cursor'</dfn> property</li>
<li>The <dfn data-x-href="https://drafts.csswg.org/css-ui-4/#appearance-switching">'appearance'</dfn> property</li>
<li>The <dfn data-x-href="https://drafts.csswg.org/css-ui-4/#pointer-events-control">'pointer-events'</dfn> property</li>
<li>The <dfn data-x-href="https://drafts.csswg.org/css-ui-4/#content-selection">'user-select'</dfn> property</li>
</ul>

<p>The algorithm to <dfn
Expand Down Expand Up @@ -10407,6 +10409,7 @@ interface <dfn interface>HTMLElement</dfn> : <span>Element</span> {

// <span>user interaction</span>
[<span>CEReactions</span>] attribute boolean <span data-x="dom-hidden">hidden</span>;
[<span>CEReactions</span>] attribute boolean <span data-x="dom-inert">inert</span>;
undefined <span data-x="dom-click">click</span>();
[<span>CEReactions</span>] attribute DOMString <span data-x="dom-accessKey">accessKey</span>;
readonly attribute DOMString <span data-x="dom-accessKeyLabel">accessKeyLabel</span>;
Expand Down Expand Up @@ -11664,6 +11667,7 @@ https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20HTML%3E%
<li><code data-x="attr-draggable">draggable</code></li>
<li><code data-x="attr-enterkeyhint">enterkeyhint</code></li>
<li><code data-x="attr-hidden">hidden</code></li>
<li><code data-x="attr-inert">inert</code></li>
<li><code data-x="attr-inputmode">inputmode</code></li>
<li><code data-x="attr-is">is</code></li>
<li><code data-x="attr-itemid">itemid</code></li>
Expand Down Expand Up @@ -75069,40 +75073,66 @@ 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
nt1m marked this conversation as resolved.
Show resolved Hide resolved
attribute of the same name.</p>

<p>A node (in particular elements and text nodes) can be <dfn>inert</dfn>. When a node is
<span>inert</span>:</p>
nt1m marked this conversation as resolved.
Show resolved Hide resolved

nt1m marked this conversation as resolved.
Show resolved Hide resolved
<ul>
nt1m marked this conversation as resolved.
Show resolved Hide resolved
nt1m marked this conversation as resolved.
Show resolved Hide resolved
<li><p>Hit-testing must act as if the <span>'pointer-events'</span> CSS property were set to
'none'.</p></li>

nt1m marked this conversation as resolved.
Show resolved Hide resolved
<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>
<li><p>Text selection functionality must act as if the <span>'user-select'</span> CSS property
were set to 'none'.</p></li>

<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>
<li><p>If it is <span>editable</span>, the node behaves as if it were non-editable.</p></li>

<p class="note">When a node is inert, it generally cannot be focused. Inert nodes that are <span
<li><p>The user agent may ignore the node for the purposes of <span>find-in-page</span>.</p></li>
</ul>
nt1m marked this conversation as resolved.
Show resolved Hide resolved

<p class="note">Inert nodes generally cannot be focused. Inert nodes that are <span
data-x="concept-command">commands</span> will also get disabled.</p>

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

<p>By default, a node is not <span>inert</span>.</p>

<h4>Modal dialogs and inert subtrees</h4>

<p>A <code>Document</code> <var>document</var> is <dfn>blocked by a modal dialog</dfn>
<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 become
<span>inert</span>. (The elements excepted by this paragraph can additionally become
<span>inert</span> through other means; being part of a modal dialog does not "protect" a node
from being <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
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>

nt1m marked this conversation as resolved.
Show resolved Hide resolved
<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 <span>flat tree</span> descendants are
nt1m marked this conversation as resolved.
Show resolved Hide resolved
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
nt1m marked this conversation as resolved.
Show resolved Hide resolved
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 <code data-x="attr-fe-disabled">disabled</code> attribute is probably more
appropriate.</p>

nt1m marked this conversation as resolved.
Show resolved Hide resolved
<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 <dfn export>user activation</dfn></h3>
Expand Down Expand Up @@ -124139,6 +124169,11 @@ interface <dfn interface>External</dfn> {
<td> <code data-x="attr-link-imagesrcset">link</code>
<td> Images to use in different situations, e.g., high-resolution displays, small monitors, etc. (for <code data-x="attr-link-rel">rel</code>="<code data-x="rel-preload">preload</code>")
<td> Comma-separated list of <span data-x="image candidate string">image candidate strings</span>
<tr>
<th> <code data-x="">inert</code>
<td> <span data-x="attr-inert">HTML elements</span>
<td> Whether the element is <span>inert</span>.
<td> <span>Boolean attribute</span>
<tr>
<th> <code data-x="">inputmode</code>
<td> <span data-x="attr-inputmode">HTML elements</span>
Expand Down