[css-ui-4] Add 'interactivity' property, per #10711 (#11178)

* [css-ui-4] Add 'interactivity' property, per #10711

* [css-ui-4] Sigh, inheritance *does* work on the flat tree, I'm dumb.

* [css-ui-4] Ensure 'interactivity' can make things inert, but can't *escape* inertness; defer more to the host language.

Author: tabatkins

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
 </pre>
 
 <pre class=link-defaults>
@@ -103,7 +104,8 @@ spec:css-backgrounds-3; type:property; text:border-left-color
 </pre>
 <pre class=anchors>
 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
 </pre>
 
 <style>
@@ -1978,6 +1980,90 @@ Exclusion from Hit-testing: the 'pointer-events' property</h3>
 	with more possible values.
 	The effect of such values outside of SVG is currently not defined.
 
+<h3 id="inertness">
+Preventing All Interaction: the 'interactivity' property</h3>
+
+<pre class=propdef>
+Name: interactivity
+Value: auto | inert
+Initial: auto
+Applies to: all elements
+Inherited: yes
+Percentages: N/A
+Computed Value: as specified
+Animation type: discrete
+</pre>
+
+The 'interactivity' property specifies whether an element and its [=flat tree=] descendants
+(including [=text runs=])
+are [=inert=] or not.
+
+<dl dfn-type=value dfn-for=interactivity>
+	: <dfn>auto</dfn>
+	:: The element's [=inert|inertness=] is determined by the [=host language=].
+		<span class=note>(This will <em>usually</em> mean the element is not [=inert=].)</span>
+
+	: <dfn>inert</dfn>
+	:: The element is [=inert=].
+</dl>
+
+<div algorithm>
+	When an [=element=] or [=text run=] is <dfn export>inert</dfn>:
+
+	* 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.
+</div>
+
+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.
+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.
+
+<div class=issue>
+	The following should be inserted into the HTML stylesheet,
+	to ensure that top-level modal dialogs become uninert by default:
+
+	<pre highlight=css>
+	[inert] {
+		interactivity: inert;
+	}
+	dialog:modal {
+		interactivity: auto;
+	}
+	</pre>
+
+	The <css>dialog:modal</css> selector above needs to be expanded 
+	for any other elements that escape inertness by default.
+</div>
+
+
 
 <h2 id="styling-widgets" oldids="form-styling, control-styling">
 Styling Widgets</h2>