You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The <dfn element-attr for=button>scrolltarget</dfn> attribute turns a <{button}> element into a [=scroll marker control=].
903
+
This takes the ID of the element to target as its value.
904
+
905
+
The <dfn attribute for=HTMLButtonElement lt=scrollTargetElement>HTMLButtonElement.scrollTargetElement</dfn> instance property
906
+
gets and sets the element being interacted with by the control button.
907
+
This is the JavaScript equivalent of the <{button/scrolltarget}> HTML attribute.
908
+
909
+
A 'button' with a non-null {{HTMLButtonElement/scrollTargetElement}}
910
+
represents a <dfn export>scroll marker control</dfn> that forms a <dfn>scroll marker group</dfn> for its nearest [=scroll container=]
911
+
in which exactly one control in the group can have its 'checked' state set to true.
912
+
A [=scroll marker control=] with a true 'checked' state can be styled by the '':checked'' pseudo-class.
913
+
914
+
The [=scroll marker group=] that contains a <{button}> element a also contains all the other <{button}> elements b that fulfill the following conditions:
915
+
916
+
* The <{button}> element b has a non-null {{HTMLButtonElement/scrollTargetElement}} value.
917
+
* a and b's {{HTMLButtonElement/scrollTargetElement}} have the same nearest [=scroll container=].
918
+
919
+
<div algorithm="scrollTargetElement activation">
920
+
When a [=scroll marker control=] is activated:
921
+
922
+
1. Let <var>element</var> be the {{HTMLButtonElement/scrollTargetElement}} of the control.
923
+
1. Let <var>block</var> be "<code>start</code>".
924
+
1. Let <var>inline</var> be "<code>start</code>".
925
+
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>.
926
+
1. If activated by invocation, move focus to <var>element</var>.
927
+
If <var>element</var> is not focusable this will result in there being no active element,
928
+
but the next focus change will proceed from this <var>element</var> as if it were focused.
929
+
</div>
930
+
931
+
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.
932
+
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.
In either case, the user agent chooses an 'eventual scroll position' to which the scroller
941
+
will reach.
942
+
943
+
This 'eventual scroll position' is used to determine the active marker.
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. 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=].
951
+
1. Let <var>targets</var> be the set of {{HTMLButtonElement/scrollTargetElement}} for those controls sorted in [=tree order=].
952
+
1. Let <var>selected</var> be the first element in <var>targets</var>, or null if <var>targets</var> is empty.
953
+
1. For each <var>target</var> in <var>targets</var>:
954
+
1. Set <var>selected</var> to <var>target</var>.
955
+
1. Let <var>targetPosition</var> be the position that would be scrolled to if we scroll <var>target</var> into view.
956
+
1. : If <var>targetPosition</var>'s scroll block offset is less than or equal to <var>position</var>'s scroll block offset, and
957
+
<var>targetPosition</var>'s scroll inline offset is less than or equal to <var>position</var>'s scroll inline offset.
958
+
::
959
+
Update <var>selected</var> to <var>target</var>.
960
+
Break.
961
+
1. : If <var>selected</var> is not null,
962
+
::
963
+
1. Let <var>marker</var> be the first control in <var>markers</var> whose {{HTMLButtonElement/scrollTargetElement}} is <var>selected</var>.
964
+
1. Set the 'checked' state of <var>marker</var> to true.
965
+
: Otherwise,
966
+
::
967
+
Set the 'checked' state of all controls in <var>markers</var> to false.
968
+
</div>
969
+
970
+
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.
971
+
972
+
<h4 id="scroll-target-focus">Focus behavior</h4>
973
+
974
+
A [=scroll marker control=] is only focusable if it is 'checked'. Within a group, exactly one marker is 'checked' at a time.
975
+
976
+
When such a control is focused,
977
+
* The down arrow or right arrow move focus to and activate the next control from its [=scroll marker group=].
978
+
* The up arrow or left arrow move focus to and activate the previous control from its [=scroll marker group=].
979
+
* Space or Enter invoke the control.
980
+
981
+
Issue: We should be able to tab away from the target immediately after using arrow navigations rather than requiring activating the control first.
810
982
811
983
<h2 id=privclass=nonum>
812
-
Appendix B: Privacy Considerations</h2>
984
+
Appendix C: Privacy Considerations</h2>
813
985
814
986
This specification introduces no new privacy considerations.
815
987
816
988
<h2 id=sec class=nonum>
817
-
Appendix C: Security Considerations</h2>
989
+
Appendix D: Security Considerations</h2>
818
990
819
991
This specification introduces no new security considerations.
0 commit comments