[css-overflow-5] Create scroll markers from <a> elements. (#10617)

This changes the scroll marker primitive to be based on a regular <a> element within a focusgroup.

Author: flackr

css-overflow-5/Overview.bs

@@ -207,6 +207,9 @@ Overflow Controls: the 'scroll-marker-group' property and pseudo-elements</h2>
 		::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>.
+
 <h3 id="scroll-marker-pseudo">The ''::scroll-marker'' pseudo-element</h3>
 
 	When the computed 'content' value of a <dfn selector>::scroll-marker</dfn> pseudo-element is not 'none'
@@ -215,9 +218,11 @@ Overflow Controls: the 'scroll-marker-group' property and pseudo-elements</h2>
 	on its nearest ancestor [=scroll container=].
 	These boxes are added in the [=tree order=] of their <a>originating element</a>.
 
-	These pseudo-elements behave as a <{button}>
-	with {{HTMLButtonElement/scrollTargetElement}} set to its <a>originating element</a>.
-	They can be focused and invoked.
+	These pseudo-elements have their {{HTMLLinkElement/scrollTargetElement}} set to their <a>originating element</a>.
+	They have 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>.
 
 <h2 id="fragmentation" class=no-num>
 Appendix A: Redirection of Overflow</h2>
@@ -885,51 +890,46 @@ Appendix B: Scroll navigation controls</h2>
 However, there is little feedback to the user regarding the current content being viewed, and
 the interaction model does not match the expectations of modern accessible UI components.
 
-This specification adds a mechanism for creating scroll navigation controls.
-The active marker, reflecting the current position, can be styled to give the user an indication of which section they are in.
-The set of markers are treated as a component following the accessibility guidelines for keyboard navigation within components.
+This specification adds a mechanism for creating scroll navigation controls within groups of <{a}> elements.
+A group is created through the <a href="https://open-ui.org/components/focusgroup.explainer/">focusgroup</a> attribute
+on an ancestor containing one or more <{a}> elements whose <a spec=html>indicated part</a> is on the current page.
+Within each group, the active marker reflects the current scroll position, and can be styled to give the user an indication of which section they are in.
 
 Use cases include a table of contents with links to relevant contents,
 markers for scrolling carousel pages,
 and scrollable tab panels.
 
 Issue: Add images representing these examples.
 
-Issue: Explore whether scrolltarget can be more directly associated with anchor tags.
-
-<h3 id="scroll-target"><{button/scrolltarget}> attribute</h3>
-
-	The <dfn element-attr for=button>scrolltarget</dfn> attribute turns a <{button}> element into a [=scroll marker control=].
-	This takes the ID of the element to target as its value.
-
-	The <dfn attribute for=HTMLButtonElement lt=scrollTargetElement>HTMLButtonElement.scrollTargetElement</dfn> instance property
-	gets and sets the element being interacted with by the control button.
-	This is the JavaScript equivalent of the <{button/scrolltarget}> HTML attribute.
+<h3 id="scroll-target">{{HTMLLinkElement/scrollTargetElement}} attribute</h3>
 
-	A 'button' with a non-null {{HTMLButtonElement/scrollTargetElement}}
-	represents a <dfn export>scroll marker control</dfn> that forms a <dfn>scroll marker group</dfn> for its nearest [=scroll container=]
-	in which exactly one control in the group can have its 'checked' state set to true.
-	A [=scroll marker control=] with a true 'checked' state can be styled by the '':checked'' pseudo-class.
+	An <{a}> element has its {{HTMLLinkElement/scrollTargetElement}}
+	initialized to the result of running the <a spec=html>select the indicated part</a> given the current {{Document}} and the <dfn element-attr for=a>href</dfn> attribute value as the |URL|,
+	turning it into a [=scroll marker control=] if the resulting <a spec=html>indicated part</a> is non-null.
 
-	The [=scroll marker group=] that contains a <{button}> element a also contains all the other <{button}> elements b that fulfill the following conditions:
+	The <dfn attribute for=HTMLLinkElement lt=scrollTargetElement>HTMLLinkElement.scrollTargetElement</dfn> instance property
+	gets and sets the element being interacted with by the anchor link and can be used to override the initial value established by the |href| property.
 
-	* The <{button}> element b has a non-null {{HTMLButtonElement/scrollTargetElement}} value.
-	* a and b's {{HTMLButtonElement/scrollTargetElement}} have the same nearest [=scroll container=].
+	An <{a}> element or ''::scroll-marker'' pseudo-element with a non-null {{HTMLLinkElement/scrollTargetElement}}
+	represents a <dfn export>scroll marker control</dfn> which participates in a <dfn>scroll marker group</dfn>
+	defined by the containing ''::scroll-marker-group'' psuedo-element (for ''::scroll-marker'' pseudo-elements)
+	or nearest ancestor element establishing a <a href="https://open-ui.org/components/focusgroup.explainer/">focusgroup</a>.
+	Exactly one control in a group will have its "checked" state set to true.
+	A [=scroll marker control=] with a true "checked" state can be styled by the '':checked'' pseudo-class.
 
 	<div algorithm="scrollTargetElement activation">
-		When a [=scroll marker control=] is activated:
+		When a [=scroll marker control=] is activated by explicit invocation or arrow key focus:
 
-		1. Let <var>element</var> be the {{HTMLButtonElement/scrollTargetElement}} of the control.
+		1. Let <var>element</var> be the {{HTMLLinkElement/scrollTargetElement}} of the control.
 		1. Let <var>block</var> be "<code>start</code>".
 		1. Let <var>inline</var> be "<code>start</code>".
 		1. <a lt='scroll a target into view'>Scroll the element into view</a> with <var>behavior</var>, <var>block</var>, and <var>inline</var>.
-		1. If activated by invocation, move focus to <var>element</var>.
-			If <var>element</var> is not focusable this will result in there being no active element,
-			but the next focus change will proceed from this <var>element</var> as if it were focused.
-	</div>
+		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.
 
-	Issue: Moving focus to the control on activation means that the only way to control scroll markers via the keyboard is to tab into them.
-	We should retain focus after the control is activated, while still altering the point from which the next focusable element is found if the user tabs away.
+				Note: If the user tabs away the focus behavior will ensure they tab into the relevant content.
+	</div>
 
 <h4 id="scroll-container-scroll">Scroll tracking</h4>
 
@@ -938,47 +938,45 @@ Issue: Explore whether scrolltarget can be more directly associated with anchor
 	or might directly track a user’s input
 	(e.g. touch scrolling, scrollbar dragging).
 	In either case, the user agent chooses an 'eventual scroll position' to which the scroller
-	will reach.
+	will reach. This ensures that the relevant marker is activated immediately.
 
-	This 'eventual scroll position' is used to determine the active marker.
+	This 'eventual scroll position' is used to determine the active marker within each [=scroll marker group=].
 	Since markers themselves may represent just the start of the content (e.g. headers), we consider the active marker to be the first one which we are at or beyond the scroll position of.
 
 	<div algorithm="scroll tracking">
 		Whenever a [=scroll container=] is scrolled, or layout changes the scroll position, the user agent must run these steps to determine the active marker:
 
 		1. Let <var>position</var> be the 'eventual scroll position' for the scrolling operation.
-		1. Let <var>markers</var> be all of the [=scroll marker control=] elements which are a part of the [=scroll marker group=] for the [=scroll container=].
-		1. Let <var>targets</var> be the set of {{HTMLButtonElement/scrollTargetElement}} for those controls sorted in [=tree order=].
-		1. Let <var>selected</var> be the first element in <var>targets</var>, or null if <var>targets</var> is empty.
-		1. For each <var>target</var> in <var>targets</var>:
-			1. Set <var>selected</var> to <var>target</var>.
-			1. Let <var>targetPosition</var> be the position that would be scrolled to if we scroll <var>target</var> into view.
-			1.	: If <var>targetPosition</var>'s scroll block offset is less than or equal to <var>position</var>'s scroll block offset, and
-					<var>targetPosition</var>'s scroll inline offset is less than or equal to <var>position</var>'s scroll inline offset.
-				::
-					Update <var>selected</var> to <var>target</var>.
-					Break.
-		1. 	: If <var>selected</var> is not null,
-			::
-				1. Let <var>marker</var> be the first control in <var>markers</var> whose {{HTMLButtonElement/scrollTargetElement}} is <var>selected</var>.
-				1. Set the 'checked' state of <var>marker</var> to true.
-			: Otherwise,
-			::
-				Set the 'checked' state of all controls in <var>markers</var> to false.
-	</div>
+		1. For each focusgroup <var>group</var> containing one or more [=scroll marker control=] elements whose {{HTMLLinkElement/scrollTargetElement}} is a descendant of [=scroll container=]:
 
-	Issue: Should we allow for none of the markers to be currently active, e.g. if not yet scrolled past the position of the first marker.
+			1. 	Let <var>markers</var> be all of the [=scroll marker control=] elements which are a part of the [=scroll marker group=] for the [=scroll container=].
+			1. 	Let <var>targets</var> be the {{HTMLLinkElement/scrollTargetElement}}s of |markers|, associated with the item of |markers| they came from, and sorted in [=tree order=].
+			1. 	For each |target| in |targets|, <a>determine the scroll-into-view position</a> of |target|, storing this as the associated |target position| of |target|.
+			1. 	Let |selected target| be the largest-indexed item of |targets|
+				whose associated |target position| is equal to or before |position| in both the block and inline axises in the current writing mode direction of the [=scroll container=].
 
-<h4 id="scroll-target-focus">Focus behavior</h4>
+				Issue: When the next marker is closer to being aligned than the previous we should use the next marker, in a manner similar to mandatory snap point selection.
 
-	A [=scroll marker control=] is only focusable if it is 'checked'. Within a group, exactly one marker is 'checked' at a time.
+			1. 	: If there is no such item,
+				::
+					Set the "checked" state of all |markers| in the |group| to false and return.
+
+			1. 	Let |selected marker| be the marker associated with |selected target|.
+				If multiple items of |markers| are associated with |selected target|,
+				set |selected marker| to be the marker that is earliest in tree order.
+			1. 	Set the "checked" state of |selected marker| to true.
+			1.	: If the active element was the <a href="https://open-ui.org/components/focusgroup.explainer/#last-focused-memory">last-focused element</a> of the |group|,
+					::
+						Focus |selected marker|
+			1. 	Set the <a href="https://open-ui.org/components/focusgroup.explainer/#last-focused-memory">last-focused element</a> of the |group| to |selected marker|.
+			1. 	Set the "checked" state of all other |markers| in the |group| to false.
+	</div>
 
-	When such a control is focused,
-	* The down arrow or right arrow move focus to and activate the next control from its [=scroll marker group=].
-	* The up arrow or left arrow move focus to and activate the previous control from its [=scroll marker group=].
-	* Space or Enter invoke the control.
+<h4 id="scroll-target-focus">Focus behavior</h4>
 
-	Issue: We should be able to tab away from the target immediately after using arrow navigations rather than requiring activating the control first.
+	When a [=scroll marker control=] is activated,
+	the next tabindex-ordered focus navigation will focus the {{HTMLLinkElement/scrollTargetElement}} if it is focusable,
+	otherwise, it will find the next focusable element from this <var>element</var> as though it were focused.
 
 <h2 id=privclass=nonum>
 Appendix C: Privacy Considerations</h2>