@@ -406,7 +406,7 @@ Selecting The Active Scroll Marker: the '':target-current'' pseudo-class</h4>
406
406
Note: If the user tabs away the focus behavior will ensure they tab into the relevant content.
407
407
</div>
408
408
409
- <h4 id="scroll-target- focus">Focus behavior </h4>
409
+ <h4 id="scroll-marker-next- focus">Next tab-index-ordered focus </h4>
410
410
411
411
When a [=scroll marker=] is activated,
412
412
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''?
515
515
If the former, we'll obviously need to define the interaction with 'appearance' .
516
516
517
517
518
- <h3 id=focus-order >
519
- Focus Navigation Order </h3>
518
+ <h3 id=overflow-pseudo- focus-behavior >
519
+ Focus behavior </h3>
520
520
521
521
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
+
522
546
While these pseudo-elements have a defined position in the element tree,
523
547
this isn't an optimal position for focus navigation
524
548
(aka "tab order")
0 commit comments