Skip to content

Commit b924e45

Browse files
flackrflackr
authored
[css-overflow-5] Editorial improvements to css-overflow-5 scroll markers (#11048)
Editorial improvements to css-overflow-5 scroll markers: - Combines pseudo-element and general scroll marker text into single shared section. - Defines common terms at the start of the section used throughout. - Provides clear example of highlighting the active marker. - Organized headings to provide natural section for subsequent controls (i.e. scroll-button).
1 parent 5b29ce2 commit b924e45

File tree

1 file changed

+131
-111
lines changed

1 file changed

+131
-111
lines changed

‎css-overflow-5/Overview.bs‎

Lines changed: 131 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -135,20 +135,17 @@ Introduction</h2>
135135

136136
This specification extends [[!CSS-OVERFLOW-4]].
137137

138-
: [[#scroll-marker-group|Scroll marker groups]]
138+
: [[#scroll-navigation|Scroll navigation controls]]
139139
::
140-
This section defines pseudo-elements for automatically constructed [[#scroll-navigation|scroll navigation controls]].
140+
This section defines stylable scroll navigation controls
141+
with defined user interactions and accessible labels,
142+
and pseudo-classes which automatically construct them.
141143

142144
: [[#fragmentation|Redirection of Overflow]]
143145
::
144146
This section defines a highly experimental, exploratory new model
145147
for handling overflow by redirecting it into newly-generated [=fragmentation containers=].
146148

147-
: [[#scroll-navigation|Scroll navigation controls]]
148-
::
149-
This section defines stylable scroll navigation controls
150-
with defined user interactions and accessible labels.
151-
152149

153150
Note: At the time of writing, [[CSS-OVERFLOW-4]] is not completely finalized yet.
154151
To avoid accidental divergences and maintenance overhead,
@@ -158,8 +155,45 @@ its content will be integrated into this specification,
158155
which will then replace it.
159156
Until then, this specification only contains additions and extensions to level 4.
160157

161-
<h2 id="scroll-marker-group">
162-
Overflow Controls: the 'scroll-marker-group' property and pseudo-elements</h2>
158+
<h2 id="scroll-navigation">
159+
Scroll navigation controls</h2>
160+
161+
<h3 id="scroll-markers">
162+
Scroll markers</h3>
163+
164+
A <dfn>scroll marker</dfn> is any element or pseudo-element with a [=scroll target=].
165+
An element or pseudo-element's <dfn>scroll target</dfn> is the {{Element}} indicated by the [=scroll marker=].
166+
Which elements are [=scroll markers=], and what their [=scroll targets=] are, is host-language defined.
167+
The [[html#the-a-element|HTML &lt;a> element]] and [[svg2#Links|SVG &lt;a> element]]
168+
are [=scroll markers=],
169+
whose [=scroll target=] is the <l spec=html>[=indicated part=]</l>.
170+
While these navigational links can be created today,
171+
there is little feedback to the user regarding the current content being viewed, and
172+
the interaction model does not match the expectations of many modern accessible UI components.
173+
174+
This specification adds a mechanism for creating groups of [=scroll marker=]s,
175+
and for automatically creating '::scroll-marker'' pseudo-elements.
176+
Within each group, the active marker reflects the current scroll position,
177+
and can be styled to give the user an indication of which section they are in.
178+
179+
Use cases include a table of contents with links to relevant contents,
180+
markers for scrolling carousel pages,
181+
and scrollable tab panels.
182+
183+
Issue: Add images representing these examples.
184+
185+
<h4 id="scroll-marker-grouping">
186+
Scroll marker grouping</h4>
187+
188+
An element with a <a href="https://open-ui.org/components/focusgroup.explainer/">focusgroup</a> attribute defines a <dfn>scroll marker group container</dfn>
189+
having a <dfn>scroll marker group</dfn> containing all of the [=scroll marker=] elements for which this is the nearest ancestor [=scroll marker group container=].
190+
191+
Issue: The grouping of markers for scroll progress tracking should be separated from opting into focusgroup focus behavior.
192+
193+
A ''::scroll-marker-group'' pseudo-element is the [=scroll marker group container=] for its contained ''::scroll-marker'' pseudo-elements, which form a [=scroll marker group=] together.
194+
195+
<h4 id="scroll-marker-group">
196+
The 'scroll-marker-group' property</h4>
163197

164198
<pre class=propdef>
165199
Name: scroll-marker-group
@@ -192,38 +226,119 @@ Overflow Controls: the 'scroll-marker-group' property and pseudo-elements</h2>
192226

193227
</dl>
194228

195-
<h3 id="scroll-marker-group-pseudo">The ''::scroll-marker-group'' pseudo-element</h3>
229+
<h4 id="scroll-marker-group-pseudo">The ''::scroll-marker-group'' pseudo-element</h4>
196230

197-
The <dfn selector>::scroll-marker-group</dfn> pseudo-element box
231+
The <dfn selector>::scroll-marker-group</dfn> [=fully stylable pseudo-element=]
198232
is generated by a [=scroll container=] element
199233
having a computed 'scroll-marker-group' property that is not 'none',
200-
representing a stylable sibling pseudo-element immediately adjacent to the [=scroll container=].
234+
adjacent to the [=scroll container=].
201235

202236
The following additions are recommended for the default UA stylesheet
203237
to ensure that the generation of scroll marker pseudo-elements does not invalidate the layout of the site:
204238

205239
<pre class="lang-css">
206-
/* The generation of ::scroll-marker pseudo-elements cannot invalidate layout outside of this pseudo-element. */
240+
/* The generation of ::scroll-marker pseudo-elements shouldn't
241+
* invalidate layout outside of this pseudo-element. */
207242
::scroll-marker-group { contain: size !important; }
208243
</pre>
209244

210245
The 'scroll-marker-group' implicitly behaves as a single focusable component,
211246
establishing a <a href="https://open-ui.org/components/focusgroup.explainer/">focusgroup</a>.
212247

213-
<h3 id="scroll-marker-pseudo">The ''::scroll-marker'' pseudo-element</h3>
248+
<h4 id="scroll-marker-pseudo">The ''::scroll-marker'' pseudo-element</h4>
249+
250+
Similar to ''::before'' and ''::after'', all elements can have a ''::scroll-marker'' pseudo-element,
251+
which is collected into the ''::scroll-marker-group'' of the nearest [=scroll container=] ancestor,
252+
and scrolls to the element when activated.
214253

215254
When the computed 'content' value of a <dfn selector>::scroll-marker</dfn> pseudo-element is not 'none'
216255
and its nearest ancestor [=scroll container=] [=scroll container=] has a computed 'scroll-marker-group' property that is not 'none',
217256
the pseudo-element generates a box attached as a child of the ''::scroll-marker-group'' pseudo-element's generated box
218257
on its nearest ancestor [=scroll container=].
219258
These boxes are added in the [=tree order=] of their <a>originating element</a>.
220259

221-
These pseudo-elements have their {{HTMLLinkElement/scrollTargetElement}} set to their <a>originating element</a>.
222-
They have a <a href="https://html.spec.whatwg.org/multipage/interaction.html#attr-tabindex"><code>tabindex</code></a> of '-1',
260+
These pseudo-elements have an indicated [=scroll target=] of their <a>originating element</a>.
261+
They behave as an element with a <a href="https://html.spec.whatwg.org/multipage/interaction.html#attr-tabindex"><code>tabindex</code></a> of '-1',
223262
making them focusable within their '::scroll-marker-group' either by arrow key navigation within the group,
224263
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,
225264
ensuring the group has a <a href="https://open-ui.org/components/focusgroup.explainer/#guaranteed-tab-stop">guaranteed tab stop</a>.
226265

266+
<h4 id="active-scroll-marker">The active scroll marker</h4>
267+
268+
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+
271+
<div class='example'>
272+
The following snippet shows how the link to the currently scrolled section can be highlighted:
273+
274+
<pre highlight=css>
275+
a:checked {
276+
font-weight: bold;
277+
}
278+
</pre>
279+
</div>
280+
281+
A scrolling operation might animate towards a particular position
282+
(e.g. scrollbar arrow clicks, arrow key presses, "behavior: smooth" programmatic scrolls)
283+
or might directly track a user’s input
284+
(e.g. touch scrolling, scrollbar dragging).
285+
In either case, the user agent chooses an 'eventual scroll position' to which the scroller
286+
will reach. This ensures that the relevant marker is activated immediately.
287+
288+
This 'eventual scroll position' is used to determine the active marker within each [=scroll marker group=].
289+
Since markers themselves may represent just the start of the content (e.g. headers), we consider the active marker to be the first one which we are at or beyond the scroll position of.
290+
291+
<div algorithm="scroll tracking">
292+
Whenever a [=scroll container=] is scrolled, or layout changes the scroll position, the user agent must run these steps to determine the active marker:
293+
294+
1. Let <var>position</var> be the 'eventual scroll position' for the scrolling operation.
295+
1. For each focusgroup <var>group</var> containing one or more [=scroll marker control=] elements whose [=scroll target=] is a descendant of [=scroll container=]:
296+
297+
1. Let <var>markers</var> be all of the [=scroll marker control=] elements which are a part of the [=scroll marker group=] for the [=scroll container=].
298+
1. Let <var>targets</var> be the [=scroll target=]s of |markers|, associated with the item of |markers| they came from, and sorted in [=tree order=].
299+
1. For each |target| in |targets|, <a>determine the scroll-into-view position</a> of |target|, storing this as the associated |target position| of |target|.
300+
1. Let |selected target| be the largest-indexed item of |targets|
301+
whose associated |target position| is equal to or before |position| in both the block and inline axises in the current writing mode direction of the [=scroll container=].
302+
303+
Issue: When the next marker is closer to being aligned than the previous we should use the next marker, in a manner similar to mandatory snap point selection.
304+
305+
1. : If there is no such item,
306+
::
307+
Set the active state of all |markers| in the |group| to false and return.
308+
309+
1. Let |selected marker| be the marker associated with |selected target|.
310+
If multiple items of |markers| are associated with |selected target|,
311+
set |selected marker| to be the marker that is earliest in tree order.
312+
1. Set the active state of |selected marker| to true.
313+
1. : If the active element was the <a href="https://open-ui.org/components/focusgroup.explainer/#last-focused-memory">last-focused element</a> of the |group|,
314+
::
315+
Focus |selected marker|
316+
1. Set the <a href="https://open-ui.org/components/focusgroup.explainer/#last-focused-memory">last-focused element</a> of the |group| to |selected marker|.
317+
1. Set the active state of all other |markers| in the |group| to false.
318+
</div>
319+
320+
<h4 id="scroll-marker-activation">Activation behavior</h4>
321+
322+
<div algorithm="scrollTargetElement activation">
323+
When a [=scroll marker=] with a non-null [=scroll target=] is activated by explicit invocation or arrow key focus:
324+
325+
1. Let <var>element</var> be the [=scroll target=] of the control.
326+
1. Let <var>block</var> be "<code>start</code>".
327+
1. Let <var>inline</var> be "<code>start</code>".
328+
1. <a lt='scroll a target into view'>Scroll the element into view</a> with <var>behavior</var>, <var>block</var>, and <var>inline</var>.
329+
1. : If the activation was triggered by invocation
330+
::
331+
1. <a spec=html>Follow the hyperlink</a> updating the URL, however retain focus on the marker element.
332+
333+
Note: If the user tabs away the focus behavior will ensure they tab into the relevant content.
334+
</div>
335+
336+
<h4 id="scroll-target-focus">Focus behavior</h4>
337+
338+
When a [=scroll marker control=] is activated,
339+
the next tabindex-ordered focus navigation will focus the [=scroll target=] if it is focusable,
340+
otherwise, it will find the next focusable element from this <var>element</var> as though it were focused.
341+
227342
<h2 id="fragmentation" class=no-num>
228343
Appendix A: Redirection of Overflow</h2>
229344

@@ -883,101 +998,6 @@ the ''continue/fragments'' value of the 'continue' property.
883998
</td></tr></table>
884999
</div>
8851000

886-
<h2 id="scroll-navigation">
887-
Appendix B: Scroll navigation controls</h2>
888-
889-
[[html#the-a-element]] allows creating navigational links to a particular scroll position within the same page.
890-
However, there is little feedback to the user regarding the current content being viewed, and
891-
the interaction model does not match the expectations of modern accessible UI components.
892-
893-
This specification adds a mechanism for creating scroll navigation controls within groups of <{a}> elements.
894-
A group is created through the <a href="https://open-ui.org/components/focusgroup.explainer/">focusgroup</a> attribute
895-
on an ancestor containing one or more <{a}> elements whose <a spec=html>indicated part</a> is on the current page.
896-
Within each group, the active marker reflects the current scroll position, and can be styled to give the user an indication of which section they are in.
897-
898-
Use cases include a table of contents with links to relevant contents,
899-
markers for scrolling carousel pages,
900-
and scrollable tab panels.
901-
902-
Issue: Add images representing these examples.
903-
904-
<h3 id="scroll-target">{{HTMLLinkElement/scrollTargetElement}} attribute</h3>
905-
906-
An <{a}> element has its {{HTMLLinkElement/scrollTargetElement}}
907-
initialized to the result of running the <a spec=html>select the indicated part</a> given the current {{Document}} and the <dfn element-attr for=a>href</dfn> attribute value as the |URL|,
908-
turning it into a [=scroll marker control=] if the resulting <a spec=html>indicated part</a> is non-null.
909-
910-
The <dfn attribute for=HTMLLinkElement lt=scrollTargetElement>HTMLLinkElement.scrollTargetElement</dfn> instance property
911-
gets and sets the element being interacted with by the anchor link and can be used to override the initial value established by the |href| property.
912-
913-
An <{a}> element or ''::scroll-marker'' pseudo-element with a non-null {{HTMLLinkElement/scrollTargetElement}}
914-
represents a <dfn export>scroll marker control</dfn> which participates in a <dfn>scroll marker group</dfn>
915-
defined by the containing ''::scroll-marker-group'' psuedo-element (for ''::scroll-marker'' pseudo-elements)
916-
or nearest ancestor element establishing a <a href="https://open-ui.org/components/focusgroup.explainer/">focusgroup</a>.
917-
Exactly one control in a group will have its "checked" state set to true.
918-
A [=scroll marker control=] with a true "checked" state can be styled by the '':checked'' pseudo-class.
919-
920-
<div algorithm="scrollTargetElement activation">
921-
When a [=scroll marker control=] is activated by explicit invocation or arrow key focus:
922-
923-
1. Let <var>element</var> be the {{HTMLLinkElement/scrollTargetElement}} of the control.
924-
1. Let <var>block</var> be "<code>start</code>".
925-
1. Let <var>inline</var> be "<code>start</code>".
926-
1. <a lt='scroll a target into view'>Scroll the element into view</a> with <var>behavior</var>, <var>block</var>, and <var>inline</var>.
927-
1. : If the activation was triggered by invocation
928-
::
929-
1. <a spec=html>Follow the hyperlink</a> updating the URL, however retain focus on the marker element.
930-
931-
Note: If the user tabs away the focus behavior will ensure they tab into the relevant content.
932-
</div>
933-
934-
<h4 id="scroll-container-scroll">Scroll tracking</h4>
935-
936-
A scrolling operation might animate towards a particular position
937-
(e.g. scrollbar arrow clicks, arrow key presses, "behavior: smooth" programmatic scrolls)
938-
or might directly track a user’s input
939-
(e.g. touch scrolling, scrollbar dragging).
940-
In either case, the user agent chooses an 'eventual scroll position' to which the scroller
941-
will reach. This ensures that the relevant marker is activated immediately.
942-
943-
This 'eventual scroll position' is used to determine the active marker within each [=scroll marker group=].
944-
Since markers themselves may represent just the start of the content (e.g. headers), we consider the active marker to be the first one which we are at or beyond the scroll position of.
945-
946-
<div algorithm="scroll tracking">
947-
Whenever a [=scroll container=] is scrolled, or layout changes the scroll position, the user agent must run these steps to determine the active marker:
948-
949-
1. Let <var>position</var> be the 'eventual scroll position' for the scrolling operation.
950-
1. For each focusgroup <var>group</var> containing one or more [=scroll marker control=] elements whose {{HTMLLinkElement/scrollTargetElement}} is a descendant of [=scroll container=]:
951-
952-
1. Let <var>markers</var> be all of the [=scroll marker control=] elements which are a part of the [=scroll marker group=] for the [=scroll container=].
953-
1. Let <var>targets</var> be the {{HTMLLinkElement/scrollTargetElement}}s of |markers|, associated with the item of |markers| they came from, and sorted in [=tree order=].
954-
1. For each |target| in |targets|, <a>determine the scroll-into-view position</a> of |target|, storing this as the associated |target position| of |target|.
955-
1. Let |selected target| be the largest-indexed item of |targets|
956-
whose associated |target position| is equal to or before |position| in both the block and inline axises in the current writing mode direction of the [=scroll container=].
957-
958-
Issue: When the next marker is closer to being aligned than the previous we should use the next marker, in a manner similar to mandatory snap point selection.
959-
960-
1. : If there is no such item,
961-
::
962-
Set the "checked" state of all |markers| in the |group| to false and return.
963-
964-
1. Let |selected marker| be the marker associated with |selected target|.
965-
If multiple items of |markers| are associated with |selected target|,
966-
set |selected marker| to be the marker that is earliest in tree order.
967-
1. Set the "checked" state of |selected marker| to true.
968-
1. : If the active element was the <a href="https://open-ui.org/components/focusgroup.explainer/#last-focused-memory">last-focused element</a> of the |group|,
969-
::
970-
Focus |selected marker|
971-
1. Set the <a href="https://open-ui.org/components/focusgroup.explainer/#last-focused-memory">last-focused element</a> of the |group| to |selected marker|.
972-
1. Set the "checked" state of all other |markers| in the |group| to false.
973-
</div>
974-
975-
<h4 id="scroll-target-focus">Focus behavior</h4>
976-
977-
When a [=scroll marker control=] is activated,
978-
the next tabindex-ordered focus navigation will focus the {{HTMLLinkElement/scrollTargetElement}} if it is focusable,
979-
otherwise, it will find the next focusable element from this <var>element</var> as though it were focused.
980-
9811001
<h2 id=privclass=nonum>
9821002
Appendix C: Privacy Considerations</h2>
9831003

0 commit comments

Comments
 (0)