Add declarative scroll commands to HTMLButtonElement

[danielsakhapov]

What problem are you trying to solve?

Authors frequently build custom components that contain a scrollable region, such as:

A horizontal carousel of products or images.
A vertically scrolling list of items within a modal.
A 2D scrolling area for a map or canvas.

These components almost always require custom "Next," "Previous," "Up," or "Down" buttons. Currently, authors must write JavaScript to wire these buttons up. This proposal moves this common, repetitive behavior into the platform, making it declarative, robust, and accessible by default.

What solutions exist today?

Button activation handlers in JavaScript

How would you solve it?

The proposal is to add eight new enumerated values to the command attribute on HTMLButtonElement. These commands would be paired with the commandfor attribute, which targets the id of the scroll container.

Proposed command values
Physical directions:
page-up
page-down
page-left
page-right
Logical directions:
page-block-start
page-block-end
page-inline-start
page-inline-end

Anything else?

Full proposal explainer: https://github.com/danielsakhapov/declarative-scroll-commands-for-html-explainer
OpenUI discussion: openui/open-ui#1220

[annevk]

Does CSS include physical directions for newly designed features?

[danielsakhapov]

Yes, it does.

https://www.w3.org/TR/css-overflow-5/#typedef-scroll-button-direction