# Constants

Import these from `@grafloria/renderer`.

## Constants

### `DIAGRAM_ROLE`

Roles we emit. `graphics-*` come from the W3C Graphics ARIA module.

```ts
const DIAGRAM_ROLE: "graphics-document"
```

### `EDGE_ROLE`

```ts
const EDGE_ROLE: "graphics-symbol"
```

### `MOTION_PREFERENCE_CSS`

Reduced motion, high contrast, performance/battery modes, epilepsy safety,
and the screen-reader-only recipe.

Two routes to the same behaviour, deliberately:
  - `@media (prefers-reduced-motion: reduce)` — the OS preference;
  - `.reduced-motion` on `<body>` — the APP's own toggle, which is what
    `AnimationService` sets. Both must work; only the first used to.

```ts
const MOTION_PREFERENCE_CSS: "\n/* ==========================================================================\n   REDUCED MOTION — OS preference\n   ========================================================================== */\n@media (prefers-reduced-motion: reduce) {\n  .link-animated-marching-ants,\n  .link-animated-flow,\n  .link-animated-pulse {\n    animation: none !important;\n    stroke-dasharray: none !important;\n  }\n\n  .node-border-gradient,\n  .node-border-gradient::before,\n  .node-border-pulse,\n  .node-border-pulse-svg,\n  .node-border-breathe,\n  .node-border-shimmer,\n  …
```

### `MOTION_PREFERENCE_STYLE_ID`

Id of the injected `<style>` element. Idempotent by construction.

```ts
const MOTION_PREFERENCE_STYLE_ID: "grafloria-motion-preferences"
```

### `NODE_ROLE`

```ts
const NODE_ROLE: "graphics-symbol"
```