StatusBadge

WCAG 2.1 AA — release blocker

Web (React DOM)

• Renders a plain <span> — no role override.
• The chip is decorative when it sits next to its associated row label (e.g. "Reports access — Permission set"). The surrounding row provides the accessible context.
• When the chip stands alone (in a card heading, a status pill on a card), pass aria-label so screen-reader users know the state.
• Color contrast on every tone verified ≥ 4.5:1 against its background.

React Native

• Renders View + Text. No accessibility role by default.
• Same standalone rule applies: pass accessibilityLabel if the chip carries the meaning by itself.

Color is never the only signal

• The optional icon is the second channel. Use it whenever the chip is standalone.
• Tone-only chips ("Active", "Pending") are fine in dense table rows where the text label already disambiguates.

Audit checklist

• 4.5:1 contrast on every tone × light/dark.
• Standalone chips have aria-label / accessibilityLabel.
• Icon present when colour alone could be ambiguous (success / warning pair).