Skip to main content

Carousel

Implemented

Single-slide featured-events hero carousel. State-based slide switching (React state, not native scroll) with prev/next buttons and a WAI-ARIA tablist dot pagination — roving tabindex, ArrowLeft/ArrowRight (wrapping), Home/End, polite aria-live announcements. EN-default authored strings, FR via locale='fr'. No storefront consumer since the 2026-10-27 homepage rebuild (the lane shipped its own HeroShowcase instead) — kept as a DS organism.

Categoryorganisms
Sourcecomponents/organisms/carousel/Carousel.tsx
AI HintHero slider for one featured slide at a time. For a multi-card horizontal rail use EventsRow (native scroll-snap) instead; this component has no autoplay.

Carrousel héros une-diapositive — boutons précédent/suivant, pagination par points en tablist WAI-ARIA (roving tabindex, ← / → / Home / Fin), annonces aria-live polies. Changement de diapositive par état React (pas de défilement natif — voir EventsRow pour le rail multi-cartes).

Carousel

Organism — Storefront family (Family 8)

Carrousel plein-largeur affichant une diapositive à la fois. Boutons de navigation latéraux, points de pagination en bas en role='tablist' (seul le point actif reçoit le focus par Tab ; ← / → avec boucle, Home / Fin). Chaque changement est annoncé par une région aria-live polie. Le texte alternatif de l'image est obligatoire pour chaque diapositive (WCAG 1.1.1). Aucun lecture automatique (autoplay).

Pianiste de jazz sur scène éclairée en bleu

À la une

Festival Jazz Montréal 2026

Du 24 juin au 5 juillet — Place des Festivals

Festival Jazz Montréal 2026 — diapositive 1 sur 3

This component supports light and dark mode.

Props

Prop
Type
Default
Description
slides*
CarouselSlide[]
—

Diapositives — { id, title, subtitle?, imageUrl, imageAlt, href? }. Rendu en lien plein cadre avec légende sur dégradé.

height
number
320

Hauteur en pixels de la scène (section entière).

showDots
boolean
true

Afficher la pagination par points. Points ET flèches n’apparaissent qu’à partir de 2 diapositives.

className
string
—

Classes CSS additionnelles ajoutées au conteneur section.

ariaLabel
string
—

Étiquette accessible prioritaire — remplace le libellé par défaut (« Carrousel événementiel » en fr, "Featured events carousel" en en).

locale
'en' | 'fr'
en

Localise les chaînes authored du carrousel (libellé, sourcil « Featured »/« À la une », précédent/suivant, pagination, « Aller à la diapositive N », « diapositive N sur M », annonce live). Défaut EN, FR via locale='fr'. Les données title/subtitle restent au niveau du site appelant.

Props

Prop
Type
Required
Default
Description
slides
CarouselSlide[]
Required
—

Slides — { id, title, subtitle?, imageUrl, imageAlt, href? }. Full-bleed link slide with gradient-scrim caption.

height
number
Optional
320

Stage height in pixels, applied to the section wrapper.

showDots
boolean
Optional
true

Show the dot pagination row. Dots and arrows only render with 2+ slides.

className
string
Optional
—

Additional CSS classes appended to the section wrapper.

ariaLabel
string
Optional
—

Overrides the default carousel label ('Featured events carousel' EN / 'Carrousel événementiel' FR). Always wins over the locale default.

locale
'en' | 'fr'
Optional
'en'

Localizes the strings Carousel authors (label, eyebrow, prev/next, pagination, 'Go to slide N', 'slide N of M', live announcement). EN default, FR opt-in; slide title/subtitle data stays call-site-owned.

variant
'default' | 'flat'
Optional
'default'

ADR-057 (HV2 / R3). 'flat' drops the rounded frame, the border and the uppercase eyebrow, and swaps the gradient scrim for a flat overlay scrim (editorial homepage). Additive: omitting it — or any unknown value — renders the historical component. Focus rings, tap targets and a11y contract are identical in both variants.

Quick use:<Carousel />

Accessibility

ARIA roleregion

ARIA

3 rules

WAI-ARIA APG

Section with aria-roledescription='carousel' (FR 'carrousel') and an aria-label (prop override or locale default)

WCAG 1.3.1 / 1.1.1

Slide link's accessible name combines title and 'slide N of M'; imageAlt required per slide

WCAG 4.1.3

Polite aria-live region announces '{title} — slide N of M' on every change

Keyboard

1 rule

WAI-ARIA APG Tabs Pattern / WCAG 2.1.1

Dot tablist uses roving tabindex (only active dot tabbable); ArrowLeft/ArrowRight navigate with wrap-around, Home/End jump to first/last, moving focus with selection

validation

1 rule

WCAG 2.5.5 / 2.5.8

Prev/next buttons and dots sized at --ep-tap-min (44x44 minimum)

Usage

Import

tsxSnippet
import { Carousel } from "@epasslive/design-system"

Example 1

tsxSnippet
<Carousel slides={slides} />

Example 2

tsxSnippet
<Carousel slides={slides} locale="fr" height={320} />

Anti-patterns

— Do not fetch data directly in organisms

— Avoid tight coupling to specific data sources

— Do not use for multi-card rails — EventsRow is the scroll-snap sibling

Design System v4.1.0 | ePassLive