Skip to content

Commit

Permalink
[css-overflow-5] Define activeElement and matching focus-related pseu…
Browse files Browse the repository at this point in the history
…do-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>
  • Loading branch information
flackr and tabatkins authored Jan 29, 2025
1 parent af27ebd commit 6b64e02
Showing 1 changed file with 27 additions and 3 deletions.
30 changes: 27 additions & 3 deletions css-overflow-5/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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")
Expand Down

0 comments on commit 6b64e02

Please sign in to comment.