Date: Mon, 11 Nov 2024 12:40:26 -0800
Subject: [PATCH 1/5] [css-ui-4] Add 'interactivity' property, per #10711
---
css-ui-4/Overview.bs | 98 +++++++++++++++++++++++++++++++++++++++++++-
1 file changed, 97 insertions(+), 1 deletion(-)
diff --git a/css-ui-4/Overview.bs b/css-ui-4/Overview.bs
index c5353cc3f39..14af8932cd0 100644
--- a/css-ui-4/Overview.bs
+++ b/css-ui-4/Overview.bs
@@ -62,6 +62,7 @@ Ignore Can I Use URL Failure: https://drafts.csswg.org/css-ui-4/
Ignore Can I Use URL Failure: http://drafts.csswg.org/css-ui-4/
Ignore Can I Use URL Failure: https://www.w3.org/TR/css-ui-4/
Ignore Can I Use URL Failure: http://www.w3.org/TR/css-ui-4/
+Indent: 2
@@ -103,7 +104,8 @@ spec:css-backgrounds-3; type:property; text:border-left-color
urlPrefix: https://html.spec.whatwg.org/multipage/; spec:HTML
- text:password; type:attr-value; for:input/type; url: input.html#attr-input-type-password-keyword
+ type:attr-value; text:password; for:input/type; url: input.html#attr-input-type-password-keyword
+ type:element-attr; text:inert; for:html-global; url: interaction.html#the-inert-attribute
@@ -1972,6 +1974,100 @@ Exclusion from Hit-testing: the 'pointer-events' property
with more possible values.
The effect of such values outside of SVG is currently not defined.
+
+Preventing All Interaction: the 'interactivity' property
+
+
+Name: interactivity
+Value: auto | normal | inert
+Initial: auto
+Applies to: all elements
+Inherited: no
+Percentages: N/A
+Computed Value: as specified
+Animation type: discrete
+
+
+The 'interactivity' property specifies whether an element and its [=flat tree=] descendants
+(including [=text runs=])
+are [=inert=] or not.
+
+
+ : auto
+ ::
+ The element is [=inert=] if and only if
+ its [=flat tree=] parent is [=inert=].
+
+ : normal
+ :: The element is not [=inert=].
+
+ : inert
+ :: The element is [=inert=].
+
+
+Note: While 'interactivity' is not an [=inherited=] property,
+by default (when set to ''interactivity/auto'')
+it acts similarly to one,
+except it "inherits" thru the [=flat tree=]
+rather than the usual parent/child relationship.
+
+
+ When an [=element=] or [=text run=] is inert:
+
+ * Hit-testing must act as if 'pointer-event' was ''pointer-events/none'',
+ regardless of its actual value.
+ * Text selection must act as if 'user-select' was ''user-select/none'',
+ regardless of its actual value.
+ * If the [=element=] or [=text run=] is editable,
+ it must behave as if it was non-editable.
+ * The [=element=] or [=text run=] should be ignored
+ for the purposes of find-in-page and similar searching actions.
+
+ User agents may allow the user
+ to override the restrictions on find-in-page and text selection.
+
+
+Note: [=Inert=] nodes generally cannot be focused,
+and user agents do not expose the inert nodes
+to accessibility APIs or assistive technologies.
+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 subtree will not be perceivable by all users, or interactive.
+Authors should not specify elements as inert
+unless the content they represent are also visually obscured in some way.
+In most cases,
+authors should not specify the inert attribute on individual form controls.
+In these instances, the <{input/disabled}> attribute is probably more appropriate.
+
+
+ The HTML <{html-global/inert}> attribute is meant to be stronger
+ than the 'interactivity' property,
+ per CSSWG resolution.
+ This should be achieved by the following user-agent CSS:
+
+
+ @scope ([inert]) to (X) {
+ interactivity: inert !important;
+ }
+
+
+ Where the
X represents a theoretical selector
+ matching any elements that "escape" inertness by default,
+ such as modal dialogs.
+
+ This prevents descendants of an element with the <{html-global/inert}> attribute
+ from being un-inerted,
+ but
does allow elements that are [=flat tree=] descendants,
+ but not DOM tree descendants,
+ to be set non-inert.
+ For example, a light-tree element
+ slotted into an inert subtree in a shadow DOM
+ could turn off inertness.
+ I assume this is ok?
+
Name: interactivity
-Value: auto | normal | inert
+Value: auto | inert
Initial: auto
Applies to: all elements
-Inherited: no
+Inherited: yes
Percentages: N/A
Computed Value: as specified
Animation type: discrete
@@ -1995,22 +1995,13 @@ are [=inert=] or not.
: auto
::
- The element is [=inert=] if and only if
- its [=flat tree=] parent is [=inert=].
-
- : normal
- :: The element is not [=inert=].
+ Unless otherwise specified by the host language,
+ the element is not [=inert=].
: inert
:: The element is [=inert=].
-Note: While 'interactivity' is not an [=inherited=] property,
-by default (when set to ''interactivity/auto'')
-it acts similarly to one,
-except it "inherits" thru the [=flat tree=]
-rather than the usual parent/child relationship.
-
When an [=element=] or [=text run=] is
inert:
@@ -2048,23 +2039,18 @@ In these instances, the <{input/disabled}> attribute is probably more appropriat
@scope ([inert]) to (X) {
- interactivity: inert !important;
+ * {
+ interactivity: inert !important;
+ }
+ }
+ X {
+ interactivity: auto;
}
Where the
X represents a theoretical selector
matching any elements that "escape" inertness by default,
such as modal dialogs.
-
- This prevents descendants of an element with the <{html-global/inert}> attribute
- from being un-inerted,
- but
does allow elements that are [=flat tree=] descendants,
- but not DOM tree descendants,
- to be set non-inert.
- For example, a light-tree element
- slotted into an inert subtree in a shadow DOM
- could turn off inertness.
- I assume this is ok?
: auto
- ::
- Unless otherwise specified by the host language,
- the element is not [=inert=].
+ :: The element's [=inert|inertness=] is determined by the [=host language=].
+ (This will usually mean the element is not [=inert=].)
: inert
:: The element is [=inert=].
@@ -2018,6 +2017,16 @@ are [=inert=] or not.
to override the restrictions on find-in-page and text selection.
+Note: This property allows an author to force an element [=inert=],
+but doesn't allow making an element *non*-[=inert=],
+just deferring inertness to the host language.
+For example, in HTML, while a modal dialog is being displayed,
+the rest of the page is forced inert automatically,
+regardless of the value of this property.
+In general, host languages can make use of more information about the document
+than CSS has easy access to
+to determine what the best inertness behavior is for users.
+
Note: [=Inert=] nodes generally cannot be focused,
and user agents do not expose the inert nodes
to accessibility APIs or assistive technologies.
@@ -2032,25 +2041,20 @@ authors should not specify the inert attribute on individual form controls.
In these instances, the <{input/disabled}> attribute is probably more appropriate.
- The HTML <{html-global/inert}> attribute is meant to be stronger
- than the 'interactivity' property,
- per CSSWG resolution.
- This should be achieved by the following user-agent CSS:
+ The following should be inserted into the HTML stylesheet,
+ to ensure that top-level modal dialogs become uninert by default:
- @scope ([inert]) to (X) {
- * {
- interactivity: inert !important;
- }
+ [inert] {
+ interactivity: inert;
}
- X {
+ dialog:modal {
interactivity: auto;
}
- Where the
X represents a theoretical selector
- matching any elements that "escape" inertness by default,
- such as modal dialogs.
+ The
dialog:modal selector above needs to be expanded
+ for any other elements that escape inertness by default.