[carousel] How to make scroll-markers / navigation buttons?
Nobody has claimed this yet.
- 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:
- Scroll buttons sound like they could be explained and authored with a few new invoker actions for scrolling containers (e.g. scrollBlockForward).
- 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:
- Do the requirements make sense?
- Should this be a full element or an attribute on an existing element (and optionally on certain elements only?)
- Should we explain the requirements as
- a bunch of independent features, e.g. by extending capabilities of invokers, focusgroup, and something else to explain auto-activation, or
- as a single high level thing which encapsulates all/most/several of the requirements.
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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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