Skip to main content

ClosingBand

Implemented

Fused closing band for the homepage (HV2 / R8, ADR-061): three numbered steps plus the help panel in ONE section. Numerals are decorative (aria-hidden) with no progress semantics; the support address is a real mailto link and the sell action renders as aria-disabled text until its page exists (D11 / O6). Copy is entirely consumer-supplied.

Categoryorganisms
Sourcecomponents/organisms/ClosingBand/ClosingBand.tsx

Catalog fallback

Live MDX preview not available for ClosingBand. Showing component catalog metadata instead.

Props

Preview

ClosingBand

Prop
Type
Required
Default
Description
heading
string
Required
—

Band heading (h2).

headingId
string
Optional
'ep-closing-band-heading'

id used by the section's aria-labelledby.

steps
ClosingBandStep[]
Required
—

Ordered steps — { title, description }. Rendered as <li> with a decorative numeral.

help
ClosingBandHelp
Required
—

Help panel — { heading, line, emailLabel, emailHref, sellLabel? }. sellLabel renders non-interactive (aria-disabled, no href).

className
string
Optional
—

Additional CSS classes on the section.

Quick use:<ClosingBand />

Accessibility

ARIA roleregion

ARIA

1 rule

WCAG 1.3.1 / 4.1.2

One section labelled by its own heading; step titles are h3 inside an ol; numerals aria-hidden

behavior

1 rule

D11 / O6

sellLabel is never a link (no dead link); the mailto is the only action

Design System v4.1.0 | ePassLive