Skip to content

Commit 6444341

Browse files
committed
Define the expected activeElement and matching focus-related pseudoclasses.
This defines the focus related properties and pseudo-class matching as resolved in w3c#11361.
1 parent e104c6f commit 6444341

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,
@@ -515,10 +515,34 @@ Or the non-native rendering, aka ''appearance:none''?
515515
If the former, we'll obviously need to define the interaction with 'appearance'.
516516

517517

518-
<h3 id=focus-order>
519-
Focus Navigation Order</h3>
518+
<h3 id=overflow-pseudo-focus-behavior>
519+
Focus behavior</h3>
520520

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

0 commit comments

Comments
 (0)