[css-overflow-5] Scroll button pseudo-elements #10722
Description
As part of #9745 I propose adding a pseudo-element which can be created on a scrolling container to provide a button which navigates that scroller. This is a common pattern, typically requiring that developers manually create elements with script to drive these interactions.
Explainer: https://github.com/flackr/carousel/tree/main/scroll-button
E.g. from https://flackr.github.io/carousel/examples/scroll-button/
.scroller {
overflow: auto;
}
.scroller::scroll-up-button {
content: "⬆️";
}
.scroller::scroll-down-button {
content: "⬇️";
}For a more practical example, see the implicit creation of markers in the carousel demo.
Having these pseudo-elements allows developers to further reduce the amount of extra markup elements they need to add specifically for controls and make their page contents more about the semantics, e.g. a list of content. They can also easily trigger the buttons' presence depending on a state or media query.
Some questions for consideration / resolution:
- Should the direction be part of the name or a parameter to a common pseudo-element name, e.g. scroll--button or scroll-button()? My preference is actually for the latter. This may also allow for styling of all scroll-buttons with a single selector.
- What is the focus / tree order of these buttons? Naively I would think following the block direction, then inline direction, e.g. up, left, scroller, scroller::before, scroller contents, scroller::after, right, down. That said, there are some designs where the scroll buttons are next to each other in focus order, e.g. the aria apg demo and @argyleink's carousel has them next to each other in focus order despite being visually apart.
- Can we use logical directions? Hopefully yes!
- How far should clicking one scroll? I think if the scroller has mandatory snap in the scroll axis it should scroll to the next snap area in that axis. Otherwise, I think the most reasonable would be to scroll by a "page" at a time (i.e. the equivalent of the page-up / page-down buttons, typically 85% of the scrollport).