@progress/kendo-charts 2.3.0-dev.202404221217 → 2.3.0-dev.202404250846

package/dist/es/chart/chart.js

@@ -19,7 +19,8 @@ import isDateAxis from './utils/is-date-axis';
 import { ChartPane, ChartPlotArea, findAxisByName } from './api-elements';
 
 import { X, Y, VALUE, DEFAULT_WIDTH, DEFAULT_HEIGHT, DEFAULT_SERIES_OPACITY,
-    ARROW_DOWN, ARROW_UP, ARROW_LEFT, ARROW_RIGHT, ARIA_ACTIVE_DESCENDANT, TAB, TOP, LEFT, BLACK } from '../common/constants';
+    ARROW_DOWN, ARROW_UP, ARROW_LEFT, ARROW_RIGHT, ARIA_ACTIVE_DESCENDANT, TAB, TOP, LEFT, BLACK,
+    ENTER, ESCAPE } from '../common/constants';
 import { addClass, Class, setDefaultOptions, deepExtend, defined, find, isObject, isFunction, elementSize, elementOffset,
     elementScale, elementStyles, eventCoordinates, bindEvents, unbindEvents, mousewheelDelta, FontLoader, inArray, round,
     valueOrDefault, isString, cycleUp, cycleDown, hasOwnProperty } from '../common';
@@ -342,6 +343,20 @@ var Chart = (function (Class) {
         if (!this._navState) {
             this._cancelDomEvents();
         }
+
+        this._redrawFocusHighlight();
+    };
+
+    Chart.prototype._redrawFocusHighlight = function _redrawFocusHighlight () {
+        var ref = this;
+        var ref_focusState = ref._focusState;
+        var legendInFocus = ref_focusState.legendInFocus;
+        var preserveHighlight = ref_focusState.preserveHighlight;
+
+        if (legendInFocus && preserveHighlight) {
+            this._focusElement(this._getFocusedLegendItem(), false);
+            this._focusState.preserveHighlight = false;
+        }
     };
 
     Chart.prototype._setElementAccessibilityAttributes = function _setElementAccessibilityAttributes () {
@@ -1122,7 +1137,9 @@ var Chart = (function (Class) {
 
     Chart.prototype._keydown = function _keydown (e) {
         var ref = this;
-        var legendInFocus = ref._focusState.legendInFocus;
+        var ref_focusState = ref._focusState;
+        var legendInFocus = ref_focusState.legendInFocus;
+        var focusedElement = ref_focusState.focusedElement;
         var legend = ref._legend;
 
         if (e.key === TAB) {
@@ -1134,6 +1151,22 @@ var Chart = (function (Class) {
             } else if (!legendInFocus && isLegendBeforeChart === e.shiftKey && legend.hasItems()) {
                 this._navigateLegend(e);
             }
+        } else if (e.key === ESCAPE) {
+            if (focusedElement) {
+                e.stopPropagation();
+            }
+
+            if (this._tooltip && this._tooltip.visible) {
+                this._hideTooltip();
+            } else {
+                this._blur();
+            }
+        } else if (e.key === ENTER) {
+            if (focusedElement) {
+                this._focusState.preserveHighlight = true;
+                this._propagateClick(focusedElement, e);
+                this._focusElement(focusedElement);
+            }
         } else if (!legendInFocus) {
             this._navigatePoints(e);
         } else {
@@ -1160,6 +1193,7 @@ var Chart = (function (Class) {
             focusState.focusedPoint = point;
 
             this$1._focusElement(focusState.focusedPoint);
+            this$1._displayTooltip(point);
             e.preventDefault();
         };
 
@@ -1226,6 +1260,7 @@ var Chart = (function (Class) {
 
         if (point) {
             this._focusElement(point);
+            this._displayTooltip(point);
         }
     };
 
@@ -1261,6 +1296,8 @@ var Chart = (function (Class) {
         focusState.focusedLegendItemIndex = 0;
         this._focusElement(this._getFocusedLegendItem());
         focusState.legendInFocus = true;
+
+        this._hideTooltip();
     };
 
     Chart.prototype._focusLegendItem = function _focusLegendItem (args) {
@@ -1404,6 +1441,12 @@ var Chart = (function (Class) {
         }
     };
 
+    Chart.prototype._hideTooltip = function _hideTooltip () {
+        if (this._tooltip) {
+            this._tooltip.hide();
+        }
+    };
+
     Chart.prototype._displayInactiveOpacity = function _displayInactiveOpacity (activePoint, multipleSeries, highlightPoints) {
         var chartInstance = this._activeChartInstance = this._chartInstanceFromPoint(activePoint);
         if (!chartInstance) {
@@ -1746,14 +1789,13 @@ var Chart = (function (Class) {
 
     Chart.prototype._unsetActivePoint = function _unsetActivePoint (options) {
         var ref = this;
-        var tooltip = ref._tooltip;
         var highlight = ref._highlight;
 
         this._activePoint = null;
         this._hoveredPoint = null;
 
-        if (tooltip && !(options && options.keepTooltipOpen)) {
-            tooltip.hide();
+        if (!options || !options.keepTooltipOpen) {
+            this._hideTooltip();
         }
 
         this._tooltipCategoryIx = null;

package/dist/es/common/constants.js

@@ -18,6 +18,8 @@ export var DEFAULT_HEIGHT = 400;
 export var DEFAULT_PRECISION = 10;
 export var DEFAULT_WIDTH = 600;
 export var END = "end";
+export var ENTER = "Enter";
+export var ESCAPE = "Escape";
 export var FORMAT_REGEX = /\{\d+:?/;
 export var HEIGHT = "height";
 export var HIGHLIGHT_ZINDEX = 100;

package/dist/es2015/chart/chart.js

@@ -19,7 +19,8 @@ import isDateAxis from './utils/is-date-axis';
 import { ChartPane, ChartPlotArea, findAxisByName } from './api-elements';
 
 import { X, Y, VALUE, DEFAULT_WIDTH, DEFAULT_HEIGHT, DEFAULT_SERIES_OPACITY,
-    ARROW_DOWN, ARROW_UP, ARROW_LEFT, ARROW_RIGHT, ARIA_ACTIVE_DESCENDANT, TAB, TOP, LEFT, BLACK } from '../common/constants';
+    ARROW_DOWN, ARROW_UP, ARROW_LEFT, ARROW_RIGHT, ARIA_ACTIVE_DESCENDANT, TAB, TOP, LEFT, BLACK,
+    ENTER, ESCAPE } from '../common/constants';
 import { addClass, Class, setDefaultOptions, deepExtend, defined, find, isObject, isFunction, elementSize, elementOffset,
     elementScale, elementStyles, eventCoordinates, bindEvents, unbindEvents, mousewheelDelta, FontLoader, inArray, round,
     valueOrDefault, isString, cycleUp, cycleDown, hasOwnProperty } from '../common';
@@ -333,6 +334,17 @@ class Chart extends Class {
         if (!this._navState) {
             this._cancelDomEvents();
         }
+
+        this._redrawFocusHighlight();
+    }
+
+    _redrawFocusHighlight() {
+        const { _focusState: { legendInFocus, preserveHighlight } } = this;
+
+        if (legendInFocus && preserveHighlight) {
+            this._focusElement(this._getFocusedLegendItem(), false);
+            this._focusState.preserveHighlight = false;
+        }
     }
 
     _setElementAccessibilityAttributes() {
@@ -1100,7 +1112,7 @@ class Chart extends Class {
     }
 
     _keydown(e) {
-        const { _focusState: { legendInFocus }, _legend: legend } = this;
+        const { _focusState: { legendInFocus, focusedElement }, _legend: legend } = this;
 
         if (e.key === TAB) {
             this._clearFocusedElement();
@@ -1111,6 +1123,22 @@ class Chart extends Class {
             } else if (!legendInFocus && isLegendBeforeChart === e.shiftKey && legend.hasItems()) {
                 this._navigateLegend(e);
             }
+        } else if (e.key === ESCAPE) {
+            if (focusedElement) {
+                e.stopPropagation();
+            }
+
+            if (this._tooltip && this._tooltip.visible) {
+                this._hideTooltip();
+            } else {
+                this._blur();
+            }
+        } else if (e.key === ENTER) {
+            if (focusedElement) {
+                this._focusState.preserveHighlight = true;
+                this._propagateClick(focusedElement, e);
+                this._focusElement(focusedElement);
+            }
         } else if (!legendInFocus) {
             this._navigatePoints(e);
         } else {
@@ -1133,6 +1161,7 @@ class Chart extends Class {
             focusState.focusedPoint = point;
 
             this._focusElement(focusState.focusedPoint);
+            this._displayTooltip(point);
             e.preventDefault();
         };
 
@@ -1194,6 +1223,7 @@ class Chart extends Class {
 
         if (point) {
             this._focusElement(point);
+            this._displayTooltip(point);
         }
     }
 
@@ -1228,6 +1258,8 @@ class Chart extends Class {
         focusState.focusedLegendItemIndex = 0;
         this._focusElement(this._getFocusedLegendItem());
         focusState.legendInFocus = true;
+
+        this._hideTooltip();
     }
 
     _focusLegendItem(args) {
@@ -1366,6 +1398,12 @@ class Chart extends Class {
         }
     }
 
+    _hideTooltip() {
+        if (this._tooltip) {
+            this._tooltip.hide();
+        }
+    }
+
     _displayInactiveOpacity(activePoint, multipleSeries, highlightPoints) {
         const chartInstance = this._activeChartInstance = this._chartInstanceFromPoint(activePoint);
         if (!chartInstance) {
@@ -1690,13 +1728,13 @@ class Chart extends Class {
     }
 
     _unsetActivePoint(options) {
-        const { _tooltip: tooltip, _highlight: highlight } = this;
+        const { _highlight: highlight } = this;
 
         this._activePoint = null;
         this._hoveredPoint = null;
 
-        if (tooltip && !(options && options.keepTooltipOpen)) {
-            tooltip.hide();
+        if (!options || !options.keepTooltipOpen) {
+            this._hideTooltip();
         }
 
         this._tooltipCategoryIx = null;

package/dist/es2015/common/constants.js

@@ -18,6 +18,8 @@ export const DEFAULT_HEIGHT = 400;
 export const DEFAULT_PRECISION = 10;
 export const DEFAULT_WIDTH = 600;
 export const END = "end";
+export const ENTER = "Enter";
+export const ESCAPE = "Escape";
 export const FORMAT_REGEX = /\{\d+:?/;
 export const HEIGHT = "height";
 export const HIGHLIGHT_ZINDEX = 100;