Skip to content

Commit

Permalink
Merge branch 'w3c:main' into edit
Browse files Browse the repository at this point in the history
  • Loading branch information
gitspeaks authored Nov 20, 2024
2 parents 6a82cbf + f61cec5 commit 29649b3
Show file tree
Hide file tree
Showing 2 changed files with 40 additions and 6 deletions.
44 changes: 39 additions & 5 deletions css-overflow-5/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -263,16 +263,17 @@ The 'scroll-marker-group' property</h4>
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,
ensuring the group has a <a href="https://open-ui.org/components/focusgroup.explainer/#guaranteed-tab-stop">guaranteed tab stop</a>.

<h4 id="active-scroll-marker">The active scroll marker</h4>
<h4 id="active-scroll-marker">
Selecting The Active Scroll Marker: the '':target-current'' pseudo-class</h4>

Exactly one [=scroll marker=] within each [=scroll marker group=] is determined to be active at a time.
An active [=scroll marker=] can be styled by the '':checked'' pseudo-class.
Such "active" [=scroll markers=] match the <dfn selector>:target-current</dfn> pseudo-class.

<div class='example'>
The following snippet shows how the link to the currently scrolled section can be highlighted:

<pre highlight=css>
a:checked {
a:target-current {
font-weight: bold;
}
</pre>
Expand Down Expand Up @@ -339,8 +340,8 @@ The 'scroll-marker-group' property</h4>
the next tabindex-ordered focus navigation will focus the [=scroll target=] if it is focusable,
otherwise, it will find the next focusable element from this <var>element</var> as though it were focused.

<h2 id="scroll-buttons">
Scroll Buttons</h2>
<h3 id="scroll-buttons">
Scroll Buttons</h3>

The <dfn>::scroll-button( <<scroll-button-direction>> )</dfn> pseudo-elements
are generated on [=scroll containers=]
Expand Down Expand Up @@ -432,6 +433,39 @@ Issue: The UA stylesheet needs to specify that ''::scroll-button()''s
are styled identically to the <{button}> element.
<h3 id=focus-order>
Focus Navigation Order</h3>
The above features generate several focusable pseudo-elements.
While these pseudo-elements have a defined position in the element tree,
this isn't an optimal position for focus navigation
(aka "tab order")
for these controls.
Instead,
focus navigation between a [=scroll container=]
and the various pseudo-elements defined in this section
goes in the following order:
1. The ''::scroll-marker-group'' pseudo-elements of the [=scroll container=],
if it is set to ''scroll-marker-group: before''.
Note: The individual ''::scroll-marker'' pseudo-elements
generated by the [=scroll containers=] descendants
are reparented underneath this ''::scroll-marker-group'',
and navigated together as a "focus group".
2. The ''::scroll-button()'' pseudo-elements,
in the order they're defined as existing in.
3. The [=scroll container=] itself,
and its contents,
in the normal focus order they would be in.
4. The ''::scroll-marker-group'' pseudo-elements of the [=scroll container=],
if it is set to ''scroll-marker-group: after''.
<h2 id="fragmentation" class=no-num>
Appendix A: Redirection of Overflow</h2>
Expand Down
2 changes: 1 addition & 1 deletion css-position-4/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -622,7 +622,7 @@ Top Layer Manipulation {#top-manip}
[=set/remove=] |el| from |doc|'s [=Document/top layer=]
and [=pending top layer removals=].

Note: This is intended to be called during the "Update Rendering" step
Note: This is intended to be called during the "Update the Rendering" step
of HTML's rendering algorithm.
It is not intended to be called by other algorithms.

Expand Down

0 comments on commit 29649b3

Please sign in to comment.