@@ -263,16 +263,17 @@ The 'scroll-marker-group' property</h4>
263263 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,
264264 ensuring the group has a <a href="https://open-ui.org/components/focusgroup.explainer/#guaranteed-tab-stop">guaranteed tab stop</a> .
265265
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>
267268
268269 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.
270271
271272 <div class='example'>
272273 The following snippet shows how the link to the currently scrolled section can be highlighted:
273274
274275 <pre highlight=css>
275- a:checked {
276+ a:target-current {
276277 font-weight: bold;
277278 }
278279 </pre>
@@ -339,8 +340,8 @@ The 'scroll-marker-group' property</h4>
339340 the next tabindex-ordered focus navigation will focus the [=scroll target=] if it is focusable,
340341 otherwise, it will find the next focusable element from this <var> element</var> as though it were focused.
341342
342- <h2 id="scroll-buttons">
343- Scroll Buttons</h2 >
343+ <h3 id="scroll-buttons">
344+ Scroll Buttons</h3 >
344345
345346The <dfn>::scroll-button( <<scroll-button-direction>> )</dfn> pseudo-elements
346347are generated on [=scroll containers=]
@@ -432,6 +433,39 @@ Issue: The UA stylesheet needs to specify that ''::scroll-button()''s
432433are styled identically to the <{button}> element.
433434
434435
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+
435469<h2 id="fragmentation" class=no-num>
436470Appendix A: Redirection of Overflow</h2>
437471
0 commit comments