Accessibility
Swatch from @prepared911/ui/swatch exposes the same meaningful vs decorative contract as Shape and Image inline SVG. Paint tokens and DataColor do not replace accessible naming.
| Mode | Props | DOM |
|---|---|---|
| Meaningful | label (LocalizedMessage); decorative omitted or false | Root svg has role="img" and aria-label from label. |
| Decorative | decorative: true | Root svg has aria-hidden="true" and focusable="false"; no role="img". |
label and decorative: true, or neither, is a type error.
In legend rows, tooltips, and layer lists, the adjacent Text (or equivalent) names the series. Set decorative: true on the swatch so assistive tech reads the name once from the label, not again from the graphic.
Use meaningful mode (label) only when no neighboring copy names the mark (for example a swatch-only control). Write label as you would for a small Shape graphic.
Series keys must remain identifiable when hue is ambiguous. Swatch encodes that in geometry:
Pattern variants add dashes, dots, hatch, or vertex markers so comparison and GIS symbology do not rely on color alone.fill and stroke against the surface behind the svg. Token and ChartColor paint follow the theme; vendor DataColor values are not tuned for your background. On busy map or chart chrome, add a token stroke outline or choose a shape or pattern that stays visible in context.
Swatch and vector-paint styles do not define @media (forced-colors) overrides. High-contrast mode uses the browser default SVG painting; do not assume token or data colors survive unchanged.