@progress/kendo-charts 1.33.0-dev.202312010652 → 1.33.0-dev.202312060707

package/dist/es/chart/chart.js

@@ -351,7 +351,9 @@ var Chart = (function (Class) {
         var titleOptions = this.options.title;
         var title = isString(titleOptions) ? titleOptions : (titleOptions.description || titleOptions.text);
 
-        this.element.setAttribute("aria-roledescription", title);
+        if (title) {
+            this.element.setAttribute("aria-roledescription", title);
+        }
     };
 
     Chart.prototype.exportVisual = function exportVisual (exportOptions) {
@@ -1295,11 +1297,11 @@ var Chart = (function (Class) {
 
         focusState.focusedElement = element;
 
+        this._setElementActiveDescendant(element);
+
         if (!omitHighlight) {
             element.focusVisual();
 
-            this._setElementActiveDescendant(element._id);
-
             if (focusState.legendInFocus) {
                 this._showSeriesInactiveOpacity(focusState.focusedLegendItemIndex);
             } else {
@@ -1318,18 +1320,39 @@ var Chart = (function (Class) {
 
         if (focusState.focusedElement) {
             focusState.focusedElement.clearFocusFromVisual();
-            this._setElementActiveDescendant(null);
+            this._clearElementActiveDescendant();
         }
 
         focusState.focusedElement = null;
     };
 
-    Chart.prototype._setElementActiveDescendant = function _setElementActiveDescendant (id) {
-        if (id) {
-            this.element.setAttribute(ARIA_ACTIVE_DESCENDANT, id);
-        } else {
-            this.element.removeAttribute(ARIA_ACTIVE_DESCENDANT);
+    Chart.prototype._setElementActiveDescendant = function _setElementActiveDescendant (element) {
+        if (this.options.renderAs === "canvas") {
+            this._pseudoFocusedElement = this._createPseudoFocusedElement(element);
+            this.element.append(this._pseudoFocusedElement);
         }
+
+        this.element.setAttribute(ARIA_ACTIVE_DESCENDANT, element._id);
+    };
+
+    Chart.prototype._clearElementActiveDescendant = function _clearElementActiveDescendant () {
+        if (this._pseudoFocusedElement) {
+            this._pseudoFocusedElement.remove();
+            this._pseudoFocusedElement = null;
+        }
+
+        this.element.removeAttribute(ARIA_ACTIVE_DESCENDANT);
+    };
+
+    Chart.prototype._createPseudoFocusedElement = function _createPseudoFocusedElement (element) {
+        var pseudoElement = document.createElement("div");
+
+        pseudoElement.id = element._id;
+        pseudoElement.setAttribute("aria-label", element.getAriaLabelText());
+        pseudoElement.setAttribute("role", element.options.accessibility.role);
+        pseudoElement.setAttribute("aria-roledescription", element.options.accessibility.ariaRoleDescription);
+
+        return pseudoElement;
     };
 
     Chart.prototype._blur = function _blur () {

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

@@ -4,8 +4,8 @@ import { BoxElement, FloatElement, ShapeElement, TextBox } from '../../core';
 import { LEGEND_ITEM_ARIA_ROLE_DESCRIPTION, LEGEND_ITEM_CLASSNAME, LEGEND_ITEM_CLICK, LEGEND_ITEM_HOVER, LEGEND_ITEM_LEAVE, LEGEND_ITEM_ROLE } from '../constants';
 import { CENTER, WHITE } from '../../common/constants';
 import { deepExtend, eventElement, setDefaultOptions } from '../../common';
-import AccessibilityAttributesMixin from '../mixins/accessibility-attributes-mixin';
 import addAccessibilityAttributesToVisual from '../../core/utils/add-accessibility-attributes-to-visual';
+import guid from '../../core/utils/guid';
 
 var LegendItem = (function (BoxElement) {
     function LegendItem(options) {
@@ -19,6 +19,8 @@ var LegendItem = (function (BoxElement) {
             this.createLabel();
             this.createMarker();
         }
+
+        this._id = guid();
     }
 
     if ( BoxElement ) LegendItem.__proto__ = BoxElement;
@@ -52,6 +54,18 @@ var LegendItem = (function (BoxElement) {
         this.container.append(new TextBox(options.text, labelOptions));
     };
 
+    LegendItem.prototype.getAriaLabelText = function getAriaLabelText () {
+        return this.options.text;
+    };
+
+    LegendItem.prototype.focusVisual = function focusVisual () {
+        this.toggleFocusHighlight(true);
+    };
+
+    LegendItem.prototype.clearFocusFromVisual = function clearFocusFromVisual () {
+        this.toggleFocusHighlight(false);
+    };
+
     LegendItem.prototype.renderComplete = function renderComplete () {
         BoxElement.prototype.renderComplete.call(this);
 
@@ -110,7 +124,10 @@ var LegendItem = (function (BoxElement) {
         var options = this.options;
 
         if (this.options.visible) {
-            var accessibilityOptions = deepExtend({ ariaLabel: options.text }, options.accessibility);
+            var accessibilityOptions = deepExtend({
+                id: this._id,
+                ariaLabel: options.text
+            }, options.accessibility);
 
             addAccessibilityAttributesToVisual(this.visual, accessibilityOptions);
 
@@ -160,8 +177,6 @@ var LegendItem = (function (BoxElement) {
     return LegendItem;
 }(BoxElement));
 
-deepExtend(LegendItem.prototype, AccessibilityAttributesMixin);
-
 setDefaultOptions(LegendItem, {
     accessibility: {
         role: LEGEND_ITEM_ROLE,

package/dist/es/chart/line-chart/line-point.js

@@ -18,6 +18,7 @@ var LinePoint = (function (ChartElement) {
         this.options = options;
         this.aboveAxis = valueOrDefault(this.options.aboveAxis, true);
         this.tooltipTracking = true;
+        this._id = guid();
     }
 
     if ( ChartElement ) LinePoint.__proto__ = ChartElement;
@@ -343,8 +344,6 @@ var LinePoint = (function (ChartElement) {
 
     LinePoint.prototype.focusVisual = function focusVisual () {
         if (this.marker) {
-            this._id = guid();
-
             if (this.marker.visual) {
                 this.marker.visual.options.set("id", this._id);
             }
@@ -359,7 +358,6 @@ var LinePoint = (function (ChartElement) {
                 this.marker.visual.options.set("id", "");
             }
 
-            this._id = null;
             this.toggleFocusHighlight(false);
         }
     };

package/dist/es/chart/mixins/accessibility-attributes-mixin.js

@@ -4,7 +4,12 @@ import guid from '../../core/utils/guid';
 
 var AccessibilityAttributesMixin = {
     addAccessibilityAttributesToVisual: function() {
-        var accessibilityOptions = deepExtend({ ariaLabel: this.getAriaLabelText() }, this.options.accessibility);
+        this._id = this._id || guid();
+
+        var accessibilityOptions = deepExtend({
+            id: this._id,
+            ariaLabel: this.getAriaLabelText()
+        }, this.options.accessibility);
 
         addAccessibilityAttributesToVisual(this.visual, accessibilityOptions);
     },
@@ -21,14 +26,10 @@ var AccessibilityAttributesMixin = {
     },
 
     focusVisual: function focusVisual() {
-        this._id = guid();
-        this.visual.options.set("id", this._id);
         this.toggleFocusHighlight(true);
     },
 
     clearFocusFromVisual: function clearFocusFromVisual() {
-        this.visual.options.set("id", "");
-        this._id = null;
         this.toggleFocusHighlight(false);
     }
 };

package/dist/es2015/chart/chart.js

@@ -342,7 +342,9 @@ class Chart extends Class {
         let titleOptions = this.options.title;
         let title = isString(titleOptions) ? titleOptions : (titleOptions.description || titleOptions.text);
 
-        this.element.setAttribute("aria-roledescription", title);
+        if (title) {
+            this.element.setAttribute("aria-roledescription", title);
+        }
     }
 
     exportVisual(exportOptions) {
@@ -1259,11 +1261,11 @@ class Chart extends Class {
 
         focusState.focusedElement = element;
 
+        this._setElementActiveDescendant(element);
+
         if (!omitHighlight) {
             element.focusVisual();
 
-            this._setElementActiveDescendant(element._id);
-
             if (focusState.legendInFocus) {
                 this._showSeriesInactiveOpacity(focusState.focusedLegendItemIndex);
             } else {
@@ -1281,18 +1283,39 @@ class Chart extends Class {
 
         if (focusState.focusedElement) {
             focusState.focusedElement.clearFocusFromVisual();
-            this._setElementActiveDescendant(null);
+            this._clearElementActiveDescendant();
         }
 
         focusState.focusedElement = null;
     }
 
-    _setElementActiveDescendant(id) {
-        if (id) {
-            this.element.setAttribute(ARIA_ACTIVE_DESCENDANT, id);
-        } else {
-            this.element.removeAttribute(ARIA_ACTIVE_DESCENDANT);
+    _setElementActiveDescendant(element) {
+        if (this.options.renderAs === "canvas") {
+            this._pseudoFocusedElement = this._createPseudoFocusedElement(element);
+            this.element.append(this._pseudoFocusedElement);
         }
+
+        this.element.setAttribute(ARIA_ACTIVE_DESCENDANT, element._id);
+    }
+
+    _clearElementActiveDescendant() {
+        if (this._pseudoFocusedElement) {
+            this._pseudoFocusedElement.remove();
+            this._pseudoFocusedElement = null;
+        }
+
+        this.element.removeAttribute(ARIA_ACTIVE_DESCENDANT);
+    }
+
+    _createPseudoFocusedElement(element) {
+        const pseudoElement = document.createElement("div");
+
+        pseudoElement.id = element._id;
+        pseudoElement.setAttribute("aria-label", element.getAriaLabelText());
+        pseudoElement.setAttribute("role", element.options.accessibility.role);
+        pseudoElement.setAttribute("aria-roledescription", element.options.accessibility.ariaRoleDescription);
+
+        return pseudoElement;
     }
 
     _blur() {

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

@@ -4,8 +4,8 @@ import { BoxElement, FloatElement, ShapeElement, TextBox } from '../../core';
 import { LEGEND_ITEM_ARIA_ROLE_DESCRIPTION, LEGEND_ITEM_CLASSNAME, LEGEND_ITEM_CLICK, LEGEND_ITEM_HOVER, LEGEND_ITEM_LEAVE, LEGEND_ITEM_ROLE } from '../constants';
 import { CENTER, WHITE } from '../../common/constants';
 import { deepExtend, eventElement, setDefaultOptions } from '../../common';
-import AccessibilityAttributesMixin from '../mixins/accessibility-attributes-mixin';
 import addAccessibilityAttributesToVisual from '../../core/utils/add-accessibility-attributes-to-visual';
+import guid from '../../core/utils/guid';
 
 class LegendItem extends BoxElement {
     constructor(options) {
@@ -19,6 +19,8 @@ class LegendItem extends BoxElement {
             this.createLabel();
             this.createMarker();
         }
+
+        this._id = guid();
     }
 
     createContainer() {
@@ -48,6 +50,18 @@ class LegendItem extends BoxElement {
         this.container.append(new TextBox(options.text, labelOptions));
     }
 
+    getAriaLabelText() {
+        return this.options.text;
+    }
+
+    focusVisual() {
+        this.toggleFocusHighlight(true);
+    }
+
+    clearFocusFromVisual() {
+        this.toggleFocusHighlight(false);
+    }
+
     renderComplete() {
         super.renderComplete();
 
@@ -106,7 +120,10 @@ class LegendItem extends BoxElement {
         const options = this.options;
 
         if (this.options.visible) {
-            const accessibilityOptions = deepExtend({ ariaLabel: options.text }, options.accessibility);
+            const accessibilityOptions = deepExtend({
+                id: this._id,
+                ariaLabel: options.text
+            }, options.accessibility);
 
             addAccessibilityAttributesToVisual(this.visual, accessibilityOptions);
 
@@ -152,8 +169,6 @@ class LegendItem extends BoxElement {
     }
 }
 
-deepExtend(LegendItem.prototype, AccessibilityAttributesMixin);
-
 setDefaultOptions(LegendItem, {
     accessibility: {
         role: LEGEND_ITEM_ROLE,

package/dist/es2015/chart/line-chart/line-point.js

@@ -18,6 +18,7 @@ class LinePoint extends ChartElement {
         this.options = options;
         this.aboveAxis = valueOrDefault(this.options.aboveAxis, true);
         this.tooltipTracking = true;
+        this._id = guid();
     }
 
     render() {
@@ -332,8 +333,6 @@ class LinePoint extends ChartElement {
 
     focusVisual() {
         if (this.marker) {
-            this._id = guid();
-
             if (this.marker.visual) {
                 this.marker.visual.options.set("id", this._id);
             }
@@ -348,7 +347,6 @@ class LinePoint extends ChartElement {
                 this.marker.visual.options.set("id", "");
             }
 
-            this._id = null;
             this.toggleFocusHighlight(false);
         }
     }

package/dist/es2015/chart/mixins/accessibility-attributes-mixin.js

@@ -4,7 +4,12 @@ import guid from '../../core/utils/guid';
 
 const AccessibilityAttributesMixin = {
     addAccessibilityAttributesToVisual: function() {
-        const accessibilityOptions = deepExtend({ ariaLabel: this.getAriaLabelText() }, this.options.accessibility);
+        this._id = this._id || guid();
+
+        const accessibilityOptions = deepExtend({
+            id: this._id,
+            ariaLabel: this.getAriaLabelText()
+        }, this.options.accessibility);
 
         addAccessibilityAttributesToVisual(this.visual, accessibilityOptions);
     },
@@ -21,14 +26,10 @@ const AccessibilityAttributesMixin = {
     },
 
     focusVisual() {
-        this._id = guid();
-        this.visual.options.set("id", this._id);
         this.toggleFocusHighlight(true);
     },
 
     clearFocusFromVisual() {
-        this.visual.options.set("id", "");
-        this._id = null;
         this.toggleFocusHighlight(false);
     }
 };