Re: [csswg-drafts] [css-overflow-5] Discrete versus navigation scroll marker mode (#12122)

@aleventhal @scottaohara @smhigley Based on our discussion, I propose we do following:

Add `discrete | navigation` as a second value to `scroll-marker-group`, default `navigation`. This will affect the roles and behaviours of the associated elements and pseudo-elements as follows:

Navigation:
1. The roles of `::scroll-marker-group` and `::scroll-marker` are `navigation` and `link` respectively.
2. All `::scroll-marker` pseudo-elements are tab stops, in order.
3. Activating a `::scroll-marker` pseudo-element scrolls its originating element into view and sets the [sequential focus navigation starting point](https://html.spec.whatwg.org/#sequential-focus-navigation-starting-point) to the originating element losing focus from the `::scroll-marker`.
4. The roles of the originating elements are unaffected.

Discrete:
1. The roles of `::scroll-marker-group` and `::scroll-marker` are `tablist` and `tab` respectively.
2. Only the active `::scroll-marker` is a tab stop, arrow keys are used to switch between.
3. Activating a `::scroll-marker` pseudo-element scrolls its originating element into view, resulting in the marker being `:target-current` retaining focus on the `::scroll-marker`.
4. Originating elements of `::scroll-marker` are given an implicit role of `tabpanel`. If the originating element is `::column` the `tabpanel` role is given to the originating element of the `::column`.
5. The `::scroll-marker` pseudo-element is a [focus navigation scope owner](https://html.spec.whatwg.org/#focus-navigation-scope-owner) for its associated originating element. This means that tab focus moves from the marker to the content, and since only the active marker is a tab stop per point 2, contents of the inactive tabpanels is not reached unless you switch which tab is active.
6. Content from inactive tabs is also hidden from the AX tree, meaning authors do not need to carefully apply `interactivity: inert` to hide the inactive tabpanels.

The TLDR is that the default `navigation` `::scroll-marker` list behaves like a table of contents list of links, and the `discrete` will automatically have the roles and expected behaviors of the tabs model pattern demonstrated in https://www.w3.org/WAI/ARIA/apg/patterns/carousel/examples/carousel-2-tablist/

-- 
GitHub Notification of comment by flackr
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12122#issuecomment-2920507737 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 29 May 2025 20:29:19 UTC