Tag accessibility

WCAG 2.1 AA requirements

Semantics

• Tag renders as a <span> with inline text. Screen readers treat it as static content.
• The remove button inside has aria-label="Remove" so assistive tech announces it.

Keyboard interaction

• The remove button is focusable via Tab and activates on Enter or Space.
• Focus ring is visible on keyboard focus (focus-visible).

Colour is never the only signal

• Each variant uses both background colour and text label. Never rely on colour alone.
• The destructive variant should include descriptive text like "Error" or "Invalid".

Contrast

• All variant colours meet 4.5:1 contrast in both light and dark themes.
• Custom className overrides must be verified for contrast manually.

Audit checklist

• Tag text is descriptive (not colour-only meaning)
• 4.5:1 contrast on every variant in light and dark
• Remove button has aria-label="Remove"
• Remove button is keyboard-reachable and has visible focus ring