@progress/kendo-charts 2.4.0-dev.202405201104 → 2.4.0-dev.202405211537

package/dist/es/chart/legend/legend-item.js

@@ -251,7 +251,7 @@ var LegendItem = (function (BoxElement) {
 
         if (this.options.visible) {
             var accessibilityOptions = deepExtend({
-                ariaLabel: options.text
+                ariaLabel: options.accessibility.ariaLabel !== undefined ? options.accessibility.ariaLabel : options.text
             }, options.accessibility);
 
             addAccessibilityAttributesToVisual(this.visual, accessibilityOptions);

package/dist/es/sankey/legend.js

@@ -64,6 +64,11 @@ setDefaultOptions(Legend, {
     },
     position: BOTTOM,
     align: CENTER,
+    accessibility: {
+        role: 'presentation',
+        ariaLabel: null,
+        ariaRoleDescription: null
+    },
     border: {
         width: 0
     }

package/dist/es/sankey/link.js

@@ -2,6 +2,82 @@ import { drawing } from '@progress/kendo-drawing';
 import { SankeyElement } from './element';
 import { deepExtend } from '../common';
 import { defined } from '../drawing-utils';
+import { ARIA_ACTIVE_DESCENDANT } from '../common/constants';
+
+var distanceToLine = function (line, point) {
+    var ref = line[0];
+    var x1 = ref[0];
+    var y1 = ref[1];
+    var ref$1 = line[1];
+    var x2 = ref$1[0];
+    var y2 = ref$1[1];
+    var x3 = point[0];
+    var y3 = point[1];
+
+    return Math.abs((x2 - x1) * (y3 - y1) - (x3 - x1) * (y2 - y1)) / Math.sqrt(Math.pow( (x2 - x1), 2 ) + Math.pow( (y2 - y1), 2 ));
+};
+
+var bezierPoint = function (p1, p2, p3, p4, t) {
+    var t1 = 1 - t;
+    var t1t1 = t1 * t1;
+    var tt = t * t;
+    return (p1 * t1t1 * t1) + (3 * p2 * t * t1t1) + (3 * p3 * tt * t1) + (p4 * tt * t);
+};
+
+var angelBetweenTwoLines = function (line1, line2) {
+    var ref = line1[0];
+    var x1 = ref[0];
+    var y1 = ref[1];
+    var ref$1 = line1[1];
+    var x2 = ref$1[0];
+    var y2 = ref$1[1];
+    var ref$2 = line2[0];
+    var x3 = ref$2[0];
+    var y3 = ref$2[1];
+    var ref$3 = line2[1];
+    var x4 = ref$3[0];
+    var y4 = ref$3[1];
+
+    var a1 = Math.atan2(y2 - y1, x2 - x1);
+    var a2 = Math.atan2(y4 - y3, x4 - x3);
+
+    return Math.abs(a1 - a2);
+};
+
+var calculateControlPointsOffsetX = function (link) {
+    var x0 = link.x0;
+    var x1 = link.x1;
+    var y0 = link.y0;
+    var y1 = link.y1;
+    var xC = (x0 + x1) / 2;
+
+    var width = link.width;
+    var halfWidth = width / 2;
+
+    // upper curve, t = 0.5
+    var upperCurveMiddleLine = [[(x0 + xC) / 2, y0 - halfWidth], [(x1 + xC) / 2, y1 - halfWidth]];
+
+    // for lower curve, bezier-point at t = 0.5
+    // for the case t = 0.5, the bezier-point is the middle point of the curve. => ((y0 + halfWidth) + (y1 + halfWidth)) / 2
+    var lowerCurveMiddlePoint = [xC, bezierPoint(y0 + halfWidth, y0 + halfWidth, y1 + halfWidth, y1 + halfWidth, 0.5)];
+
+    // The actual width of the link at its middle point as can be seen on the screen.
+    var actualWidth = distanceToLine(upperCurveMiddleLine, lowerCurveMiddlePoint);
+
+    var upperNarrowness = (width - actualWidth) / 2;
+
+    // The line `upperCurveMiddleLine` shows the upper border of the link.
+    // Assumption 1: Translated to the left to the desired link width and the translate value will be the `offset`.
+    // Assumption 2: The translate value is a hypotenuse of a triangle.
+    var alpha = angelBetweenTwoLines(upperCurveMiddleLine, [[x0, y0 - halfWidth], [xC, y0 - halfWidth]]);
+    var a = upperNarrowness;
+    var b = Math.sin(alpha) * a;
+    var offset = Math.sqrt(a * a + b * b);
+    // Another option is to assume the triangle is isosceles
+    // => offset = Math.sqrt(2) * upperNarrowness;
+
+    return y0 - y1 > 0 ? (-1) * offset : offset;
+};
 
 export var Link = (function (SankeyElement) {
     function Link () {
@@ -24,18 +100,80 @@ export var Link = (function (SankeyElement) {
             .moveTo(x0, y0).curveTo([xC, y0], [xC, y1], [x1, y1]);
     };
 
+    Link.prototype.getLabelText = function getLabelText (options) {
+        var labelTemplate = options.labels.ariaTemplate;
+
+        if (labelTemplate) {
+            return labelTemplate({ link: options.link });
+        }
+    };
+
     Link.prototype.visualOptions = function visualOptions () {
         var options = this.options;
         var link = this.options.link;
+        var ariaLabel = this.getLabelText(options);
+
         return {
             stroke: {
                 width: options.link.width,
                 color: link.color || options.color,
                 opacity: defined(link.opacity) ? link.opacity : options.opacity
-            }
+            },
+            role: 'graphics-symbol',
+            ariaRoleDescription: 'Link',
+            ariaLabel: ariaLabel
         };
     };
 
+    Link.prototype.createFocusHighlight = function createFocusHighlight () {
+        if (!this.options.navigatable) {
+            return;
+        }
+        var link = this.options.link;
+        var x0 = link.x0;
+        var x1 = link.x1;
+        var y0 = link.y0;
+        var y1 = link.y1;
+        var xC = (x0 + x1) / 2;
+        var halfWidth = link.width / 2;
+
+        var offset = calculateControlPointsOffsetX(link);
+
+        this._highlight = new drawing.Path({ stroke: this.options.focusHighlight, visible: false })
+            .moveTo(x0, y0 + halfWidth)
+            .lineTo(x0, y0 - halfWidth)
+            .curveTo([xC + offset, y0 - halfWidth], [xC + offset, y1 - halfWidth], [x1, y1 - halfWidth])
+            .lineTo(x1, y1 + halfWidth)
+            .curveTo([xC - offset, y1 + halfWidth], [xC - offset, y0 + halfWidth], [x0, y0 + halfWidth]);
+    };
+
+    Link.prototype.focus = function focus (options) {
+        if (this._highlight) {
+            var ref = options || {};
+            var highlight = ref.highlight; if ( highlight === void 0 ) highlight = true;
+            if (highlight) {
+                this._highlight.options.set('visible', true);
+            }
+            var id = (this.options.link.sourceId) + "->" + (this.options.link.targetId);
+            this.visual.options.set('id', id);
+
+            if (this.options.root()) {
+                this.options.root().setAttribute(ARIA_ACTIVE_DESCENDANT, id);
+            }
+        }
+    };
+
+    Link.prototype.blur = function blur () {
+        if (this._highlight) {
+            this._highlight.options.set('visible', false);
+            this.visual.options.set('id', '');
+
+            if (this.options.root()) {
+                this.options.root().removeAttribute(ARIA_ACTIVE_DESCENDANT);
+            }
+        }
+    };
+
     return Link;
 }(SankeyElement));
 

package/dist/es/sankey/node.js

@@ -1,6 +1,7 @@
 import { geometry, drawing } from '@progress/kendo-drawing';
 import { SankeyElement } from './element';
 import { deepExtend } from '../common';
+import { ARIA_ACTIVE_DESCENDANT } from '../common/constants';
 
 export var Node = (function (SankeyElement) {
     function Node () {
@@ -12,15 +13,25 @@ export var Node = (function (SankeyElement) {
     Node.prototype.constructor = Node;
 
     Node.prototype.getElement = function getElement () {
-        var options = this.options;
-        var node = options.node;
-        var rect = new geometry.Rect([node.x0, node.y0], [node.x1 - node.x0, node.y1 - node.y0]);
+        return drawing.Path.fromRect(this.getRect(), this.visualOptions());
+    };
+
+    Node.prototype.getRect = function getRect () {
+        var node = this.options.node;
+        return new geometry.Rect([node.x0, node.y0], [node.x1 - node.x0, node.y1 - node.y0]);
+    };
 
-        return drawing.Path.fromRect(rect, this.visualOptions());
+    Node.prototype.getLabelText = function getLabelText (options) {
+        var labelTemplate = options.labels.ariaTemplate;
+
+        if (labelTemplate) {
+            return labelTemplate({ node: options.node });
+        }
     };
 
     Node.prototype.visualOptions = function visualOptions () {
         var options = deepExtend({}, this.options, this.options.node);
+        var ariaLabel = this.getLabelText(options);
 
         return {
             fill: {
@@ -31,10 +42,50 @@ export var Node = (function (SankeyElement) {
             className: 'k-sankey-node',
             role: 'graphics-symbol',
             ariaRoleDescription: 'Node',
-            ariaLabel: options.node.label.text
+            ariaLabel: ariaLabel
         };
     };
 
+    Node.prototype.createFocusHighlight = function createFocusHighlight () {
+        if (!this.options.navigatable) {
+            return;
+        }
+
+        this._highlight = new drawing.Path.fromRect(this.getRect(), {
+            stroke: this.options.focusHighlight,
+            visible: false
+        });
+
+        return this._highlight;
+    };
+
+    Node.prototype.focus = function focus (options) {
+        if (this._highlight) {
+            var ref = options || {};
+            var highlight = ref.highlight; if ( highlight === void 0 ) highlight = true;
+            if (highlight) {
+                this._highlight.options.set('visible', true);
+            }
+            var id = this.options.node.id;
+            this.visual.options.set('id', id);
+
+            if (this.options.root()) {
+                this.options.root().setAttribute(ARIA_ACTIVE_DESCENDANT, id);
+            }
+        }
+    };
+
+    Node.prototype.blur = function blur () {
+        if (this._highlight) {
+            this._highlight.options.set('visible', false);
+            this.visual.options.set('id', '');
+
+            if (this.options.root()) {
+                this.options.root().removeAttribute(ARIA_ACTIVE_DESCENDANT);
+            }
+        }
+    };
+
     return Node;
 }(SankeyElement));