@@ -263,16 +263,17 @@ The 'scroll-marker-group' property</h4>
263
263
or via the tab key when currently active or when no other ''::scroll-marker'' is active and this is the first marker in the group,
264
264
ensuring the group has a <a href="https://open-ui.org/components/focusgroup.explainer/#guaranteed-tab-stop">guaranteed tab stop</a> .
265
265
266
- <h4 id="active-scroll-marker">The active scroll marker</h4>
266
+ <h4 id="active-scroll-marker">
267
+ Selecting The Active Scroll Marker: the '':target-current'' pseudo-class</h4>
267
268
268
269
Exactly one [=scroll marker=] within each [=scroll marker group=] is determined to be active at a time.
269
- An active [=scroll marker =] can be styled by the '':checked'' pseudo-class.
270
+ Such " active" [=scroll markers =] match the <dfn selector>:target-current</dfn> pseudo-class.
270
271
271
272
<div class='example'>
272
273
The following snippet shows how the link to the currently scrolled section can be highlighted:
273
274
274
275
<pre highlight=css>
275
- a:checked {
276
+ a:target-current {
276
277
font-weight: bold;
277
278
}
278
279
</pre>
@@ -339,8 +340,8 @@ The 'scroll-marker-group' property</h4>
339
340
the next tabindex-ordered focus navigation will focus the [=scroll target=] if it is focusable,
340
341
otherwise, it will find the next focusable element from this <var> element</var> as though it were focused.
341
342
342
- <h2 id="scroll-buttons">
343
- Scroll Buttons</h2 >
343
+ <h3 id="scroll-buttons">
344
+ Scroll Buttons</h3 >
344
345
345
346
The <dfn>::scroll-button( <<scroll-button-direction>> )</dfn> pseudo-elements
346
347
are generated on [=scroll containers=]
@@ -432,6 +433,39 @@ Issue: The UA stylesheet needs to specify that ''::scroll-button()''s
432
433
are styled identically to the <{button}> element.
433
434
434
435
436
+ <h3 id=focus-order>
437
+ Focus Navigation Order</h3>
438
+
439
+ The above features generate several focusable pseudo-elements.
440
+ While these pseudo-elements have a defined position in the element tree,
441
+ this isn't an optimal position for focus navigation
442
+ (aka "tab order")
443
+ for these controls.
444
+
445
+ Instead,
446
+ focus navigation between a [=scroll container=]
447
+ and the various pseudo-elements defined in this section
448
+ goes in the following order:
449
+
450
+ 1. The '' ::scroll-marker-group'' pseudo-elements of the [=scroll container=],
451
+ if it is set to '' scroll-marker-group: before''.
452
+
453
+ Note: The individual '' ::scroll-marker'' pseudo-elements
454
+ generated by the [=scroll containers=] descendants
455
+ are reparented underneath this '' ::scroll-marker-group'',
456
+ and navigated together as a "focus group".
457
+
458
+ 2. The '' ::scroll-button()'' pseudo-elements,
459
+ in the order they're defined as existing in.
460
+
461
+ 3. The [=scroll container=] itself,
462
+ and its contents,
463
+ in the normal focus order they would be in.
464
+
465
+ 4. The '' ::scroll-marker-group'' pseudo-elements of the [=scroll container=],
466
+ if it is set to '' scroll-marker-group: after''.
467
+
468
+
435
469
<h2 id="fragmentation" class=no-num>
436
470
Appendix A: Redirection of Overflow</h2>
437
471
0 commit comments