npm - @grafloria/element - Versions diffs - 0.3.17 → 0.3.19 - Mend

@grafloria/element 0.3.17 → 0.3.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1710) hide show

package/src/libs/renderer/src/a11y/reduced-motion.js ADDED Viewed

@@ -0,0 +1,223 @@
+"use strict";
+/**
+ * MOTION-PREFERENCE styles — and, more to the point, the code that actually
+ * INJECTS them.
+ *
+ * ## The dead-config bug this file exists to kill
+ *
+ * `libs/renderer/src/themes/reduced-motion.css` shipped 314 lines of careful
+ * accessibility CSS — reduced-motion fallbacks, epilepsy-safety iteration
+ * caps, performance/battery modes, a `.sr-only` recipe — and **nothing ever
+ * imported it**. Not the renderer, not the Angular host, not a bundler entry.
+ * It had never had any effect in production.
+ *
+ * Worse, it was load-bearing for a switch that DID run: `AnimationService`
+ * toggles `body.reduced-motion` whenever reduced motion is on
+ * (`animation.service.ts` → `updateAllAnimations`), and the ONLY rules for that
+ * class lived in the orphaned file. So the JS-driven path — a host turning
+ * reduced motion on from a settings toggle rather than the OS — suppressed
+ * nothing at all. The `@media (prefers-reduced-motion: reduce)` blocks
+ * elsewhere in the renderer only fire on the OS preference, so the product
+ * appeared to honour the setting while ignoring the app's own control.
+ *
+ * The CSS now lives here as a string, and `ensureMotionPreferenceStyles()` is
+ * called from `AnimationService.injectCSS()` — the same place the class is
+ * toggled. Config and consumption are finally in the same file.
+ *
+ * Wave 6 (a11y card 7).
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MOTION_PREFERENCE_CSS = exports.MOTION_PREFERENCE_STYLE_ID = void 0;
+exports.ensureMotionPreferenceStyles = ensureMotionPreferenceStyles;
+exports.removeMotionPreferenceStyles = removeMotionPreferenceStyles;
+const platform_1 = require("../platform/platform");
+/** Id of the injected `<style>` element. Idempotent by construction. */
+exports.MOTION_PREFERENCE_STYLE_ID = 'grafloria-motion-preferences';
+/**
+ * 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.
+ */
+exports.MOTION_PREFERENCE_CSS = `
+/* ==========================================================================
+   REDUCED MOTION — OS preference
+   ========================================================================== */
+@media (prefers-reduced-motion: reduce) {
+  .link-animated-marching-ants,
+  .link-animated-flow,
+  .link-animated-pulse {
+    animation: none !important;
+    stroke-dasharray: none !important;
+  }
+  .node-border-gradient,
+  .node-border-gradient::before,
+  .node-border-pulse,
+  .node-border-pulse-svg,
+  .node-border-breathe,
+  .node-border-shimmer,
+  .node-border-shimmer::after {
+    animation: none !important;
+  }
+  /* Status animations stop, but the STATIC indicator stays — a reduced-motion
+     user must not lose the information the animation was carrying. */
+  .node-status-running { animation: none !important; border-color: #3498db; box-shadow: 0 0 5px rgba(52, 152, 219, 0.5); }
+  .node-status-running-svg { animation: none !important; stroke: #3498db; filter: drop-shadow(0 0 5px rgba(52, 152, 219, 0.5)); }
+  .node-status-error { animation: none !important; border-color: #e74c3c; box-shadow: 0 0 5px rgba(231, 76, 60, 0.5); }
+  .node-status-error-svg { animation: none !important; stroke: #e74c3c; filter: drop-shadow(0 0 5px rgba(231, 76, 60, 0.5)); }
+  .node-status-completed { animation: none !important; border-color: #27ae60; opacity: 0.8; }
+  .node-status-completed-svg { animation: none !important; stroke: #27ae60; opacity: 0.8; }
+  .node-status-warning { animation: none !important; border-color: #f39c12; background-color: rgba(243, 156, 18, 0.1); }
+  .node-status-warning-svg { animation: none !important; stroke: #f39c12; fill-opacity: 0.1; }
+  .node-status-pending { animation: none !important; opacity: 0.85; }
+  .node-status-pending-svg { animation: none !important; opacity: 0.85; }
+  /* Interactive feedback stays, but effectively instant. */
+  .diagram-node,
+  .diagram-link {
+    transition: opacity 0.05s ease, transform 0.05s ease;
+  }
+  .node-border-gradient::before { background-position: 0% center; }
+  * { will-change: auto !important; }
+}
+/* ==========================================================================
+   REDUCED MOTION — the APP's own toggle (AnimationService sets this class).
+   These rules had no stylesheet at all before wave 6.
+   ========================================================================== */
+body.reduced-motion .diagram-node,
+body.reduced-motion .diagram-link,
+body.reduced-motion .link-animated-marching-ants,
+body.reduced-motion .link-animated-flow,
+body.reduced-motion .link-animated-pulse,
+body.reduced-motion .node-border-gradient,
+body.reduced-motion .node-border-gradient::before,
+body.reduced-motion .node-border-pulse,
+body.reduced-motion .node-border-pulse-svg,
+body.reduced-motion .node-border-breathe,
+body.reduced-motion .node-border-shimmer,
+body.reduced-motion .node-border-shimmer::after,
+body.reduced-motion .node-status-running,
+body.reduced-motion .node-status-running-svg,
+body.reduced-motion .node-status-error,
+body.reduced-motion .node-status-error-svg,
+body.reduced-motion .node-status-completed,
+body.reduced-motion .node-status-completed-svg,
+body.reduced-motion .node-status-warning,
+body.reduced-motion .node-status-warning-svg,
+body.reduced-motion .node-status-pending,
+body.reduced-motion .node-status-pending-svg {
+  animation: none !important;
+  transition: opacity 0.05s ease, transform 0.05s ease !important;
+}
+body.reduced-motion .link-animated-marching-ants,
+body.reduced-motion .link-animated-flow,
+body.reduced-motion .link-animated-pulse {
+  stroke-dasharray: none !important;
+}
+body.reduced-motion .node-border-gradient::before {
+  background-position: 0% center;
+}
+/* ==========================================================================
+   HIGH CONTRAST
+   ========================================================================== */
+@media (prefers-contrast: high) {
+  .node-border-gradient,
+  .node-border-shimmer { animation: none !important; }
+  .link-animated-marching-ants,
+  .link-animated-flow { animation-duration: 2s !important; }
+  .node-status-running,
+  .node-status-error,
+  .node-status-warning { border-width: 3px; }
+}
+/* ==========================================================================
+   PERFORMANCE / BATTERY MODES (also AnimationService body classes)
+   ========================================================================== */
+body.performance-mode .link-animated-marching-ants,
+body.performance-mode .link-animated-flow { animation-duration: 2s !important; }
+body.performance-mode .node-border-gradient,
+body.performance-mode .node-border-shimmer,
+body.performance-mode .node-border-pulse-svg { animation: none !important; }
+body.performance-mode .node-border-breathe { animation-duration: 5s !important; }
+body.battery-saving .link-animated-marching-ants,
+body.battery-saving .link-animated-flow,
+body.battery-saving .link-animated-pulse,
+body.battery-saving .node-border-gradient,
+body.battery-saving .node-border-shimmer,
+body.battery-saving .node-border-pulse,
+body.battery-saving .node-border-breathe { animation: none !important; }
+body.battery-saving .node-status-running,
+body.battery-saving .node-status-error { animation-duration: 3s !important; }
+/* ==========================================================================
+   EPILEPSY SAFETY — WCAG 2.3.1 (Three Flashes or Below Threshold)
+   ========================================================================== */
+.node-status-error { animation-iteration-count: 1; }
+.node-status-warning { animation-iteration-count: 3; }
+.link-animated-pulse,
+.node-status-running,
+.node-status-pending { animation-duration: 1.5s; }
+body.animations-paused * { animation-play-state: paused !important; }
+/* ==========================================================================
+   SCREEN-READER-ONLY
+   ========================================================================== */
+.grafloria-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border-width: 0;
+}
+`;
+/**
+ * Inject the motion-preference stylesheet once per document.
+ *
+ * Idempotent and SSR-safe: no document → no-op, and a second call finds the
+ * existing element by id and returns it.
+ */
+function ensureMotionPreferenceStyles(doc) {
+    var _a;
+    const target = doc !== null && doc !== void 0 ? doc : (0, platform_1.getDocument)();
+    if (!target)
+        return undefined;
+    const existing = target.getElementById(exports.MOTION_PREFERENCE_STYLE_ID);
+    if (existing)
+        return existing;
+    const style = target.createElement('style');
+    style.id = exports.MOTION_PREFERENCE_STYLE_ID;
+    style.textContent = exports.MOTION_PREFERENCE_CSS;
+    ((_a = target.head) !== null && _a !== void 0 ? _a : target.documentElement).appendChild(style);
+    return style;
+}
+/** Remove the injected stylesheet (teardown / tests). */
+function removeMotionPreferenceStyles(doc) {
+    var _a;
+    const target = doc !== null && doc !== void 0 ? doc : (0, platform_1.getDocument)();
+    (_a = target === null || target === void 0 ? void 0 : target.getElementById(exports.MOTION_PREFERENCE_STYLE_ID)) === null || _a === void 0 ? void 0 : _a.remove();
+}
+//# sourceMappingURL=reduced-motion.js.map

package/src/libs/renderer/src/a11y/reduced-motion.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"reduced-motion.js","sourceRoot":"","sources":["../../../../../../renderer/src/a11y/reduced-motion.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;;;AA+KH,oEAYC;AAGD,oEAGC;AA/LD,mDAAmD;AAEnD,wEAAwE;AAC3D,QAAA,0BAA0B,GAAG,8BAA8B,CAAC;AAEzE;;;;;;;;GAQG;AACU,QAAA,qBAAqB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuJpC,CAAC;AAEF;;;;;GAKG;AACH,SAAgB,4BAA4B,CAAC,GAAc;;IACzD,MAAM,MAAM,GAAG,GAAG,aAAH,GAAG,cAAH,GAAG,GAAI,IAAA,sBAAW,GAAE,CAAC;IACpC,IAAI,CAAC,MAAM;QAAE,OAAO,SAAS,CAAC;IAE9B,MAAM,QAAQ,GAAG,MAAM,CAAC,cAAc,CAAC,kCAA0B,CAAC,CAAC;IACnE,IAAI,QAAQ;QAAE,OAAO,QAA4B,CAAC;IAElD,MAAM,KAAK,GAAG,MAAM,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC5C,KAAK,CAAC,EAAE,GAAG,kCAA0B,CAAC;IACtC,KAAK,CAAC,WAAW,GAAG,6BAAqB,CAAC;IAC1C,CAAC,MAAA,MAAM,CAAC,IAAI,mCAAI,MAAM,CAAC,eAAe,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IAC3D,OAAO,KAAK,CAAC;AACf,CAAC;AAED,yDAAyD;AACzD,SAAgB,4BAA4B,CAAC,GAAc;;IACzD,MAAM,MAAM,GAAG,GAAG,aAAH,GAAG,cAAH,GAAG,GAAI,IAAA,sBAAW,GAAE,CAAC;IACpC,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,cAAc,CAAC,kCAA0B,CAAC,0CAAE,MAAM,EAAE,CAAC;AAC/D,CAAC"}

package/src/libs/renderer/src/a11y/semantics.d.ts ADDED Viewed

@@ -0,0 +1,76 @@
+import type { DiagramEngine, NodeModel, LinkModel } from '@grafloria/engine';
+/**
+ * The SEMANTIC layer: what a node/edge/diagram *is* to an assistive technology.
+ *
+ * These are pure functions over the model. They are called from the renderer
+ * while it builds the VNode tree — NOT from a DOM post-pass — so the semantics
+ * are part of the tree itself and therefore survive SSR (`renderToStaticSVG`)
+ * and headless export unchanged. A screen reader reading a server-rendered SVG
+ * gets exactly what it gets in the live canvas.
+ *
+ * Wave 6 (a11y card 0).
+ */
+/** Roles we emit. `graphics-*` come from the W3C Graphics ARIA module. */
+export declare const DIAGRAM_ROLE = "graphics-document";
+export declare const NODE_ROLE = "graphics-symbol";
+export declare const EDGE_ROLE = "graphics-symbol";
+/** Humanise an unknown type: `my_customNode` → "My custom node". */
+export declare function humaniseType(type: string | undefined): string;
+/** The `aria-roledescription` for a node — its SHAPE, in human words. */
+export declare function nodeRoleDescription(node: NodeModel): string;
+/** The `aria-roledescription` for an edge. Respects the link's own semantics. */
+export declare function edgeRoleDescription(link: LinkModel): string;
+/** The `aria-roledescription` for the whole canvas. */
+export declare function diagramRoleDescription(diagramType?: string): string;
+/**
+ * A node's human NAME: its label, else its type + a short id.
+ * Single source of truth — the renderer's `aria-label`, the keyboard
+ * controller's announcements, and the outline text-mirror all call THIS, so a
+ * node can never be called two different things by two different surfaces.
+ */
+export declare function nodeName(node: NodeModel): string;
+/** A link's own label text, if it carries one. */
+export declare function linkLabelText(link: LinkModel): string | undefined;
+export declare function sourceNodeIdOf(link: LinkModel, diagram: DiagramLike): string;
+export declare function targetNodeIdOf(link: LinkModel, diagram: DiagramLike): string;
+/** The minimum of DiagramModel these pure functions need. */
+export interface DiagramLike {
+    getNode(id: string): NodeModel | undefined;
+    getNodes(): NodeModel[];
+    getLink(id: string): LinkModel | undefined;
+    getLinks(): LinkModel[];
+    getNodeByPortId?(portId: string): NodeModel | undefined;
+    getGroups?(): unknown[];
+}
+/**
+ * A node's ACCESSIBLE NAME — what the screen reader reads on focus.
+ *
+ * "Decision, Is order valid?, 1 incoming, 2 outgoing, selected"
+ *
+ * The degree counts are the position context an AT user cannot get any other
+ * way: sighted users see the edges converging on a shape; a screen-reader user
+ * is told.
+ */
+export declare function nodeAccessibleName(node: NodeModel, diagram?: DiagramLike): string;
+/**
+ * An edge's ACCESSIBLE NAME. THE headline gap this card closes: before wave 6
+ * the renderer emitted no ARIA at all on links, so every edge in every diagram
+ * was invisible to a screen reader — the graph read as a bag of disconnected
+ * shapes, which is precisely the information a diagram exists to convey.
+ *
+ * "Edge from Start to Is order valid?, labelled yes, selected"
+ */
+export declare function edgeAccessibleName(link: LinkModel, diagram: DiagramLike): string;
+/** Incoming / outgoing degree of a node. Self-loops count on both sides. */
+export declare function degreeOf(nodeId: string, diagram: DiagramLike): {
+    incoming: number;
+    outgoing: number;
+};
+/**
+ * The canvas's own accessible name: "Diagram, 12 nodes, 14 edges".
+ * Read when focus first enters the canvas, so the user knows the size of what
+ * they have landed in before they start walking it.
+ */
+export declare function diagramAccessibleName(diagram: DiagramLike, title?: string): string;
+/** Resolve the diagram off an engine, tolerating a bare DiagramModel. */
+export declare function diagramOf(engine: DiagramEngine | DiagramLike | undefined): DiagramLike | undefined;

package/src/libs/renderer/src/a11y/semantics.js ADDED Viewed

@@ -0,0 +1,229 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EDGE_ROLE = exports.NODE_ROLE = exports.DIAGRAM_ROLE = void 0;
+exports.humaniseType = humaniseType;
+exports.nodeRoleDescription = nodeRoleDescription;
+exports.edgeRoleDescription = edgeRoleDescription;
+exports.diagramRoleDescription = diagramRoleDescription;
+exports.nodeName = nodeName;
+exports.linkLabelText = linkLabelText;
+exports.sourceNodeIdOf = sourceNodeIdOf;
+exports.targetNodeIdOf = targetNodeIdOf;
+exports.nodeAccessibleName = nodeAccessibleName;
+exports.edgeAccessibleName = edgeAccessibleName;
+exports.degreeOf = degreeOf;
+exports.diagramAccessibleName = diagramAccessibleName;
+exports.diagramOf = diagramOf;
+/**
+ * The SEMANTIC layer: what a node/edge/diagram *is* to an assistive technology.
+ *
+ * These are pure functions over the model. They are called from the renderer
+ * while it builds the VNode tree — NOT from a DOM post-pass — so the semantics
+ * are part of the tree itself and therefore survive SSR (`renderToStaticSVG`)
+ * and headless export unchanged. A screen reader reading a server-rendered SVG
+ * gets exactly what it gets in the live canvas.
+ *
+ * Wave 6 (a11y card 0).
+ */
+/** Roles we emit. `graphics-*` come from the W3C Graphics ARIA module. */
+exports.DIAGRAM_ROLE = 'graphics-document';
+exports.NODE_ROLE = 'graphics-symbol';
+exports.EDGE_ROLE = 'graphics-symbol';
+/**
+ * A shape's human roledescription — what the AT says INSTEAD of the raw role.
+ * "Decision" is infinitely more useful than "graphics-symbol".
+ *
+ * Keyed by node `type` (the flowchart/BPMN/ERD vocabulary the engine already
+ * uses). Unknown types fall back to a humanised form of the type itself, so a
+ * custom node type is never described as a bare "symbol".
+ */
+const NODE_ROLEDESCRIPTIONS = {
+    start: 'Start',
+    end: 'End',
+    terminator: 'Terminator',
+    process: 'Process',
+    decision: 'Decision',
+    input: 'Input',
+    output: 'Output',
+    inputoutput: 'Input/Output',
+    data: 'Data',
+    document: 'Document',
+    database: 'Database',
+    subprocess: 'Subprocess',
+    predefined: 'Predefined process',
+    manual: 'Manual operation',
+    preparation: 'Preparation',
+    connector: 'Connector',
+    delay: 'Delay',
+    display: 'Display',
+    merge: 'Merge',
+    entity: 'Entity',
+    relationship: 'Relationship',
+    table: 'Table',
+    class: 'Class',
+    actor: 'Actor',
+    usecase: 'Use case',
+    state: 'State',
+    event: 'Event',
+    gateway: 'Gateway',
+    task: 'Task',
+    group: 'Group',
+    container: 'Container',
+    note: 'Note',
+    comment: 'Comment',
+};
+/** Humanise an unknown type: `my_customNode` → "My custom node". */
+function humaniseType(type) {
+    if (!type)
+        return 'Node';
+    const spaced = type
+        .replace(/[-_]+/g, ' ')
+        .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+        .trim()
+        .toLowerCase();
+    if (!spaced)
+        return 'Node';
+    return spaced.charAt(0).toUpperCase() + spaced.slice(1);
+}
+/** The `aria-roledescription` for a node — its SHAPE, in human words. */
+function nodeRoleDescription(node) {
+    var _a;
+    const type = (node.type || '').toLowerCase();
+    return (_a = NODE_ROLEDESCRIPTIONS[type]) !== null && _a !== void 0 ? _a : humaniseType(node.type);
+}
+/** The `aria-roledescription` for an edge. Respects the link's own semantics. */
+function edgeRoleDescription(link) {
+    var _a, _b, _c;
+    const kind = ((_b = (_a = link.data) === null || _a === void 0 ? void 0 : _a['kind']) !== null && _b !== void 0 ? _b : (_c = link.data) === null || _c === void 0 ? void 0 : _c['type']);
+    if (typeof kind === 'string' && kind.trim())
+        return humaniseType(kind);
+    return 'Edge';
+}
+/** The `aria-roledescription` for the whole canvas. */
+function diagramRoleDescription(diagramType) {
+    if (diagramType && diagramType.trim())
+        return `${humaniseType(diagramType)} diagram`;
+    return 'Diagram';
+}
+/**
+ * A node's human NAME: its label, else its type + a short id.
+ * Single source of truth — the renderer's `aria-label`, the keyboard
+ * controller's announcements, and the outline text-mirror all call THIS, so a
+ * node can never be called two different things by two different surfaces.
+ */
+function nodeName(node) {
+    var _a;
+    const label = (_a = node.getMetadata) === null || _a === void 0 ? void 0 : _a.call(node, 'label');
+    if (typeof label === 'string' && label.trim().length > 0)
+        return label.trim();
+    const styleLabel = node.label;
+    if (typeof styleLabel === 'string' && styleLabel.trim().length > 0)
+        return styleLabel.trim();
+    return `${node.type || 'node'} ${String(node.id).slice(0, 4)}`;
+}
+/** A link's own label text, if it carries one. */
+function linkLabelText(link) {
+    const labels = link.labels;
+    if (Array.isArray(labels)) {
+        for (const l of labels) {
+            const text = l === null || l === void 0 ? void 0 : l.text;
+            if (typeof text === 'string' && text.trim())
+                return text.trim();
+        }
+    }
+    return undefined;
+}
+function sourceNodeIdOf(link, diagram) {
+    var _a, _b, _c, _d;
+    return (_d = (_a = link.sourceNodeId) !== null && _a !== void 0 ? _a : (_c = (_b = diagram.getNodeByPortId) === null || _b === void 0 ? void 0 : _b.call(diagram, link.sourcePortId)) === null || _c === void 0 ? void 0 : _c.id) !== null && _d !== void 0 ? _d : '';
+}
+function targetNodeIdOf(link, diagram) {
+    var _a, _b, _c, _d;
+    return (_d = (_a = link.targetNodeId) !== null && _a !== void 0 ? _a : (_c = (_b = diagram.getNodeByPortId) === null || _b === void 0 ? void 0 : _b.call(diagram, link.targetPortId)) === null || _c === void 0 ? void 0 : _c.id) !== null && _d !== void 0 ? _d : '';
+}
+/**
+ * A node's ACCESSIBLE NAME — what the screen reader reads on focus.
+ *
+ * "Decision, Is order valid?, 1 incoming, 2 outgoing, selected"
+ *
+ * The degree counts are the position context an AT user cannot get any other
+ * way: sighted users see the edges converging on a shape; a screen-reader user
+ * is told.
+ */
+function nodeAccessibleName(node, diagram) {
+    var _a, _b, _c, _d, _e;
+    const bits = [nodeRoleDescription(node), nodeName(node)];
+    if (diagram) {
+        const { incoming, outgoing } = degreeOf(node.id, diagram);
+        bits.push(`${incoming} incoming`, `${outgoing} outgoing`);
+    }
+    if ((_a = node.isSelected) === null || _a === void 0 ? void 0 : _a.call(node))
+        bits.push('selected');
+    if ((_b = node.state) === null || _b === void 0 ? void 0 : _b.highlighted)
+        bits.push('highlighted');
+    if ((_c = node.state) === null || _c === void 0 ? void 0 : _c.error)
+        bits.push('error');
+    if ((_d = node.state) === null || _d === void 0 ? void 0 : _d.locked)
+        bits.push('locked');
+    if (((_e = node.state) === null || _e === void 0 ? void 0 : _e.enabled) === false)
+        bits.push('disabled');
+    return bits.join(', ');
+}
+/**
+ * An edge's ACCESSIBLE NAME. THE headline gap this card closes: before wave 6
+ * the renderer emitted no ARIA at all on links, so every edge in every diagram
+ * was invisible to a screen reader — the graph read as a bag of disconnected
+ * shapes, which is precisely the information a diagram exists to convey.
+ *
+ * "Edge from Start to Is order valid?, labelled yes, selected"
+ */
+function edgeAccessibleName(link, diagram) {
+    const source = diagram.getNode(sourceNodeIdOf(link, diagram));
+    const target = diagram.getNode(targetNodeIdOf(link, diagram));
+    const bits = [
+        `Edge from ${source ? nodeName(source) : 'unknown'} to ${target ? nodeName(target) : 'unknown'}`,
+    ];
+    const label = linkLabelText(link);
+    if (label)
+        bits.push(`labelled ${label}`);
+    if (link.state === 'selected')
+        bits.push('selected');
+    if (link.state === 'highlighted')
+        bits.push('highlighted');
+    return bits.join(', ');
+}
+/** Incoming / outgoing degree of a node. Self-loops count on both sides. */
+function degreeOf(nodeId, diagram) {
+    let incoming = 0;
+    let outgoing = 0;
+    for (const link of diagram.getLinks()) {
+        if (targetNodeIdOf(link, diagram) === nodeId)
+            incoming++;
+        if (sourceNodeIdOf(link, diagram) === nodeId)
+            outgoing++;
+    }
+    return { incoming, outgoing };
+}
+/**
+ * The canvas's own accessible name: "Diagram, 12 nodes, 14 edges".
+ * Read when focus first enters the canvas, so the user knows the size of what
+ * they have landed in before they start walking it.
+ */
+function diagramAccessibleName(diagram, title) {
+    const nodes = diagram.getNodes().length;
+    const links = diagram.getLinks().length;
+    const head = title && title.trim() ? title.trim() : 'Diagram';
+    return `${head}, ${nodes} node${nodes === 1 ? '' : 's'}, ${links} edge${links === 1 ? '' : 's'}`;
+}
+/** Resolve the diagram off an engine, tolerating a bare DiagramModel. */
+function diagramOf(engine) {
+    if (!engine)
+        return undefined;
+    const asEngine = engine;
+    if (typeof asEngine.getDiagram === 'function') {
+        return asEngine.getDiagram();
+    }
+    const asDiagram = engine;
+    return typeof asDiagram.getNodes === 'function' ? asDiagram : undefined;
+}
+//# sourceMappingURL=semantics.js.map

package/src/libs/renderer/src/a11y/semantics.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"semantics.js","sourceRoot":"","sources":["../../../../../../renderer/src/a11y/semantics.ts"],"names":[],"mappings":"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"}