CSS Scroll Buttons

[xiaochengh]

こんにちは TAG-さん!

(Split from #1037. Original requester @flackr)

I'm requesting a TAG review of CSS Scroll Buttons.

Carousels are an often used design pattern on the web. They are used in a variety of contexts, from product listing pages to slideshow like content. OpenUI has explored a range of carousel designs, showing that the specific layout and appearance can vary dramatically. They are also provided by many frameworks as components, however implementing a carousel correctly is complicated and often results in inconsistent and sometimes inaccessible implementations.

There are a variety of problems being solved by carousels, which we believe could be provided by a set of CSS features. Developers could then combine these CSS features to create the various designs. CSS-only component libraries could be built to further simplify this process.

• Explainer¹: https://github.com/w3c/csswg-drafts/blob/main/css-overflow-5/carousel-explainer.md
• Specification: https://drafts.csswg.org/css-overflow-5/#scroll-buttons
• WPT Tests: Need to be moved to wpt
• User research: https://css.oddbird.net/overflow/explainer/ (Carousel listed among top missing elements https://2023.stateofhtml.com/en-US/usage/#html_missing_elements)
• Security and Privacy self-review²: This feature has no known privacy/security concerns. https://drafts.csswg.org/css-overflow-5/#privacy https://drafts.csswg.org/css-overflow-5/#security
• GitHub repo: https://github.com/w3c/csswg-drafts/
• Primary contacts:
  • Robert Flack (@flackr), Google, editor
  • Tab Atkins (@tabatkins), Google, editor
• Organization/project driving the specification: Google
• Multi-stakeholder support³:
  • Chromium comments: Positive, implementation is underway
  • Mozilla comments: CSS Overflow Navigation Controls mozilla/standards-positions#1161
  • WebKit comments: CSS Overflow Navigation Controls WebKit/standards-positions#447
• Status/issue trackers for implementations⁴:
  • Chromium: ::scroll-button(*)

Further details:

• I have reviewed the TAG's Web Platform Design Principles
• Relevant time constraints or deadlines:
• The group where the work on this specification is currently being done: CSSWG
• The group where standardization of this work is intended to be done (if different from the current group):
• Major unresolved issues with or opposition to this specification:
• This work is being funded by:

[matatk]

Hi @flackr, thanks for your review request (this is split off from your original thread), and for your replies on #1055.

Thank you for writing an Explainer for your proposal. However, we're unclear on a couple of things:

1. Is it intended that the scroll buttons must be focused in order to scroll the carousel via the keyboard?

2. Is it intended that scroll buttons will be provided as a way to style the scrolling mechanism for any scrollable region on the page (and/or the viewport itself) in future?

We are concerned that if the answer to both questions is 'yes' then scrolling would work very differently from a keyboard interaction point of view to how it does currently.