From 2f0f274dcae3ad6b8e0f6cd09edf4049bc7a0110 Mon Sep 17 00:00:00 2001 From: Robert Flack Date: Mon, 22 Apr 2024 18:52:28 -0400 Subject: [PATCH 01/11] [css-overflow-4] Define scroll-markers pseudo-elements, scrolltarget attribute and associated behaviors. --- css-overflow-4/Overview.bs | 126 ++++++++++++++++++++++++++++++++++++- 1 file changed, 124 insertions(+), 2 deletions(-) diff --git a/css-overflow-4/Overview.bs b/css-overflow-4/Overview.bs index df21a24ffe7..5aa21ca2e64 100644 --- a/css-overflow-4/Overview.bs +++ b/css-overflow-4/Overview.bs @@ -10,6 +10,7 @@ TR: https://www.w3.org/TR/css-overflow-4/ Editor: L. David Baron, Mozilla https://www.mozilla.org/, https://dbaron.org/, w3cid 15393 Editor: Florian Rivoal, On behalf of Bloomberg, http://florian.rivoal.net/, w3cid 43241 Editor: Elika J. Etemad / fantasai, Apple, http://fantasai.inkedblade.net/contact, w3cid 35400 +Editor: Robert Flack, Google, w3cid 98451 Abstract: This module contains the features of CSS relating to scrollable overflow handling in visual media. It builds on the CSS Overflow Module Level 3, defining @@ -285,6 +286,65 @@ Expanding Clipping Bounds: the 'overflow-clip-margin-*' properties with ''overflow: hidden'' or ''overflow: scroll'', which are not defined to use the [=overflow clip edge=]. +

+Overflow Controls: the 'scroll-markers' property and pseudo-elements

+ + 
+	Name: scroll-markers
+	Value: none | before | after
+	Initial: none
+	Applies to: [=scroll containers=]
+	Inherited: no
+	Computed value: specified value
+	Animation Type: discrete
+	Canonical Order: per grammar
+
+ + The 'scroll-markers' property specifies whether the [=scroll container=] should have a '::scroll-markers' pseudo-element created, + and its position relative to the scroll container. + +
+
none +
+ The [=scroll container=] does not create a '::scroll-markers' pseudo-element. + +
before +
+ The [=scroll container=] generates a ''::scroll-markers'' pseudo-element + whose box is an immediate preceding sibling to its [=originating element=]. + +
after +
+ The [=scroll container=] generates a ''::scroll-markers'' pseudo-element + whose box is an immediate following sibling to its [=originating element=]. + +
+ +

The ''::scroll-markers'' pseudo-element

+ + The ::scroll-markers pseudo-element box + is generated by a [=scroll container=] element + having a computed 'scroll-markers' property that is not 'none', + representing a stylable sibling pseudo-element immediately adjacent to the [=scroll container=]. + + The following additions are recommended for the default UA stylesheet + to ensure that the generation of scroll marker pseudo-elements does not invalidate the layout of the site: + + 
+		/* The generation of ::scroll-marker pseudo-elements cannot invalidate layout outside of this pseudo-element. */
+		::scroll-markers { contain: size !important; }
+
+ +

The ''::scroll-marker'' pseudo-element

+ + When the computed 'content' value of an element is not 'none', + the ::scroll-marker psuedo-element generates a box + as if it was a child of the ''::scroll-markers'' box on its nearest ancestor [=scroll container=]. + These boxes are added in the [=tree order=] of their originating element. + + These pseudo-elements behave as a ''<button>'' + with ''HTMLButtonElement.scrollTargetElement'' set to its originating element. + They can be focused and invoked.

Automatic Ellipses

@@ -2118,13 +2178,75 @@ showing in which case space is reserved for the scrollbar gutter. +

Appendix C: Scroll navigation controls

+ +

''scrolltarget'' attribute

+ + The scrolltarget attribute turns a ''<button>'' element into a scroll marker control. + This takes the ID of the element to target as its value. + + The HTMLButtonElement.scrollTargetElement instance property + gets and sets the element being interacted with by the control button. + This is the JavaScript equivalent of the ''scrolltarget'' HTML attribute. + + A 'button' with a non-null ''HTMLButtonElement.scrollTargetElement'' + represents a ''scroll marker control'' that forms a 'scroll marker group' for its nearest [=scroll container=] + in which exactly one control in the group can have its 'checked' state set to true. + + The 'scroll marker group' that contains a ''<button>'' element a also contains all the other ''<button>'' elements b that fulfill the following conditions: + + * The ''<button>'' element b has a non-null ''HTMLButtonElement.scrollTargetElement'' value. + * a and b's ''HTMLButtonElement.scrollTargetElement'' have the same nearest [=scroll container=]. + + When a ''scroll marker control'' is activated: + + 1. Let element be the ''HTMLButtonElement.scrollTargetElement'' of the control. + 1. Let block be "start". + 1. Let inline be "start". + 1. Scroll the element into view with behavior, block, and inline. + 1. If activated by invocation, move focus to element. + If element is not focusable this will result in there being no active element, + but the next focus change will proceed from this element as if it were focused. + +

Scroll tracking

+ + A scrolling operation might animate towards a particular position + (e.g. scrollbar arrow clicks, arrow key presses, "behavior: smooth" programmatic scrolls) + or might directly track a user’s input + (e.g. touch scrolling, scrollbar dragging). + In either case, the user agent chooses an 'eventual scroll position' to which the scroller + will reach. + + Whenever a [=scroll container=] is scrolled, or layout changes the scroll position, the user agent must run these steps: + + 1. Let position be the 'eventual scroll position' for the scrolling operation. + 1. Let markers be all of the ''scroll marker control'' elements which are a part of the 'scroll marker group' for the [=scroll container=]. + 1. Let targets be the set of ''HTMLButtonElement.scrollTargetElement'' for those controls sorted in [=tree order=]. + 1. Let selected be null. + 1. For each item target in targets: + 1. Set selected to target. + 1. Let targetPosition be the position that would be scrolled to if we scroll target into view. + 1. If targetPosition's scroll block offset is less than or equal to position's scroll block offset, break. + 1. If targetPosition's scroll inline offset is less than or equal to position's scroll inline offset, break. + 1. Let marker be the first control in markers whose ''HTMLButtonElement.scrollTargetElement'' is selected. + 1. Set the 'checked' state of marker to true. + +

Focus behavior

+ + A ''scroll marker control'' is only focusable if it is 'checked'. + + When such a control is focused, + * The down arrow or right arrow move focus to and activate the next control from its 'scroll marker group'. + * The up arrow or left arrow move focus to and activate the previous control from its 'scroll marker group'. + * Space or Enter invoke the control. +

-Appendix C: Privacy Considerations

+Appendix D: Privacy Considerations This specification introduces no new privacy considerations.

-Appendix D: Security Considerations

+Appendix E: Security Considerations This specification introduces no new security considerations. From 18c8df2b60294ad04e355e2d2b50832117875f3d Mon Sep 17 00:00:00 2001 From: Robert Flack Date: Wed, 1 May 2024 12:33:43 -0400 Subject: [PATCH 02/11] Update css-overflow-4/Overview.bs Co-authored-by: Tab Atkins Jr. --- css-overflow-4/Overview.bs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css-overflow-4/Overview.bs b/css-overflow-4/Overview.bs index 5aa21ca2e64..b1ca7a5a81e 100644 --- a/css-overflow-4/Overview.bs +++ b/css-overflow-4/Overview.bs @@ -2182,7 +2182,7 @@ showing in which case space is reserved for the scrollbar gutter.

''scrolltarget'' attribute

- The scrolltarget attribute turns a ''<button>'' element into a scroll marker control. + The scrolltarget attribute turns a <{button}> element into a scroll marker control. This takes the ID of the element to target as its value. The HTMLButtonElement.scrollTargetElement instance property From 96d791a53ba720f86bfd42c2b48c60c288de00e7 Mon Sep 17 00:00:00 2001 From: Robert Flack Date: Wed, 1 May 2024 12:37:33 -0400 Subject: [PATCH 03/11] Update css-overflow-4/Overview.bs Co-authored-by: Tab Atkins Jr. --- css-overflow-4/Overview.bs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css-overflow-4/Overview.bs b/css-overflow-4/Overview.bs index b1ca7a5a81e..316c8aadecd 100644 --- a/css-overflow-4/Overview.bs +++ b/css-overflow-4/Overview.bs @@ -2185,7 +2185,7 @@ showing in which case space is reserved for the scrollbar gutter. The scrolltarget attribute turns a <{button}> element into a scroll marker control. This takes the ID of the element to target as its value. - The HTMLButtonElement.scrollTargetElement instance property + The HTMLButtonElement.scrollTargetElement instance property gets and sets the element being interacted with by the control button. This is the JavaScript equivalent of the ''scrolltarget'' HTML attribute. From e6d4e8e7e7c2aaf0c8fe29eaa8bade1a0acc406b Mon Sep 17 00:00:00 2001 From: Robert Flack Date: Wed, 1 May 2024 12:50:11 -0400 Subject: [PATCH 04/11] Address review comments and suggestions. --- css-overflow-4/Overview.bs | 84 ++++++++++++++++++++------------------ 1 file changed, 44 insertions(+), 40 deletions(-) diff --git a/css-overflow-4/Overview.bs b/css-overflow-4/Overview.bs index 316c8aadecd..ab321e40620 100644 --- a/css-overflow-4/Overview.bs +++ b/css-overflow-4/Overview.bs @@ -300,29 +300,29 @@ Overflow Controls: the 'scroll-markers' property and pseudo-elements Canonical Order: per grammar - The 'scroll-markers' property specifies whether the [=scroll container=] should have a '::scroll-markers' pseudo-element created, + The 'scroll-markers' property specifies whether the [=scroll container=] should have a '::scroll-marker-group' pseudo-element created, and its position relative to the scroll container.
none
- The [=scroll container=] does not create a '::scroll-markers' pseudo-element. + The [=scroll container=] does not create a '::scroll-marker-group' pseudo-element.
before
- The [=scroll container=] generates a ''::scroll-markers'' pseudo-element + The [=scroll container=] generates a ''::scroll-marker-group'' pseudo-element whose box is an immediate preceding sibling to its [=originating element=].
after
- The [=scroll container=] generates a ''::scroll-markers'' pseudo-element + The [=scroll container=] generates a ''::scroll-marker-group'' pseudo-element whose box is an immediate following sibling to its [=originating element=].
-

The ''::scroll-markers'' pseudo-element

+

The ''::scroll-marker-group'' pseudo-element

- The ::scroll-markers pseudo-element box + The ::scroll-marker-group pseudo-element box is generated by a [=scroll container=] element having a computed 'scroll-markers' property that is not 'none', representing a stylable sibling pseudo-element immediately adjacent to the [=scroll container=]. @@ -332,18 +332,18 @@ Overflow Controls: the 'scroll-markers' property and pseudo-elements 
 		/* The generation of ::scroll-marker pseudo-elements cannot invalidate layout outside of this pseudo-element. */
-		::scroll-markers { contain: size !important; }
+		::scroll-marker-group { contain: size !important; }

The ''::scroll-marker'' pseudo-element

When the computed 'content' value of an element is not 'none', the ::scroll-marker psuedo-element generates a box - as if it was a child of the ''::scroll-markers'' box on its nearest ancestor [=scroll container=]. + as if it was a child of the ''::scroll-marker-group'' box on its nearest ancestor [=scroll container=]. These boxes are added in the [=tree order=] of their originating element. These pseudo-elements behave as a ''<button>'' - with ''HTMLButtonElement.scrollTargetElement'' set to its originating element. + with {{HTMLButtonElement/scrollTargetElement}} set to its originating element. They can be focused and invoked.

@@ -2180,33 +2180,35 @@ showing in which case space is reserved for the scrollbar gutter.

Appendix C: Scroll navigation controls

-

''scrolltarget'' attribute

+

<{button/scrolltarget}> attribute

The scrolltarget attribute turns a <{button}> element into a scroll marker control. This takes the ID of the element to target as its value. The HTMLButtonElement.scrollTargetElement instance property gets and sets the element being interacted with by the control button. - This is the JavaScript equivalent of the ''scrolltarget'' HTML attribute. + This is the JavaScript equivalent of the <{button/scrolltarget}> HTML attribute. - A 'button' with a non-null ''HTMLButtonElement.scrollTargetElement'' - represents a ''scroll marker control'' that forms a 'scroll marker group' for its nearest [=scroll container=] + A 'button' with a non-null {{HTMLButtonElement/scrollTargetElement}} + represents a scroll marker control that forms a scroll marker group for its nearest [=scroll container=] in which exactly one control in the group can have its 'checked' state set to true. - The 'scroll marker group' that contains a ''<button>'' element a also contains all the other ''<button>'' elements b that fulfill the following conditions: + The [=scroll marker group=] that contains a ''<button>'' element a also contains all the other ''<button>'' elements b that fulfill the following conditions: - * The ''<button>'' element b has a non-null ''HTMLButtonElement.scrollTargetElement'' value. - * a and b's ''HTMLButtonElement.scrollTargetElement'' have the same nearest [=scroll container=]. + * The ''<button>'' element b has a non-null {{HTMLButtonElement/scrollTargetElement}} value. + * a and b's {{HTMLButtonElement/scrollTargetElement}} have the same nearest [=scroll container=]. - When a ''scroll marker control'' is activated: +
+ When a [=scroll marker control=] is activated: - 1. Let element be the ''HTMLButtonElement.scrollTargetElement'' of the control. - 1. Let block be "start". - 1. Let inline be "start". - 1. Scroll the element into view with behavior, block, and inline. - 1. If activated by invocation, move focus to element. - If element is not focusable this will result in there being no active element, - but the next focus change will proceed from this element as if it were focused. + 1. Let element be the {{HTMLButtonElement/scrollTargetElement}} of the control. + 1. Let block be "start". + 1. Let inline be "start". + 1. Scroll the element into view with behavior, block, and inline. + 1. If activated by invocation, move focus to element. + If element is not focusable this will result in there being no active element, + but the next focus change will proceed from this element as if it were focused. +

Scroll tracking

@@ -2217,27 +2219,29 @@ showing in which case space is reserved for the scrollbar gutter. In either case, the user agent chooses an 'eventual scroll position' to which the scroller will reach. - Whenever a [=scroll container=] is scrolled, or layout changes the scroll position, the user agent must run these steps: - - 1. Let position be the 'eventual scroll position' for the scrolling operation. - 1. Let markers be all of the ''scroll marker control'' elements which are a part of the 'scroll marker group' for the [=scroll container=]. - 1. Let targets be the set of ''HTMLButtonElement.scrollTargetElement'' for those controls sorted in [=tree order=]. - 1. Let selected be null. - 1. For each item target in targets: - 1. Set selected to target. - 1. Let targetPosition be the position that would be scrolled to if we scroll target into view. - 1. If targetPosition's scroll block offset is less than or equal to position's scroll block offset, break. - 1. If targetPosition's scroll inline offset is less than or equal to position's scroll inline offset, break. - 1. Let marker be the first control in markers whose ''HTMLButtonElement.scrollTargetElement'' is selected. - 1. Set the 'checked' state of marker to true. +
+ Whenever a [=scroll container=] is scrolled, or layout changes the scroll position, the user agent must run these steps: + + 1. Let position be the 'eventual scroll position' for the scrolling operation. + 1. Let markers be all of the [=scroll marker control=] elements which are a part of the [=scroll marker group=] for the [=scroll container=]. + 1. Let targets be the set of {{HTMLButtonElement/scrollTargetElement}} for those controls sorted in [=tree order=]. + 1. Let selected be null. + 1. For each item target in targets: + 1. Set selected to target. + 1. Let targetPosition be the position that would be scrolled to if we scroll target into view. + 1. If targetPosition's scroll block offset is less than or equal to position's scroll block offset, break. + 1. If targetPosition's scroll inline offset is less than or equal to position's scroll inline offset, break. + 1. Let marker be the first control in markers whose {{HTMLButtonElement/scrollTargetElement}} is selected. + 1. Set the 'checked' state of marker to true. +

Focus behavior

- A ''scroll marker control'' is only focusable if it is 'checked'. + A [=scroll marker control=] is only focusable if it is 'checked'. When such a control is focused, - * The down arrow or right arrow move focus to and activate the next control from its 'scroll marker group'. - * The up arrow or left arrow move focus to and activate the previous control from its 'scroll marker group'. + * The down arrow or right arrow move focus to and activate the next control from its [=scroll marker group=]. + * The up arrow or left arrow move focus to and activate the previous control from its [=scroll marker group=]. * Space or Enter invoke the control.

From dfb1571390f7b6d099a21815cdd696660a01bf25 Mon Sep 17 00:00:00 2001 From: Robert Flack Date: Wed, 1 May 2024 12:53:51 -0400 Subject: [PATCH 05/11] Algorithm names and dedupe definitions. --- css-overflow-4/Overview.bs | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/css-overflow-4/Overview.bs b/css-overflow-4/Overview.bs index ab321e40620..a02a19c43ca 100644 --- a/css-overflow-4/Overview.bs +++ b/css-overflow-4/Overview.bs @@ -2182,7 +2182,7 @@ showing in which case space is reserved for the scrollbar gutter.

<{button/scrolltarget}> attribute

- The scrolltarget attribute turns a <{button}> element into a scroll marker control. + The scrolltarget attribute turns a <{button}> element into a [=scroll marker control=]. This takes the ID of the element to target as its value. The HTMLButtonElement.scrollTargetElement instance property @@ -2190,7 +2190,7 @@ showing in which case space is reserved for the scrollbar gutter. This is the JavaScript equivalent of the <{button/scrolltarget}> HTML attribute. A 'button' with a non-null {{HTMLButtonElement/scrollTargetElement}} - represents a scroll marker control that forms a scroll marker group for its nearest [=scroll container=] + represents a scroll marker control that forms a scroll marker group for its nearest [=scroll container=] in which exactly one control in the group can have its 'checked' state set to true. The [=scroll marker group=] that contains a ''<button>'' element a also contains all the other ''<button>'' elements b that fulfill the following conditions: @@ -2198,7 +2198,7 @@ showing in which case space is reserved for the scrollbar gutter. * The ''<button>'' element b has a non-null {{HTMLButtonElement/scrollTargetElement}} value. * a and b's {{HTMLButtonElement/scrollTargetElement}} have the same nearest [=scroll container=]. -
+
When a [=scroll marker control=] is activated: 1. Let element be the {{HTMLButtonElement/scrollTargetElement}} of the control. @@ -2219,7 +2219,7 @@ showing in which case space is reserved for the scrollbar gutter. In either case, the user agent chooses an 'eventual scroll position' to which the scroller will reach. -
+
Whenever a [=scroll container=] is scrolled, or layout changes the scroll position, the user agent must run these steps: 1. Let position be the 'eventual scroll position' for the scrolling operation. From c4d96242c31237f4554d9f0e58826cf53b27614e Mon Sep 17 00:00:00 2001 From: Robert Flack Date: Wed, 1 May 2024 13:07:08 -0400 Subject: [PATCH 06/11] Mention that :checked can be used for styling checked marker. --- css-overflow-4/Overview.bs | 1 + 1 file changed, 1 insertion(+) diff --git a/css-overflow-4/Overview.bs b/css-overflow-4/Overview.bs index a02a19c43ca..df652191a0d 100644 --- a/css-overflow-4/Overview.bs +++ b/css-overflow-4/Overview.bs @@ -2192,6 +2192,7 @@ showing in which case space is reserved for the scrollbar gutter. A 'button' with a non-null {{HTMLButtonElement/scrollTargetElement}} represents a scroll marker control that forms a scroll marker group for its nearest [=scroll container=] in which exactly one control in the group can have its 'checked' state set to true. + A [=scroll marker control=] with a true 'checked' state can be styled by the '':checked'' pseudo-class. The [=scroll marker group=] that contains a ''<button>'' element a also contains all the other ''<button>'' elements b that fulfill the following conditions: From fc11053f5cd7169c5b7b2612ce8e58447ab0c7e8 Mon Sep 17 00:00:00 2001 From: Robert Flack Date: Wed, 1 May 2024 13:13:00 -0400 Subject: [PATCH 07/11] Fix button references. --- css-overflow-4/Overview.bs | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/css-overflow-4/Overview.bs b/css-overflow-4/Overview.bs index df652191a0d..2192294adfa 100644 --- a/css-overflow-4/Overview.bs +++ b/css-overflow-4/Overview.bs @@ -342,7 +342,7 @@ Overflow Controls: the 'scroll-markers' property and pseudo-elements

as if it was a child of the ''::scroll-marker-group'' box on its nearest ancestor [=scroll container=]. These boxes are added in the [=tree order=] of their originating element. - These pseudo-elements behave as a ''<button>'' + These pseudo-elements behave as a <{button}> with {{HTMLButtonElement/scrollTargetElement}} set to its originating element. They can be focused and invoked. @@ -2194,9 +2194,9 @@ showing in which case space is reserved for the scrollbar gutter. in which exactly one control in the group can have its 'checked' state set to true. A [=scroll marker control=] with a true 'checked' state can be styled by the '':checked'' pseudo-class. - The [=scroll marker group=] that contains a ''<button>'' element a also contains all the other ''<button>'' elements b that fulfill the following conditions: + The [=scroll marker group=] that contains a <{button}> element a also contains all the other <{button}> elements b that fulfill the following conditions: - * The ''<button>'' element b has a non-null {{HTMLButtonElement/scrollTargetElement}} value. + * The <{button}> element b has a non-null {{HTMLButtonElement/scrollTargetElement}} value. * a and b's {{HTMLButtonElement/scrollTargetElement}} have the same nearest [=scroll container=].
From 5887c36a6c3c187096cf3ddb9356f061a6382c09 Mon Sep 17 00:00:00 2001 From: Robert Flack Date: Fri, 10 May 2024 13:16:25 -0400 Subject: [PATCH 08/11] Review comments. --- css-overflow-4/Overview.bs | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/css-overflow-4/Overview.bs b/css-overflow-4/Overview.bs index 2192294adfa..835731d04ce 100644 --- a/css-overflow-4/Overview.bs +++ b/css-overflow-4/Overview.bs @@ -286,11 +286,11 @@ Expanding Clipping Bounds: the 'overflow-clip-margin-*' properties with ''overflow: hidden'' or ''overflow: scroll'', which are not defined to use the [=overflow clip edge=]. -

-Overflow Controls: the 'scroll-markers' property and pseudo-elements

+

+Overflow Controls: the 'scroll-marker-group' property and pseudo-elements

-	Name: scroll-markers
+	Name: scroll-marker-group
 	Value: none | before | after
 	Initial: none
 	Applies to: [=scroll containers=]
@@ -300,10 +300,10 @@ Overflow Controls: the 'scroll-markers' property and pseudo-elements
 	Canonical Order: per grammar
- The 'scroll-markers' property specifies whether the [=scroll container=] should have a '::scroll-marker-group' pseudo-element created, + The 'scroll-marker-group' property specifies whether the [=scroll container=] should have a '::scroll-marker-group' pseudo-element created, and its position relative to the scroll container. -
+
none
The [=scroll container=] does not create a '::scroll-marker-group' pseudo-element. @@ -324,7 +324,7 @@ Overflow Controls: the 'scroll-markers' property and pseudo-elements The ::scroll-marker-group pseudo-element box is generated by a [=scroll container=] element - having a computed 'scroll-markers' property that is not 'none', + having a computed 'scroll-marker-group' property that is not 'none', representing a stylable sibling pseudo-element immediately adjacent to the [=scroll container=]. The following additions are recommended for the default UA stylesheet @@ -337,9 +337,10 @@ Overflow Controls: the 'scroll-markers' property and pseudo-elements

The ''::scroll-marker'' pseudo-element

- When the computed 'content' value of an element is not 'none', - the ::scroll-marker psuedo-element generates a box - as if it was a child of the ''::scroll-marker-group'' box on its nearest ancestor [=scroll container=]. + When the computed 'content' value of a ::scroll-marker pseudo-element is not 'none' + and its nearest ancestor [=scroll container=] [=scroll container=] has a computed 'scroll-marker-group' property that is not 'none', + the pseudo-element generates a box attached as a child of the ''::scroll-marker-group'' pseudo-element's generated box + on its nearest ancestor [=scroll container=]. These boxes are added in the [=tree order=] of their originating element. These pseudo-elements behave as a <{button}> From 0be64b614c0d6a78ba870062d13d17157bf590fe Mon Sep 17 00:00:00 2001 From: Robert Flack Date: Fri, 10 May 2024 13:16:54 -0400 Subject: [PATCH 09/11] Update css-overflow-4/Overview.bs Co-authored-by: Tab Atkins Jr. --- css-overflow-4/Overview.bs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/css-overflow-4/Overview.bs b/css-overflow-4/Overview.bs index 835731d04ce..64afc28a8f0 100644 --- a/css-overflow-4/Overview.bs +++ b/css-overflow-4/Overview.bs @@ -2191,7 +2191,7 @@ showing in which case space is reserved for the scrollbar gutter. This is the JavaScript equivalent of the <{button/scrolltarget}> HTML attribute. A 'button' with a non-null {{HTMLButtonElement/scrollTargetElement}} - represents a scroll marker control that forms a scroll marker group for its nearest [=scroll container=] + represents a scroll marker control that forms a scroll marker group for its nearest [=scroll container=] in which exactly one control in the group can have its 'checked' state set to true. A [=scroll marker control=] with a true 'checked' state can be styled by the '':checked'' pseudo-class. From 15197e1f2706b5a3162bbf7bfbb9380f688417bb Mon Sep 17 00:00:00 2001 From: Robert Flack Date: Wed, 12 Jun 2024 15:34:39 -0400 Subject: [PATCH 10/11] Add issues inline for followup. --- css-overflow-5/Overview.bs | 34 +++++++++++++++++++++++++++------- 1 file changed, 27 insertions(+), 7 deletions(-) diff --git a/css-overflow-5/Overview.bs b/css-overflow-5/Overview.bs index f849b286dc2..9c62b58e4fb 100644 --- a/css-overflow-5/Overview.bs +++ b/css-overflow-5/Overview.bs @@ -881,6 +881,8 @@ the ''continue/fragments'' value of the 'continue' property.

Appendix B: Scroll navigation controls

+Issue: Describe the overall problem, use cases and rationale. +

<{button/scrolltarget}> attribute

The scrolltarget attribute turns a <{button}> element into a [=scroll marker control=]. @@ -912,6 +914,9 @@ Appendix B: Scroll navigation controls but the next focus change will proceed from this element as if it were focused.
+ Issue: Moving focus to the control on activation means that the only way to control scroll markers via the keyboard is to tab into them. + We should retain focus after the control is activated, while still altering the point from which the next focusable element is found if the user tabs away. +

Scroll tracking

A scrolling operation might animate towards a particular position @@ -921,22 +926,35 @@ Appendix B: Scroll navigation controls In either case, the user agent chooses an 'eventual scroll position' to which the scroller will reach. + This 'eventual scroll position' is used to determine the active marker. + 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. +
- Whenever a [=scroll container=] is scrolled, or layout changes the scroll position, the user agent must run these steps: + Whenever a [=scroll container=] is scrolled, or layout changes the scroll position, the user agent must run these steps to determine the active marker: 1. Let position be the 'eventual scroll position' for the scrolling operation. 1. Let markers be all of the [=scroll marker control=] elements which are a part of the [=scroll marker group=] for the [=scroll container=]. 1. Let targets be the set of {{HTMLButtonElement/scrollTargetElement}} for those controls sorted in [=tree order=]. - 1. Let selected be null. - 1. For each item target in targets: + 1. Let selected be the first element in targets, or null if targets is empty. + 1. For each target in targets: 1. Set selected to target. 1. Let targetPosition be the position that would be scrolled to if we scroll target into view. - 1. If targetPosition's scroll block offset is less than or equal to position's scroll block offset, break. - 1. If targetPosition's scroll inline offset is less than or equal to position's scroll inline offset, break. - 1. Let marker be the first control in markers whose {{HTMLButtonElement/scrollTargetElement}} is selected. - 1. Set the 'checked' state of marker to true. + 1. : If targetPosition's scroll block offset is less than or equal to position's scroll block offset, and + targetPosition's scroll inline offset is less than or equal to position's scroll inline offset. + :: + Update selected to target. + Break. + 1. : If selected is not null, + :: + 1. Let marker be the first control in markers whose {{HTMLButtonElement/scrollTargetElement}} is selected. + 1. Set the 'checked' state of marker to true. + : Otherwise, + :: + Set the 'checked' state of all controls in markers to false.
+ Issue: Should we allow for none of the markers to be currently active, e.g. if not yet scrolled past the position of the first marker. +

Focus behavior

A [=scroll marker control=] is only focusable if it is 'checked'. @@ -946,6 +964,8 @@ Appendix B: Scroll navigation controls * The up arrow or left arrow move focus to and activate the previous control from its [=scroll marker group=]. * Space or Enter invoke the control. + Issue: We should be able to tab away from the target immediately after using arrow navigations rather than requiring activating the control first. +

Appendix C: Privacy Considerations

From 9d31859175140693784571be261641bec5ad8da0 Mon Sep 17 00:00:00 2001 From: Robert Flack Date: Wed, 12 Jun 2024 15:53:44 -0400 Subject: [PATCH 11/11] Add an overview. --- css-overflow-5/Overview.bs | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/css-overflow-5/Overview.bs b/css-overflow-5/Overview.bs index 9c62b58e4fb..11de556ced4 100644 --- a/css-overflow-5/Overview.bs +++ b/css-overflow-5/Overview.bs @@ -881,7 +881,21 @@ the ''continue/fragments'' value of the 'continue' property.

Appendix B: Scroll navigation controls

-Issue: Describe the overall problem, use cases and rationale. +[[html#the-a-element]] allows creating navigational links to a particular scroll position within the same page. +However, there is little feedback to the user regarding the current content being viewed, and +the interaction model does not match the expectations of modern accessible UI components. + +This specification adds a mechanism for creating scroll navigation controls. +The active marker, reflecting the current position, can be styled to give the user an indication of which section they are in. +The set of markers are treated as a component following the accessibility guidelines for keyboard navigation within components. + +Use cases include a table of contents with links to relevant contents, +markers for scrolling carousel pages, +and scrollable tab panels. + +Issue: Add images representing these examples. + +Issue: Explore whether scrolltarget can be more directly associated with anchor tags.

<{button/scrolltarget}> attribute

@@ -957,7 +971,7 @@ Issue: Describe the overall problem, use cases and rationale.

Focus behavior

- A [=scroll marker control=] is only focusable if it is 'checked'. + A [=scroll marker control=] is only focusable if it is 'checked'. Within a group, exactly one marker is 'checked' at a time. When such a control is focused, * The down arrow or right arrow move focus to and activate the next control from its [=scroll marker group=].