Content
Pillar carousel
Numbered cards that scroll sideways, with previous and next buttons beside the heading and the next card peeking in at the edge. Used for the Mission objectives.
Source: components/PillarCarousel.tsx, styles/components.css (.pillars)
Live
Art Deco
Objectives
Watch legislation
To serve as a watchdog of legislation or practices that may affect Deaf, Hard of Hearing, and Late Deafened individuals.
Promote devices
To promote the use of communication devices.
Raise awareness
To promote awareness of communication difficulties and methods.
Sunrise
Objectives
Watch legislation
To serve as a watchdog of legislation or practices that may affect Deaf, Hard of Hearing, and Late Deafened individuals.
Promote devices
To promote the use of communication devices.
Raise awareness
To promote awareness of communication difficulties and methods.
Accessibility
- A labelled carousel region; each card is a slide that reads 'n of N'.
- Previous and next are 48 px buttons that step one card. They stay focusable at either end (aria-disabled) so focus is never dropped.
- The track scrolls with the keyboard and by touch. Nothing moves on its own, and stepping is instant under reduced motion.
Props
| Name | Type | Note |
|---|---|---|
| heading | ReactNode | The title (and any lead-in) at the left of the controls. |
| label | string | Names the carousel for assistive technology. |
| items | { title: string; body: string }[] | One card each. Numbered 01, 02 and so on. |