demo · v135

Keyboard, focus, and announced direction

The accessibility argument the Open UI explainer leans on: hand-rolled carousel buttons routinely forget to handle Tab order, ARIA, and the disabled state when the carousel is at the start or end. The pseudo-element machinery handles all three by default. Tab into the carousel, then Enter / Space to scroll — the log below records the events so you can audit them.

::scroll-button(): ?

Pull quote

"It was a small craft, two-masted, painted black above and pale grey below the waterline."

Pull quote

"They had set out at first light and the gulls were still asleep on the breakwater."

Pull quote

"By noon they were past the lightship and the wind had turned."

Pull quote

"He had not seen land in three weeks but the chart was clear."

Pull quote

"There were two ways to read the swell and only one of them mattered now."

the code

.carousel::scroll-button(left)  { content: "\2190"; }
.carousel::scroll-button(right) { content: "\2192"; }

/* default behaviour: buttons appear, follow focus order, disable when
   the scroller is at the matching edge, and announce their direction. */

see also