Skip to content
D
Documentation

A11y — constants

reference
1 min readUpdated

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"

Was this page helpful?

A11y — constants — Grafloria