openui / openui/open-ui

[carousel] How to make scroll-markers / navigation buttons?

Open
#1,031 6 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

needs-triage
Dominant language
MDX
Stars
4.5k
Forks
226
Avg merge
2d 22h
Merged PRs (30d)
4

Description

I've been working on a set of features which would allow developers to construct carousel experiences by styling regular DOM components. There is an explainer, prototype, and demos at https://github.com/flackr/carousel/ which I'd be happy to talk through. Two features in particular feel like they have a fair bit of overlap with the invokers and focusgroup proposals:

  1. Scroll buttons sound like they could be explained and authored with a few new invoker actions for scrolling containers (e.g. scrollBlockForward).
  2. Scroll markers are a combination of actions (scroll a target into view), roving tab-index to tab focus only the currently active marker, and scroll triggered state.

I was hoping that some discussion might help inform the design of the scroll-marker api when trying to create proper elements which have scroll marker behavior - see https://github.com/flackr/carousel/issues/6 for some prior discussion on this. #1030 is related but only solves one part of the desired behavior.

In particular:

One thing that might help is thinking about how configurable the way you interact with these should be. E.g. should the focusgroup behavior be optional? WAI suggests it can be tabs with focus-group / radio-button roving tab-index style navigation or buttons where each is a tab stop.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the scroll-marker requirements, explainer, prototype, and demos linked in the issue, then review the invokers and focusgroup proposals. Compare the alternatives for scroll buttons and markers, including the related carousel issue and #1030. Done means reaching a documented design decision about the API shape and how its requirements should be covered.

Written by the indexing model from the issue text.

Assessment

Tech stack
html
Domain
accessibility, frontend, web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.