Skip to content

Commit 6b64e02

Browse files
flackrtabatkins
andauthored
[css-overflow-5] Define activeElement and matching focus-related pseudo-classes for focused navigation pseudos. (w3c#11590)
* Define the expected activeElement and matching focus-related pseudoclasses. This defines the focus related properties and pseudo-class matching as resolved in w3c#11361. * Update css-overflow-5/Overview.bs --------- Co-authored-by: Tab Atkins Jr. <jackalmage@gmail.com>
1 parent af27ebd commit 6b64e02

File tree

1 file changed

+27
-3
lines changed

1 file changed

+27
-3
lines changed

css-overflow-5/Overview.bs

+27-3
Original file line numberDiff line numberDiff line change
@@ -406,7 +406,7 @@ Selecting The Active Scroll Marker: the '':target-current'' pseudo-class</h4>
406406
Note: If the user tabs away the focus behavior will ensure they tab into the relevant content.
407407
</div>
408408

409-
<h4 id="scroll-target-focus">Focus behavior</h4>
409+
<h4 id="scroll-marker-next-focus">Next tab-index-ordered focus</h4>
410410

411411
When a [=scroll marker=] is activated,
412412
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''?
517517
If the former, we'll obviously need to define the interaction with 'appearance'.
518518

519519

520-
<h3 id=focus-order>
521-
Focus Navigation Order</h3>
520+
<h3 id=overflow-pseudo-focus-behavior>
521+
Focus behavior</h3>
522522

523523
The above features generate several focusable pseudo-elements.
524+
This section defines some of the focus related behaviors.
525+
526+
<h4 id=active-element>
527+
The active element</h4>
528+
529+
When a ''::scroll-button()'' or ''::scroll-marker'' is focused,
530+
the {{DocumentOrShadowRoot/activeElement}}
531+
is the [=scroll container=] the control is associated with.
532+
533+
<h4 id=focus-pseudoclasses>
534+
Focus related pseudo-classes</h4>
535+
536+
When a ''::scroll-button()'' or ''::scroll-marker'' is focused,
537+
none of the focus related pseudo-classes '':focus'', '':focus-visible'' and '':active'' match on the [=scrolling container=].
538+
Instead, '':focus'' and, when relevant '':focus-visible'', match on the focused pseudo-element.
539+
'':active'' matches on the pseudo-element while it is being activated.
540+
'':focus-within'' matches on the [=scroll container=] and all of its ancestors in the [=flat tree=].
541+
542+
When a ''::scroll-marker'' is focused,
543+
'':focus-within'' additionally matches on the ''::scroll-marker-group'' it belongs to.
544+
545+
<h4 id=focus-order>
546+
Focus navigation order</h4>
547+
524548
While these pseudo-elements have a defined position in the element tree,
525549
this isn't an optimal position for focus navigation
526550
(aka "tab order")

0 commit comments

Comments
 (0)