diff --git a/css-overflow-5/Overview.bs b/css-overflow-5/Overview.bs index 82827c5ebd20..780388ad74d7 100644 --- a/css-overflow-5/Overview.bs +++ b/css-overflow-5/Overview.bs @@ -300,11 +300,11 @@ The 'scroll-marker-group' property
 	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
 	
@@ -331,6 +331,17 @@ The 'scroll-marker-group' property 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=]. +
links +
+ The generated ''::scroll-marker-group'' operates in "links" mode, + functioning like a navigation list. + This is the default mode if omitted. + +
tabs +
+ The generated ''::scroll-marker-group'' operates in "tabs" mode, + functioning like a tablist. +

The ''::scroll-marker-group'' pseudo-element

@@ -352,9 +363,6 @@ The 'scroll-marker-group' property ::scroll-marker-group { contain: size !important; } - The 'scroll-marker-group' implicitly behaves as a single focusable component, - establishing a focusgroup. -

The ''::scroll-marker'' pseudo-element

Similar to ''::before'' and ''::after'', all elements can have a ''::scroll-marker'' pseudo-element, @@ -370,10 +378,25 @@ The 'scroll-marker-group' property These pseudo-elements are [=fully styleable pseudo-elements=] and have a default style like the [[html#the-a-element|HTML <a> element]]. These pseudo-elements have an indicated [=scroll target=] of their originating element. - They behave as an element with a tabindex 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 guaranteed tab stop. + +

Scroll Marker Modes

+ + A ''::scroll-marker-group'' operates in either links or tabs 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 focusgroup. + * Only the active ''::scroll-marker'' is a tab stop; arrow keys are used to switch between markers. They behave as an element with a tabindex 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 guaranteed tab stop. + * [=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.

Selecting Scroll Markers: '':target-current'', '':target-before'' and '':target-after'' pseudo-classes

@@ -520,14 +543,20 @@ Calculating the Active Scroll Marker 1. Scroll the |element| into view with block, inline, and container. 1. : If the activation was triggered by invocation :: - 1. Follow the hyperlink 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. Follow the hyperlink 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 sequential focus navigation starting point 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.

Next tab-index-ordered focus

- 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.