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

Connect HTML spec up to new CSS interactivity property #10956

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Connect HTML spec up to new CSS interactivity property #10956

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
126 changes: 84 additions & 42 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4008,6 +4008,10 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
<dfn data-x-href="https://drafts.csswg.org/css-ui/#devolved">devolved widget</dfn> state.</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>
<li>The <dfn data-x-href="https://drafts.csswg.org/css-ui-4/#inertness" data-x="css-interactivity">'interactivity'</dfn> property, and its
<dfn data-x-href="https://drafts.csswg.org/css-ui/#valdef-interactivity-auto" data-x="interactivity-auto">'auto'</dfn> and
<dfn data-x-href="https://drafts.csswg.org/css-ui/#valdef-interactivity-inert" data-x="interactivity-inert">'inert'</dfn> values.</li>
<li>The <dfn data-x-href="https://drafts.csswg.org/css-ui-4/#inert">inert</dfn> concept</li>
</ul>

<p>The algorithm to <dfn
Expand Down Expand Up @@ -62143,8 +62147,8 @@ interface <dfn interface>HTMLDialogElement</dfn> : <span>HTMLElement</span> {
request">close requests</span>, will no longer be able to close the dialog.</p></li>

<li><p>If the dialog was shown using its <code data-x="dom-dialog-showModal">showModal()</code>
method, the <code>Document</code> will still be <span data-x="blocked by a modal
dialog">blocked</span>.</p></li>
method, the <code>Document</code> will still be <span data-x="blocked by a
modal">blocked</span>.</p></li>
</ul>

<p>For these reasons, it is generally better to never remove the <code
Expand Down Expand Up @@ -62462,12 +62466,9 @@ interface <dfn interface>HTMLDialogElement</dfn> : <span>HTMLElement</span> {
dialogs list</span> does not <span data-x="list contains">contain</span>
<var>subject</var>.</p></li>

<li><p>Add <var>subject</var> to <var>subject</var>'s <span>node document</span>'s <span>open
dialogs list</span>.</p></li>

<li>
<p>Let <var>subject</var>'s <span>node document</span> be <span data-x="blocked by a modal
dialog">blocked by the modal dialog</span> <var>subject</var>.</p>
<p>Add <var>subject</var> to <var>subject</var>'s <span>node document</span>'s <span>open
dialogs list</span>.</p>

<p class="note" id="note-dialog-plus-focus-fixup">This will cause the <span>focused area of the
document</span> to become <span>inert</span> (unless that currently focused area is a
Expand Down Expand Up @@ -79967,56 +79968,89 @@ interface <dfn interface>VisibilityStateEntry</dfn> : <span>PerformanceEntry</sp
<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 <dfn>inert</dfn>. When a node is
<span>inert</span>:</p>

<p>An element or <code>Text</code> <var>node</var> must be considered <span>inert</span> if one of
the following is true:</p>
<ul>
<li><p>Hit-testing must act as if the <span>'pointer-events'</span> CSS property were set to
'none'.</p></li>

<li><p>Text selection functionality must act as if the <span>'user-select'</span> CSS property
were set to 'none'.</p></li>

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

<li><p>The user agent should ignore the node for the purposes of <span>find-in-page</span>.</p></li>
<li><p><var>node</var> is <span>inert via modal blockage</span>.</p></li>
<li><p><var>node</var>'s <span data-x="css-interactivity">'interactivity'</span> property has a
<span>computed value</span> of <span data-x="interactivity-inert">'inert'</span>.</p></li>
</ul>

<p class="note">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 <span
<p class="note">The behavior of inert nodes is defined by the CSS concept of <span>inert</span>.
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 <span
data-x="concept-command">commands</span> will become inoperable to users, in the manner described
above.</p>

<p>User agents may allow the user to override the restrictions on <span>find-in-page</span> 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>flat tree</span> descendants, must become
<span>inert</span>.</p>
<p>A <code>Document</code> <var>document</var> is <dfn>blocked by a modal</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 element or
<code>Text</code> node that is <span>connected</span> to <var>document</var>, with the exception
of the <var>subject</var> element and its <span>flat tree</span> descendants, is considered
<dfn>inert via modal blockage</dfn>.</p>

<p><var>subject</var> can additionally become <span>inert</span> via the <code
data-x="attr-inert">inert</code> attribute, but only if specified on <var>subject</var> itself
(i.e., <var>subject</var> escapes inertness of ancestors); <var>subject</var>'s <span>flat
tree</span> descendants can become <span>inert</span> in a similar fashion.</p>
<p class="note">In this case, <var>subject</var> can additionally become <span>inert</span>
via the <code data-x="attr-inert">inert</code> attribute, but only if specified on
<var>subject</var> itself (i.e., <var>subject</var> escapes inertness of ancestors);
<var>subject</var>'s <span>flat tree</span> descendants can become <span>inert</span> in a similar
fashion.</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="add an element to the top layer">adding</span> the <code>dialog</code> element to its
<span>node document</span>'s <span>top layer</span>.</p>

<div class="note">
<p>The HTML Standard defines several ways for an element to be <span>inert</span>,
including the <code data-x="attr-inert">inert</code> attribute, and the <span>blocked by a
modal</span> concept. The <ref>CSSUI</ref> specification additionally provides the <span
data-x="css-interactivity">'interactivity'</span> 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.</p>

<p>The effect of the <code class="css" data-x="">:modal { interactivity: auto; }</code> 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:</p>

<pre><code class="html">&lt;div inert>
&lt;dialog>&lt;/dialog>
&lt;/div>
&lt;div style="interactivity:inert">
&lt;dialog>&lt;/dialog>
&lt;/div></code></pre>

<p>The reason that HTML "overrides" the <span data-x="css-interactivity">'interactivity'</span>
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
<span data-x="css-interactivity">'interactivity'</span>, while still being able to override
other developer-controlled forms of interactivity such as the <code
data-x="attr-inert">inert</code> attribute.</p>
</div>

<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 which
don't otherwise escape inertness (such as modal dialogs) are to be made <span>inert</span> by the
user agent.</p>
<p>All <span>HTML elements</span> may have the <code data-x="attr-inert">inert</code>
attribute, a <span>boolean attribute</span>.</p>

<p>When an element has the <span>inert</span> attribute, it indicates that the element and its
<span data-x="descendant">descendants</span> should become <span>inert</span>. This requirement
may be implemented indirectly through the style layer. For example, a web browser could implement
these requirements <a href="#hiddenCSS">using the rules suggested in the Rendering
section</a>.</p>

<div class="note">
<p>Because this attribute is typically implemented using CSS, it's also possible to override it
using CSS. For example:</p>

<pre><code class="html">&lt;div inert style="interactivity: auto">&lt;/div></code></pre>

<p>In this case, the <code class="html" data-x="">&lt;div></code> will not be <span>inert</span>
because the author styles have overridden the user agent styles.</p>
</div>

<p>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
Expand Down Expand Up @@ -81757,8 +81791,8 @@ dictionary <dfn dictionary>CommandEventInit</dfn> : <span>EventInit</span> {
<var>starting point</var> being the <span>top-level traversable</span> itself.</p>

<!-- in theory, the top-level traversable _always_ has at least one focusable area: the
viewport. Even a "blocked by a modal dialog" doesn't disable the viewport (since the Document is
its DOM anchor, and the Document isn't made inert by "blocked by a modal dialog"). Note that
viewport. Even a "blocked by a modal" doesn't disable the viewport (since the Document is
its DOM anchor, and the Document isn't made inert by "blocked by a modal"). Note that
child navigables can have inert viewports, though (if the navigable container
itself is inert, for example) -->
</li>
Expand Down Expand Up @@ -136486,6 +136520,14 @@ dialog:popover-open {
display:block;
}

:modal {
interactivity: auto;
}

[inert] {
interactivity: inert;
}

[popover] {
position: fixed;
inset: 0;
Expand Down