Notification

Usage

Render one Notification per item inside your notification surface; the surrounding list owns grouping, filtering, and dismissal state. title and timestamp are required with no defaults — a bare <Notification /> crashes in getInitials(undefined).

import { Notification } from '@epasslive/design-system'

<Notification
  id="notif-transfer"
  title="Ticket transfer received"
  body="Marie-Claude sent you 2 tickets."
  timestamp="2026-08-24T18:30"
  unread
/>

Alert vs. Toast vs. Notification

Three feedback surfaces overlap; pick by persistence and who owns the announcement. Rule of thumb: in-flow status → Alert, transient overlay → Toast, durable per-user feed item → Notification.

Badge is the fourth neighbor: use it for the count on the bell trigger, not for the rows behind it.

Container contract: announcements & focus

Each row renders role="article" with aria-labelledby (title) and aria-describedby (body). The molecule never announces itself — there is no live region on the row. The surrounding list or dropdown must own aria-live="polite" (or role="log") so newly arriving rows are announced exactly once. Do not add per-row role="status": under a live container it double-announces every row.

onDismiss(id) only reports — the parent owns removal. After removing a row, move focus to the next remaining row, or back to the trigger (the bell button) when the list empties. Removing the focused row without re-focusing drops the screen-reader cursor to the top of the page.

// The container — not the molecule — owns aria-live and focus return.
<ul aria-live="polite" className="divide-y divide-ep-border-subtle">
  {items.map((n) => (
    <li key={n.id}>
      <Notification
        {...n}
        onDismiss={dismiss}
        dismissLabel={t('notifications.dismiss')}
      />
    </li>
  ))}
</ul>

// In dismiss(id): filter the row out, then move focus to the
// next row (or the bell trigger if the feed is now empty).

Internationalization

• dismissLabel is required in practice with onDismiss. The dismiss button falls back to the English Dismiss notification {title}. On French pages that leaks English into the accessible name — always pass a localized dismissLabel from your i18n layer. (The storefront catalogs do not ship a notifications.dismiss key yet; pass the translated string at the call site.)
• Timestamps render raw ISO. timestamp prints verbatim (2026-08-24T18:30) — machine format, never localized. Do not pass a pre-formatted locale string (24 août 2026): it fails ISO-8601 validation and silently drops the <time> element. Localized display needs a dedicated display-label prop (planned, not yet in the interface) or a client-side wrapper that formats via Intl.

Known issues

The href variant (demoed in row 2 above) ships two WCAG defects that are scheduled for the component fix pass — documented here so the demo is not mistaken for a clean accessibility reference:

• The anchor variant renders <a role="article"> — the role overrides the anchor's implicit link semantics, so screen readers announce "article" instead of "link" (WCAG 4.1.2). Fix planned: drop the role override on the anchor variant.
• Do not combine href with onDismiss yet. The dismiss <button> renders inside the anchor — nested interactive elements, invalid HTML, ambiguous hit targets. Until fixed, render link rows without a dismiss button (or plain rows with dismiss).
• The dismiss affordance is below tap minimum and hover-revealed — a 24×24 px target (vs --ep-tap-min 44 px, WCAG 2.5.5) revealed only on hover/focus, so it is invisible on touch. Also scheduled for the fix pass.

Props