[css-overflow-5] Update scroll-marker-group to include modes #12122 (#13627)

Author: danielsakhapov

css-overflow-5/Overview.bs

@@ -300,11 +300,11 @@ The 'scroll-marker-group' property</h4>
 
 	<pre class=propdef>
 	Name: scroll-marker-group
-	Value: none | before | after
+	Value: none | [ [ before | after ] || [ links | tabs ] ]
 	Initial: none
 	Applies to: [=scroll containers=]
 	Inherited: no
-	Computed value: specified value
+	Computed value: specified keyword(s)
 	Animation Type: discrete
 	Canonical Order: per grammar
 	</pre>
@@ -331,6 +331,17 @@ The 'scroll-marker-group' property</h4>
 			the generated pseudo-element's box is the last child of the [=originating element=].
 			Otherwise, its box is an immediate following sibling to its [=originating element=].
 
+		<dt><dfn>links</dfn>
+		<dd>
+			The generated ''::scroll-marker-group'' operates in "links" mode,
+			functioning like a navigation list.
+			This is the default mode if omitted.
+
+		<dt><dfn>tabs</dfn>
+		<dd>
+			The generated ''::scroll-marker-group'' operates in "tabs" mode,
+			functioning like a tablist.
+
 	</dl>
 
 <h4 id="scroll-marker-group-pseudo">The ''::scroll-marker-group'' pseudo-element</h4>
@@ -352,9 +363,6 @@ The 'scroll-marker-group' property</h4>
 		::scroll-marker-group { contain: size !important; }
 	</pre>
 
-	The 'scroll-marker-group' implicitly behaves as a single focusable component,
-	establishing a <a href="https://open-ui.org/components/focusgroup.explainer/">focusgroup</a>.
-
 <h4 id="scroll-marker-pseudo">The ''::scroll-marker'' pseudo-element</h4>
 
 	Similar to ''::before'' and ''::after'', all elements can have a ''::scroll-marker'' pseudo-element,
@@ -370,10 +378,25 @@ The 'scroll-marker-group' property</h4>
 	These pseudo-elements are [=fully styleable pseudo-elements=] and have a default style like the [[html#the-a-element|HTML &lt;a> element]].
 
 	These pseudo-elements have an indicated [=scroll target=] of their <a>originating element</a>.
-	They behave as an element with a <a href="https://html.spec.whatwg.org/multipage/interaction.html#attr-tabindex"><code>tabindex</code></a> of "-1",
-	making them focusable within their '::scroll-marker-group' either by arrow key navigation within the group,
-	or via the tab key when currently active or when no other ''::scroll-marker'' is active and this is the first marker in the group,
-	ensuring the group has a <a href="https://open-ui.org/components/focusgroup.explainer/#guaranteed-tab-stop">guaranteed tab stop</a>.
+
+<h4 id="scroll-marker-modes">Scroll Marker Modes</h4>
+
+	A ''::scroll-marker-group'' operates in either <dfn>links</dfn> or <dfn>tabs</dfn> mode based on the 'scroll-marker-group' property value of its [=originating element=]. The chosen mode significantly affects the roles, focus behaviors, and interactions of the associated elements and pseudo-elements (see [[#scroll-marker-activation]]).
+
+	If the mode is [=links=]:
+
+	* The roles of ''::scroll-marker-group'' and ''::scroll-marker'' are `navigation` and `link` respectively.
+	* All ''::scroll-marker'' pseudo-elements are tab stops, in order.
+	* The roles of the [=originating elements=] are unaffected.
+
+	If the mode is [=tabs=]:
+
+	* The roles of ''::scroll-marker-group'' and ''::scroll-marker'' are `tablist` and `tab` respectively.
+	* The ''::scroll-marker-group'' implicitly behaves as a single focusable component, establishing a <a href="https://open-ui.org/components/focusgroup.explainer/">focusgroup</a>.
+	* Only the active ''::scroll-marker'' is a tab stop; arrow keys are used to switch between markers. They behave as an element with a <a href="https://html.spec.whatwg.org/multipage/interaction.html#attr-tabindex"><code>tabindex</code></a> of "-1", making them focusable within their ''::scroll-marker-group'' either by arrow key navigation within the group, or via the tab key when currently active (or when no other ''::scroll-marker'' is active and this is the first marker in the group), ensuring the group has a <a href="https://open-ui.org/components/focusgroup.explainer/#guaranteed-tab-stop">guaranteed tab stop</a>.
+	* [=Originating elements=] of ''::scroll-marker'' are given an implicit role of `tabpanel`. If the [=originating element=] is a ''::column'' pseudo-element, the `tabpanel` role is given to the [=originating element=] of the ''::column''.
+	* The ''::scroll-marker'' pseudo-element is a focus navigation scope owner for its associated [=originating element=]. This means that tab focus moves from the marker to the content. Since only the active marker is a tab stop, contents of the inactive tabpanels are not reached unless the active tab is switched.
+	* Content from inactive tabs is also hidden from the accessibility tree, meaning authors do not need to carefully apply `interactivity: inert` to hide the inactive tabpanels.
 
 <h4 id="active-before-after-scroll-markers">
 Selecting Scroll Markers: '':target-current'', '':target-before'' and '':target-after'' pseudo-classes</h4>
@@ -520,14 +543,20 @@ Calculating the Active Scroll Marker</h4>
 		1. <a lt='scroll a target into view'>Scroll the |element| into view</a> with <var>block</var>, <var>inline</var>, and <var>container</var>.
 		1. 	: If the activation was triggered by invocation
 			::
-				1. <a spec=html>Follow the hyperlink</a> updating the URL, however retain focus on the marker element.
-
-				Note: If the user tabs away the focus behavior will ensure they tab into the relevant content.
+				1. <a spec=html>Follow the hyperlink</a> updating the URL.
+				1. : If the [=scroll marker group=] is in [=tabs=] mode
+					::
+						Retain focus on the [=scroll marker=] element.
+				1. : If the [=scroll marker group=] is in [=links=] mode
+					::
+						Set the <a href="https://html.spec.whatwg.org/multipage/interaction.html#sequential-focus-navigation-starting-point">sequential focus navigation starting point</a> to the [=originating element=], losing focus from the [=scroll marker=].
+
+				Note: In [=tabs=] mode, if the user tabs away, the focus behavior will ensure they tab into the relevant content.
 	</div>
 
 <h4 id="scroll-marker-next-focus">Next tab-index-ordered focus</h4>
 
-	When a [=scroll marker=] is activated,
+	When a [=scroll marker=] in [=tabs=] mode is activated,
 	the next tabindex-ordered focus navigation will focus the [=scroll target=] if it is focusable,
 	otherwise, it will find the next focusable element from the [=scroll target=] 
 	as though it were focused.