Shape

Accessibility

Shape from @prepared911/ui/shape exposes the same meaningful vs decorative contract as Image inline SVG. Paint tokens do not replace accessible naming.

Meaningful vs decorative

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"`.

Passing both label and decorative: true, or neither, is a type error.

What you must provide

Name or hide. Every instance is either labelled for assistive tech or explicitly decorative. Decorative shapes still need visible text nearby when they convey information (legend rows, map chrome).
Color is never the only carrier of meaning. Pair fill or stroke with labels, tooltips, or list copy. This applies to token paint and DataColor alike.
Contrast. Verify fill and stroke against the surface behind the svg. Token paint follows the theme; vendor DataColor values are not tuned for your background. Add a token stroke outline when a mark sits on busy map or chart chrome.

What the component does not handle

Forced colors. Shape and vector-paint styles do not define @media (forced-colors) overrides. High-contrast mode uses the browser default SVG painting; do not assume token colors survive unchanged.
Motion. Shape does not animate path or paint; no reduced-motion hook is required on the component itself.

Shape / API and Development

Shimmer / Usage

On this page

Meaningful vs decorative

What you must provide

What the component does not handle

Shape

Accessibility

Shape from @prepared911/ui/shape exposes the same meaningful vs decorative contract as Image inline SVG. Paint tokens do not replace accessible naming.

Meaningful vs decorative

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"`.

Passing both label and decorative: true, or neither, is a type error.

What you must provide

Name or hide. Every instance is either labelled for assistive tech or explicitly decorative. Decorative shapes still need visible text nearby when they convey information (legend rows, map chrome).
Color is never the only carrier of meaning. Pair fill or stroke with labels, tooltips, or list copy. This applies to token paint and DataColor alike.
Contrast. Verify fill and stroke against the surface behind the svg. Token paint follows the theme; vendor DataColor values are not tuned for your background. Add a token stroke outline when a mark sits on busy map or chart chrome.

What the component does not handle

Forced colors. Shape and vector-paint styles do not define @media (forced-colors) overrides. High-contrast mode uses the browser default SVG painting; do not assume token colors survive unchanged.
Motion. Shape does not animate path or paint; no reduced-motion hook is required on the component itself.

Shape / API and Development

Shimmer / Usage

On this page

Meaningful vs decorative

What you must provide

What the component does not handle