Date: Wed, 11 Mar 2026 11:15:45 +0100
Subject: [PATCH 1/2] [css-overflow-5] Update scroll-marker-group to include
modes #12122
---
css-overflow-5/Overview.bs | 57 +++++++++++++++++++++++++++++---------
1 file changed, 44 insertions(+), 13 deletions(-)
diff --git a/css-overflow-5/Overview.bs b/css-overflow-5/Overview.bs
index 82827c5ebd20..efa4a3ce17ed 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.
+
@@ -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.
-
Similar to ''::before'' and ''::after'', all elements can have a ''::scroll-marker'' pseudo-element,
@@ -370,10 +378,27 @@ 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.
+
+
+
+ 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.
+
+ 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.
+ * Activating a ''::scroll-marker'' pseudo-element scrolls its originating element into view and sets the sequential focus navigation starting point to the [=originating element=], losing focus from the ''::scroll-marker''.
+ * 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.
+ * Activating a ''::scroll-marker'' pseudo-element scrolls its originating element into view, retaining focus on the ''::scroll-marker''.
+ * [=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.
@@ -520,14 +545,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.
- 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.
From ea857652616ab072350f55502cb52e78df26a510 Mon Sep 17 00:00:00 2001
From: Daniil Sakhapov
Date: Wed, 11 Mar 2026 16:22:28 +0100
Subject: [PATCH 2/2] Remove redundant activation text
---
css-overflow-5/Overview.bs | 4 +---
1 file changed, 1 insertion(+), 3 deletions(-)
diff --git a/css-overflow-5/Overview.bs b/css-overflow-5/Overview.bs
index efa4a3ce17ed..780388ad74d7 100644
--- a/css-overflow-5/Overview.bs
+++ b/css-overflow-5/Overview.bs
@@ -381,13 +381,12 @@ The 'scroll-marker-group' property
- 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.
+ 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.
- * Activating a ''::scroll-marker'' pseudo-element scrolls its originating element into view and sets the sequential focus navigation starting point to the [=originating element=], losing focus from the ''::scroll-marker''.
* The roles of the [=originating elements=] are unaffected.
If the mode is [=tabs=]:
@@ -395,7 +394,6 @@ The 'scroll-marker-group' property
* 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.
- * Activating a ''::scroll-marker'' pseudo-element scrolls its originating element into view, retaining focus on the ''::scroll-marker''.
* [=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.