NotificationBadge

WCAG 2.1 AA — release blocker

Web (React DOM)

• The badge is decorative. Always surface the count via the parent element's aria-label — e.g. aria-label="Notifications, 5 unread".
• dot mode renders <span aria-hidden> — purely visual, the parent must carry the meaning.
• Count mode renders the text visibly but the count should still appear in the parent's accessible name so screen readers don't have to compose it from siblings.
• 4.5:1 contrast verified for every tone × light/dark.

React Native

• The host element must pass accessibilityLabel with the count baked in.
• The badge view doesn't carry a role — it's a visual overlay.

Reduced motion

The badge has no transitions; nothing to honour beyond the system default.

Color is never the only signal

• The count itself is the second channel. Tone alone shouldn't carry "alert" vs "info" — the parent affordance + count text disambiguates.

Audit checklist

• Parent has aria-label / accessibilityLabel with the unread count.
• 4.5:1 contrast across all tones × light/dark.
• Badge hides when count={0} so screen readers don't announce an empty overlay.