From 6b64e025b8665b9887738940c9107f19626b4d3c Mon Sep 17 00:00:00 2001
From: Robert Flack <flackr@google.com>
Date: Tue, 28 Jan 2025 20:55:02 -0500
Subject: [PATCH] [css-overflow-5] Define activeElement and matching
 focus-related pseudo-classes for focused navigation pseudos. (#11590)

* Define the expected activeElement and matching focus-related pseudoclasses.

This defines the focus related properties and pseudo-class matching
as resolved in #11361.

* Update css-overflow-5/Overview.bs

---------

Co-authored-by: Tab Atkins Jr. <jackalmage@gmail.com>
---
 css-overflow-5/Overview.bs | 30 +++++++++++++++++++++++++++---
 1 file changed, 27 insertions(+), 3 deletions(-)

diff --git a/css-overflow-5/Overview.bs b/css-overflow-5/Overview.bs
index e03c7b34a8e..f508c79720e 100644
--- a/css-overflow-5/Overview.bs
+++ b/css-overflow-5/Overview.bs
@@ -406,7 +406,7 @@ Selecting The Active Scroll Marker: the '':target-current'' pseudo-class</h4>
 				Note: If the user tabs away the focus behavior will ensure they tab into the relevant content.
 	</div>
 
-<h4 id="scroll-target-focus">Focus behavior</h4>
+<h4 id="scroll-marker-next-focus">Next tab-index-ordered focus</h4>
 
 	When a [=scroll marker=] is activated,
 	the next tabindex-ordered focus navigation will focus the [=scroll target=] if it is focusable,
@@ -517,10 +517,34 @@ Or the non-native rendering, aka ''appearance:none''?
 If the former, we'll obviously need to define the interaction with 'appearance'.
 
 
-<h3 id=focus-order>
-Focus Navigation Order</h3>
+<h3 id=overflow-pseudo-focus-behavior>
+Focus behavior</h3>
 
 The above features generate several focusable pseudo-elements.
+This section defines some of the focus related behaviors.
+
+<h4 id=active-element>
+The active element</h4>
+
+When a ''::scroll-button()'' or ''::scroll-marker'' is focused,
+the {{DocumentOrShadowRoot/activeElement}}
+is the [=scroll container=] the control is associated with.
+
+<h4 id=focus-pseudoclasses>
+Focus related pseudo-classes</h4>
+
+When a ''::scroll-button()'' or ''::scroll-marker'' is focused,
+none of the focus related pseudo-classes '':focus'', '':focus-visible'' and '':active'' match on the [=scrolling container=].
+Instead, '':focus'' and, when relevant '':focus-visible'', match on the focused pseudo-element.
+'':active'' matches on the pseudo-element while it is being activated.
+'':focus-within'' matches on the [=scroll container=] and all of its ancestors in the [=flat tree=].
+
+When a ''::scroll-marker'' is focused,
+'':focus-within'' additionally matches on the ''::scroll-marker-group'' it belongs to.
+
+<h4 id=focus-order>
+Focus navigation order</h4>
+
 While these pseudo-elements have a defined position in the element tree,
 this isn't an optimal position for focus navigation
 (aka "tab order")