[Carousel] Add ability to hide pagination dots #11131
Description
Check existing issues
- I have checked for existing issues to avoid duplicates
Which Component
Carousel
Description
For some complex implementations - the Carousel may be controlled by an external UI (increment arrows outside the Carousel area, a "filmstrip" that correspond to Carousel Items, etc.)
In these cases, the pagination dots may be unnecessary.
Acceptance Criteria
A configuration is added to not display the carousel dots. This should be mutually exclusive from the arrows - which may still be useful / desired in some cases.
Prop name
paginationDisabled (type: boolean, default: false)
Design
A11y
- When paginationDisabled = true → remove bullet-related ARIA (e.g., aria-current, aria-label).
- Consider providing alternate nav feedback, such as:
- Visually hidden progress indicators. Example: aria-live region announcing the active slide (e.g., “Item 2 of 5”)
Example Use Case
Consider a use case like this, where a developer can control the active / selected Carousel Item from separate controls:
Here I'd like to hide the Carousel-rendered dots as I have another method of interaction (and I've already hidden the arrows with arrow-type.
Priority impact
impact - p3 - not time sensitive
Related Carousel Issues
Calcite package
- @esri/calcite-components
- @esri/calcite-components-react
- @esri/calcite-design-tokens
- @esri/eslint-plugin-calcite-components
Esri team
Calcite (design)
monday.com sync: #8745474746