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

package/dist/es/sankey/sankey.js

@@ -5,7 +5,7 @@ import { Node, resolveNodeOptions } from './node';
 import { Link, resolveLinkOptions } from './link';
 import { Label, resolveLabelOptions } from './label';
 import { Title } from './title';
-import { BOTTOM, LEFT, RIGHT, TOP } from '../common/constants';
+import { BLACK, BOTTOM, LEFT, RIGHT, TOP } from '../common/constants';
 import { Box, rectToBox } from '../core';
 import { Legend } from './legend';
 import { defined } from '../drawing-utils';
@@ -25,6 +25,7 @@ export var Sankey = (function (Observable) {
         if (options && options.data) {
             this._redraw();
             this._initResizeObserver();
+            this._initNavigation(element);
         }
     }
 
@@ -36,13 +37,24 @@ export var Sankey = (function (Observable) {
         this.unbind();
         this._destroySurface();
         this._destroyResizeObserver();
+
+        if (this.element) {
+            this.element.removeEventListener('keydown', this._keydownHandler);
+            this.element.removeEventListener('focus', this._focusHandler);
+            this.element.removeEventListener('mousedown', this._onDownHandler);
+            this.element.removeEventListener('touchstart', this._onDownHandler);
+            this.element.removeEventListener('pointerdown', this._onDownHandler);
+        }
+
+        this._focusState = null;
+
+        this.element = null;
     };
 
     Sankey.prototype._initElement = function _initElement (element) {
         this.element = element;
         addClass(element, [ "k-chart", "k-sankey" ]);
         element.setAttribute('role', 'graphics-document');
-        element.tabIndex = element.getAttribute("tabindex") || 0;
 
         var ref = this.options;
         var title = ref.title;
@@ -64,6 +76,31 @@ export var Sankey = (function (Observable) {
         }
     };
 
+    Sankey.prototype._initNavigation = function _initNavigation (element) {
+        element.tabIndex = element.getAttribute("tabindex") || 0;
+
+        if (this.options.disableKeyboardNavigation) {
+            return;
+        }
+
+        this._keydownHandler = this._keydown.bind(this);
+        this._focusHandler = this._focus.bind(this);
+        this._blurHandler = this._blur.bind(this);
+        this._onDownHandler = this._onDown.bind(this);
+
+        element.addEventListener('keydown', this._keydownHandler);
+        element.addEventListener('focus', this._focusHandler);
+        element.addEventListener('blur', this._blurHandler);
+        element.addEventListener('mousedown', this._onDownHandler);
+        element.addEventListener('touchstart', this._onDownHandler);
+        element.addEventListener('pointerdown', this._onDownHandler);
+
+        this._focusState = {
+            node: this.columns[0][0],
+            link: null
+        };
+    };
+
     Sankey.prototype._initResizeObserver = function _initResizeObserver () {
         var this$1 = this;
 
@@ -242,16 +279,223 @@ export var Sankey = (function (Observable) {
 
     Sankey.prototype._click = function _click (ev) {
         var element = ev.element;
+        var dataItem = element.dataItem;
         var isLink = element.type === LINK;
         var isNode = element.type === NODE;
+        var focusState = this._focusState || {};
 
         if (isNode) {
+            var focusedNodeClicked = !focusState.link && this.sameNode(focusState.node, dataItem);
+
+            if (!focusedNodeClicked) {
+                this._focusState = { node: dataItem, link: null };
+                this._focusNode({ highlight: false });
+            }
+
             this.trigger('nodeClick', ev);
         } else if (isLink) {
+            var link = {
+                sourceId: dataItem.source.id,
+                targetId: dataItem.target.id,
+                value: dataItem.value
+            };
+            var focusedLinkClicked = this.sameLink(focusState.link, link);
+
+            if (!focusedLinkClicked) {
+                this._focusState = { node: dataItem.source, link: link };
+                this._focusLink({ highlight: false });
+            }
+
             this.trigger('linkClick', ev);
         }
     };
 
+    Sankey.prototype.sameNode = function sameNode (node1, node2) {
+        return node1 && node2 && node1.id === node2.id;
+    };
+
+    Sankey.prototype.sameLink = function sameLink (link1, link2) {
+        return link1 && link2 && link1.sourceId === link2.sourceId && link1.targetId === link2.targetId;
+    };
+
+    Sankey.prototype._focusNode = function _focusNode (options) {
+        this._cleanFocusHighlight();
+
+        var nodeData = this._focusState.node;
+        var node = this.models.map.get(nodeData.id);
+        node.focus(options);
+    };
+
+    Sankey.prototype._focusLink = function _focusLink (options) {
+        this._cleanFocusHighlight();
+
+        var linkData = this._focusState.link;
+        var link = this.models.map.get(((linkData.sourceId) + "-" + (linkData.targetId)));
+        link.focus(options);
+    };
+
+    Sankey.prototype._focusNextNode = function _focusNextNode (direction) {
+        if ( direction === void 0 ) direction = 1;
+
+        var current = this._focusState.node;
+
+        var columnIndex = this.columns.findIndex(function (column) { return column.find(function (n) { return n.id === current.id; }); });
+        var columnNodes = this.columns[columnIndex];
+        var nodeIndex = columnNodes.findIndex(function (n) { return n.id === current.id; });
+
+        var nextNode = columnNodes[nodeIndex + direction];
+        if (nextNode) {
+            this._focusState.node = nextNode;
+            this._focusNode();
+        }
+    };
+
+    Sankey.prototype._focusNextLink = function _focusNextLink (direction) {
+        if ( direction === void 0 ) direction = 1;
+
+        var node = this._focusState.node;
+        var link = this._focusState.link;
+
+        var sourceLinkIndex = node.sourceLinks.findIndex(function (l) { return l.sourceId === link.sourceId && l.targetId === link.targetId; });
+        var targetLinkIndex = node.targetLinks.findIndex(function (l) { return l.sourceId === link.sourceId && l.targetId === link.targetId; });
+
+        if (sourceLinkIndex !== -1) {
+            var nextLink = node.sourceLinks[sourceLinkIndex + direction];
+
+            if (nextLink) {
+                this._focusState.link = nextLink;
+                this._focusLink();
+            }
+        } else if (targetLinkIndex !== -1) {
+            var nextLink$1 = node.targetLinks[targetLinkIndex + direction];
+
+            if (nextLink$1) {
+                this._focusState.link = nextLink$1;
+                this._focusLink();
+            }
+        }
+    };
+
+    Sankey.prototype._focusSourceNode = function _focusSourceNode () {
+        var linkData = this._focusState.link;
+        var sourceNode = this.models.map.get(linkData.sourceId);
+        this._focusState = { node: sourceNode.options.node, link: null };
+        this._focusNode();
+    };
+
+    Sankey.prototype._focusTargetNode = function _focusTargetNode () {
+        var linkData = this._focusState.link;
+        var targetNode = this.models.map.get(linkData.targetId);
+        this._focusState = { node: targetNode.options.node, link: null };
+        this._focusNode();
+    };
+
+    Sankey.prototype._focusSourceLink = function _focusSourceLink () {
+        var nodeData = this._focusState.node;
+        var sourceLinks = nodeData.sourceLinks;
+        var linkData = sourceLinks[0];
+        if (linkData) {
+            this._focusState.link = linkData;
+            this._focusLink();
+        }
+    };
+
+    Sankey.prototype._focusTargetLink = function _focusTargetLink () {
+        var nodeData = this._focusState.node;
+        var targetLinks = nodeData.targetLinks;
+        var linkData = targetLinks[0];
+        if (linkData) {
+            this._focusState.link = linkData;
+            this._focusLink();
+        }
+    };
+
+    Sankey.prototype._focus = function _focus () {
+        if (!this._skipFocusHighlight) {
+            if (this._focusState.link) {
+                this._focusLink();
+            } else {
+                this._focusNode();
+            }
+        }
+
+        this._skipFocusHighlight = false;
+    };
+
+    Sankey.prototype._blur = function _blur () {
+        this._cleanFocusHighlight();
+    };
+
+    Sankey.prototype._onDown = function _onDown () {
+        if (!this._hasFocus()) {
+            this._skipFocusHighlight = true;
+        }
+    };
+
+    Sankey.prototype._hasFocus = function _hasFocus () {
+        return this.element.ownerDocument.activeElement === this.element;
+    };
+
+    Sankey.prototype._cleanFocusHighlight = function _cleanFocusHighlight () {
+        this.models.nodes.forEach(function (node) { return node.blur(); });
+        this.models.links.forEach(function (link) { return link.blur(); });
+    };
+
+    Sankey.prototype._keydown = function _keydown (ev) {
+        var handler = this['on' + ev.key];
+
+        if (handler) {
+            handler.call(this, ev);
+        }
+    };
+
+    Sankey.prototype.onEscape = function onEscape (ev) {
+        ev.preventDefault();
+
+        this._focusState = { node: this.columns[0][0], link: null };
+        this._focusNode();
+    };
+
+    Sankey.prototype.onArrowDown = function onArrowDown (ev) {
+        ev.preventDefault();
+
+        if (this._focusState.link) {
+            this._focusNextLink(1);
+        } else {
+            this._focusNextNode(1);
+        }
+    };
+
+    Sankey.prototype.onArrowUp = function onArrowUp (ev) {
+        ev.preventDefault();
+
+        if (this._focusState.link) {
+            this._focusNextLink(-1);
+        } else {
+            this._focusNextNode(-1);
+        }
+    };
+
+    Sankey.prototype.onArrowLeft = function onArrowLeft (ev) {
+        ev.preventDefault();
+
+        if (this._focusState.link) {
+            this._focusSourceNode();
+        } else {
+            this._focusTargetLink();
+        }
+    };
+
+    Sankey.prototype.onArrowRight = function onArrowRight (ev) {
+        ev.preventDefault();
+
+        if (this._focusState.link) {
+            this._focusTargetNode();
+        } else {
+            this._focusSourceLink();
+        }
+    };
+
     Sankey.prototype.highlightLinks = function highlightLinks (node, highlight) {
         var this$1 = this;
 
@@ -350,9 +594,13 @@ export var Sankey = (function (Observable) {
         var labels = sankeyOptions.labels;
         var nodeColors = sankeyOptions.nodeColors;
         var disableAutoLayout = sankeyOptions.disableAutoLayout;
+        var disableKeyboardNavigation = sankeyOptions.disableKeyboardNavigation;
         var autoLayout = !disableAutoLayout;
+        var padding = disableKeyboardNavigation ? 0 : highlightOptions.width / 2;
 
         var sankeyBox = new Box(0, 0, calcOptions.width, calcOptions.height);
+        sankeyBox.unpad(padding);
+
         var titleBox = this.titleBox(title, sankeyBox);
 
         var legendArea = sankeyBox.clone();
@@ -394,7 +642,7 @@ export var Sankey = (function (Observable) {
         var circularLinks = ref.circularLinks;
         if (circularLinks) {
             console.warn('Circular links detected. Kendo Sankey diagram does not support circular links.');
-            return { sankey: { nodes: [], links: [], circularLinks: circularLinks }, legendBox: legendBox, titleBox: titleBox };
+            return { sankey: { nodes: [], links: [], columns: [[]], circularLinks: circularLinks }, legendBox: legendBox, titleBox: titleBox };
         }
 
         var box = new Box();
@@ -485,6 +733,7 @@ export var Sankey = (function (Observable) {
         var nodeColors = sankeyOptions.nodeColors;
         var title = sankeyOptions.title;
         var legend = sankeyOptions.legend;
+        var disableKeyboardNavigation = sankeyOptions.disableKeyboardNavigation;
         var ref = sankeyContext.size;
         var width = ref.width;
         var height = ref.height;
@@ -496,6 +745,13 @@ export var Sankey = (function (Observable) {
         var legendBox = ref$1.legendBox;
         var nodes = sankey.nodes;
         var links = sankey.links;
+        var columns = sankey.columns;
+
+        sankeyContext.columns = columns.map(function (column) {
+            var newColumn = column.slice();
+            newColumn.sort(function (a, b) { return a.y0 - b.y0; });
+            return newColumn;
+        });
 
         var visual = new drawing.Group({
             clip: drawing.Path.fromRect(new geometry.Rect([0, 0], [width, height]))
@@ -514,8 +770,19 @@ export var Sankey = (function (Observable) {
         var visualNodes = new Map();
         sankeyContext.nodesVisuals = visualNodes;
 
+        var models = {
+            nodes: [],
+            links: [],
+            map: new Map()
+        };
+        sankeyContext.models = models;
+
+        var focusHighlights = [];
+
         nodes.forEach(function (node, i) {
             var nodeOps = resolveNodeOptions(node, nodesOptions, nodeColors, i);
+            nodeOps.root = function () { return sankeyContext.element; };
+            nodeOps.navigatable = disableKeyboardNavigation !== true;
 
             var nodeInstance = new Node(nodeOps);
             var nodeVisual = nodeInstance.exportVisual();
@@ -532,7 +799,16 @@ export var Sankey = (function (Observable) {
                 targetLinks: node.targetLinks.map(function (link) { return ({ sourceId: link.sourceId, targetId: link.targetId, value: link.value }); })});
             visualNodes.set(node.id, nodeVisual);
 
+            models.nodes.push(nodeInstance);
+            models.map.set(node.id, nodeInstance);
+
             visual.append(nodeVisual);
+
+            nodeInstance.createFocusHighlight();
+
+            if (nodeInstance._highlight) {
+                focusHighlights.push(nodeInstance._highlight);
+            }
         });
 
         var sortedLinks = links.slice().sort(function (a, b) { return b.value - a.value; });
@@ -546,6 +822,8 @@ export var Sankey = (function (Observable) {
             var sourceNode = visualNodes.get(source.id);
             var targetNode = visualNodes.get(target.id);
             var linkOps = resolveLinkOptions(link, linkOptions, sourceNode, targetNode);
+            linkOps.root = function () { return sankeyContext.element; };
+            linkOps.navigatable = disableKeyboardNavigation !== true;
             var linkInstance = new Link(linkOps);
             var linkVisual = linkInstance.exportVisual();
 
@@ -561,6 +839,15 @@ export var Sankey = (function (Observable) {
             sourceNode.links.push(linkVisual);
             targetNode.links.push(linkVisual);
 
+            models.links.push(linkInstance);
+            models.map.set(((source.id) + "-" + (target.id)), linkInstance);
+
+            linkInstance.createFocusHighlight();
+
+            if (linkInstance._highlight) {
+                focusHighlights.push(linkInstance._highlight);
+            }
+
             visual.append(linkVisual);
         });
 
@@ -581,6 +868,12 @@ export var Sankey = (function (Observable) {
             visual.append(legendVisual);
         }
 
+        if (focusHighlights.length !== 0) {
+            var focusHighlight = new drawing.Group();
+            focusHighlight.append.apply(focusHighlight, focusHighlights);
+            visual.append(focusHighlight);
+        }
+
         return visual;
     };
 
@@ -605,6 +898,12 @@ export var Sankey = (function (Observable) {
     return Sankey;
 }(Observable));
 
+var highlightOptions = {
+    opacity: 1,
+    width: 2,
+    color: BLACK
+};
+
 setDefaultOptions(Sankey, {
     title: {
         position: TOP, // 'top', 'bottom'
@@ -632,7 +931,15 @@ setDefaultOptions(Sankey, {
         padding: 16,
         opacity: 1,
         align: 'stretch', // 'left', 'right', 'stretch'
-        offset: { left: 0, top: 0 }
+        offset: { left: 0, top: 0 },
+        focusHighlight: Object.assign({}, highlightOptions),
+        labels: {
+            ariaTemplate: function (ref) {
+                var node = ref.node;
+
+                return node.label.text;
+}
+        }
     },
     links: {
         colorType: 'static', // 'source', 'target', 'static'
@@ -640,6 +947,14 @@ setDefaultOptions(Sankey, {
         highlight: {
             opacity: 0.8,
             inactiveOpacity: 0.2
+        },
+        focusHighlight: Object.assign({}, highlightOptions),
+        labels: {
+            ariaTemplate: function (ref) {
+                var link = ref.link;
+
+                return ((link.source.label.text) + " to " + (link.target.label.text));
+}
         }
     },
     tooltip: {

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

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

package/dist/es2015/sankey/legend.js

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

package/dist/es2015/sankey/link.js

@@ -2,6 +2,66 @@ 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';
+
+const distanceToLine = (line, point) => {
+    const [x1, y1] = line[0];
+    const [x2, y2] = line[1];
+    const [x3, y3] = point;
+
+    return Math.abs((x2 - x1) * (y3 - y1) - (x3 - x1) * (y2 - y1)) / Math.sqrt(Math.pow( (x2 - x1), 2 ) + Math.pow( (y2 - y1), 2 ));
+};
+
+const bezierPoint = (p1, p2, p3, p4, t) => {
+    const t1 = 1 - t;
+    const t1t1 = t1 * t1;
+    const tt = t * t;
+    return (p1 * t1t1 * t1) + (3 * p2 * t * t1t1) + (3 * p3 * tt * t1) + (p4 * tt * t);
+};
+
+const angelBetweenTwoLines = (line1, line2) => {
+    const [x1, y1] = line1[0];
+    const [x2, y2] = line1[1];
+    const [x3, y3] = line2[0];
+    const [x4, y4] = line2[1];
+
+    const a1 = Math.atan2(y2 - y1, x2 - x1);
+    const a2 = Math.atan2(y4 - y3, x4 - x3);
+
+    return Math.abs(a1 - a2);
+};
+
+const calculateControlPointsOffsetX = (link) => {
+    const { x0, x1, y0, y1 } = link;
+    let xC = (x0 + x1) / 2;
+
+    const width = link.width;
+    const halfWidth = width / 2;
+
+    // upper curve, t = 0.5
+    const 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
+    const 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.
+    const actualWidth = distanceToLine(upperCurveMiddleLine, lowerCurveMiddlePoint);
+
+    const 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.
+    const alpha = angelBetweenTwoLines(upperCurveMiddleLine, [[x0, y0 - halfWidth], [xC, y0 - halfWidth]]);
+    const a = upperNarrowness;
+    const b = Math.sin(alpha) * a;
+    const 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 class Link extends SankeyElement {
     getElement() {
@@ -13,17 +73,75 @@ export class Link extends SankeyElement {
             .moveTo(x0, y0).curveTo([xC, y0], [xC, y1], [x1, y1]);
     }
 
+    getLabelText(options) {
+        let labelTemplate = options.labels.ariaTemplate;
+
+        if (labelTemplate) {
+            return labelTemplate({ link: options.link });
+        }
+    }
+
     visualOptions() {
         const options = this.options;
         const link = this.options.link;
+        const 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
         };
     }
+
+    createFocusHighlight() {
+        if (!this.options.navigatable) {
+            return;
+        }
+        const link = this.options.link;
+        const { x0, x1, y0, y1 } = link;
+        const xC = (x0 + x1) / 2;
+        const halfWidth = link.width / 2;
+
+        const 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]);
+    }
+
+    focus(options) {
+        if (this._highlight) {
+            const { highlight = true } = options || {};
+            if (highlight) {
+                this._highlight.options.set('visible', true);
+            }
+            const 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);
+            }
+        }
+    }
+
+    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);
+            }
+        }
+    }
 }
 
 export const resolveLinkOptions = (link, options, sourceNode, targetNode) => {

package/dist/es2015/sankey/node.js

@@ -1,18 +1,29 @@
 import { geometry, drawing } from '@progress/kendo-drawing';
 import { SankeyElement } from './element';
 import { deepExtend } from '../common';
+import { ARIA_ACTIVE_DESCENDANT } from '../common/constants';
 
 export class Node extends SankeyElement {
     getElement() {
-        const options = this.options;
-        const node = options.node;
-        const rect = new geometry.Rect([node.x0, node.y0], [node.x1 - node.x0, node.y1 - node.y0]);
+        return drawing.Path.fromRect(this.getRect(), this.visualOptions());
+    }
+
+    getRect() {
+        const 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());
+    getLabelText(options) {
+        let labelTemplate = options.labels.ariaTemplate;
+
+        if (labelTemplate) {
+            return labelTemplate({ node: options.node });
+        }
     }
 
     visualOptions() {
         const options = deepExtend({}, this.options, this.options.node);
+        const ariaLabel = this.getLabelText(options);
 
         return {
             fill: {
@@ -23,9 +34,48 @@ export class Node extends SankeyElement {
             className: 'k-sankey-node',
             role: 'graphics-symbol',
             ariaRoleDescription: 'Node',
-            ariaLabel: options.node.label.text
+            ariaLabel: ariaLabel
         };
     }
+
+    createFocusHighlight() {
+        if (!this.options.navigatable) {
+            return;
+        }
+
+        this._highlight = new drawing.Path.fromRect(this.getRect(), {
+            stroke: this.options.focusHighlight,
+            visible: false
+        });
+
+        return this._highlight;
+    }
+
+    focus(options) {
+        if (this._highlight) {
+            const { highlight = true } = options || {};
+            if (highlight) {
+                this._highlight.options.set('visible', true);
+            }
+            const id = this.options.node.id;
+            this.visual.options.set('id', id);
+
+            if (this.options.root()) {
+                this.options.root().setAttribute(ARIA_ACTIVE_DESCENDANT, id);
+            }
+        }
+    }
+
+    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);
+            }
+        }
+    }
 }
 
 const nodeColor = (node, nodeColors, index) => node.color || nodeColors[index % nodeColors.length];