highcharts 9.3.3 → 10.2.0

package/bower.json

@@ -1,6 +1,6 @@
 {
   "name": "highcharts",
-  "version": "9.3.3",
+  "version": "10.2.0",
   "main": "highcharts.js",
   "license": "https://www.highcharts.com/license",
   "types": "highcharts.d.ts"

package/css/highcharts.css

@@ -813,16 +813,16 @@ input.highcharts-range-selector {
   font-weight: bold;
 }
 
-/* Highmaps */
+/* Highcharts Maps */
 .highcharts-map-series .highcharts-point {
   transition: fill 500ms, fill-opacity 500ms, stroke-width 250ms;
   stroke: #cccccc;
+  stroke-width: inherit;
 }
 
 .highcharts-map-series .highcharts-point-hover {
   transition: fill 0ms, fill-opacity 0ms;
   fill-opacity: 0.5;
-  stroke-width: 2px;
 }
 
 .highcharts-mapline-series .highcharts-point {
@@ -839,6 +839,12 @@ input.highcharts-range-selector {
   text-align: center;
 }
 
+.highcharts-mapview-inset-border {
+  stroke: #cccccc;
+  stroke-width: 1px;
+  fill: none;
+}
+
 .highcharts-coloraxis {
   stroke-width: 0;
 }
@@ -894,6 +900,17 @@ input.highcharts-range-selector {
   color: #ffffff;
 }
 
+/* Breadcrumbs */
+.highcharts-breadcrumbs-button {
+  fill: none;
+  stroke-width: 0;
+  cursor: pointer;
+}
+
+.highcharts-breadcrumbs-separator {
+  fill: #666666;
+}
+
 /* Drilldown module */
 .highcharts-drilldown-point {
   cursor: pointer;

package/css/highcharts.scss

@@ -719,15 +719,15 @@ input.highcharts-range-selector {
     font-weight: bold;
 }
 
-/* Highmaps */
+/* Highcharts Maps */
 .highcharts-map-series .highcharts-point {
     transition: fill 500ms, fill-opacity 500ms, stroke-width 250ms;
     stroke: $neutral-color-20;
+    stroke-width: inherit;
 }
 .highcharts-map-series .highcharts-point-hover {
     transition: fill 0ms, fill-opacity 0ms;
     fill-opacity: 0.5;
-    stroke-width: 2px;
 }
 .highcharts-mapline-series .highcharts-point {
     fill: none;
@@ -740,6 +740,11 @@ input.highcharts-range-selector {
     font-weight: bold;
     text-align: center;
 }
+.highcharts-mapview-inset-border {
+    stroke: $neutral-color-20;
+    stroke-width: 1px;
+    fill: none;
+}
 .highcharts-coloraxis {
     stroke-width: 0;
 }
@@ -787,6 +792,16 @@ input.highcharts-range-selector {
     color: $background-color;
 }
 
+/* Breadcrumbs */
+.highcharts-breadcrumbs-button {
+    fill: none;
+    stroke-width: 0;
+    cursor: pointer;
+}
+.highcharts-breadcrumbs-separator {
+    fill: $neutral-color-60;
+}
+
 /* Drilldown module */
 .highcharts-drilldown-point {
     cursor: pointer;

package/css/themes/dark-unica.css

@@ -874,16 +874,16 @@ input.highcharts-range-selector {
   font-weight: bold;
 }
 
-/* Highmaps */
+/* Highcharts Maps */
 .highcharts-map-series .highcharts-point {
   transition: fill 500ms, fill-opacity 500ms, stroke-width 250ms;
   stroke: #606063;
+  stroke-width: inherit;
 }
 
 .highcharts-map-series .highcharts-point-hover {
   transition: fill 0ms, fill-opacity 0ms;
   fill-opacity: 0.5;
-  stroke-width: 2px;
 }
 
 .highcharts-mapline-series .highcharts-point {
@@ -900,6 +900,12 @@ input.highcharts-range-selector {
   text-align: center;
 }
 
+.highcharts-mapview-inset-border {
+  stroke: #606063;
+  stroke-width: 1px;
+  fill: none;
+}
+
 .highcharts-coloraxis {
   stroke-width: 0;
 }
@@ -955,6 +961,17 @@ input.highcharts-range-selector {
   color: #2a2a2b;
 }
 
+/* Breadcrumbs */
+.highcharts-breadcrumbs-button {
+  fill: none;
+  stroke-width: 0;
+  cursor: pointer;
+}
+
+.highcharts-breadcrumbs-separator {
+  fill: #E0E0E3;
+}
+
 /* Drilldown module */
 .highcharts-drilldown-point {
   cursor: pointer;

package/css/themes/grid-light.css

@@ -827,16 +827,16 @@ input.highcharts-range-selector {
   font-weight: bold;
 }
 
-/* Highmaps */
+/* Highcharts Maps */
 .highcharts-map-series .highcharts-point {
   transition: fill 500ms, fill-opacity 500ms, stroke-width 250ms;
   stroke: #cccccc;
+  stroke-width: inherit;
 }
 
 .highcharts-map-series .highcharts-point-hover {
   transition: fill 0ms, fill-opacity 0ms;
   fill-opacity: 0.5;
-  stroke-width: 2px;
 }
 
 .highcharts-mapline-series .highcharts-point {
@@ -853,6 +853,12 @@ input.highcharts-range-selector {
   text-align: center;
 }
 
+.highcharts-mapview-inset-border {
+  stroke: #cccccc;
+  stroke-width: 1px;
+  fill: none;
+}
+
 .highcharts-coloraxis {
   stroke-width: 0;
 }
@@ -908,6 +914,17 @@ input.highcharts-range-selector {
   color: #ffffff;
 }
 
+/* Breadcrumbs */
+.highcharts-breadcrumbs-button {
+  fill: none;
+  stroke-width: 0;
+  cursor: pointer;
+}
+
+.highcharts-breadcrumbs-separator {
+  fill: #666666;
+}
+
 /* Drilldown module */
 .highcharts-drilldown-point {
   cursor: pointer;

package/css/themes/sand-signika.css

@@ -843,16 +843,16 @@ input.highcharts-range-selector {
   font-weight: bold;
 }
 
-/* Highmaps */
+/* Highcharts Maps */
 .highcharts-map-series .highcharts-point {
   transition: fill 500ms, fill-opacity 500ms, stroke-width 250ms;
   stroke: #cccccc;
+  stroke-width: inherit;
 }
 
 .highcharts-map-series .highcharts-point-hover {
   transition: fill 0ms, fill-opacity 0ms;
   fill-opacity: 0.5;
-  stroke-width: 2px;
 }
 
 .highcharts-mapline-series .highcharts-point {
@@ -869,6 +869,12 @@ input.highcharts-range-selector {
   text-align: center;
 }
 
+.highcharts-mapview-inset-border {
+  stroke: #cccccc;
+  stroke-width: 1px;
+  fill: none;
+}
+
 .highcharts-coloraxis {
   stroke-width: 0;
 }
@@ -924,6 +930,17 @@ input.highcharts-range-selector {
   color: none;
 }
 
+/* Breadcrumbs */
+.highcharts-breadcrumbs-button {
+  fill: none;
+  stroke-width: 0;
+  cursor: pointer;
+}
+
+.highcharts-breadcrumbs-separator {
+  fill: #666666;
+}
+
 /* Drilldown module */
 .highcharts-drilldown-point {
   cursor: pointer;

package/es-modules/Accessibility/A11yI18n.js

@@ -14,7 +14,7 @@
 import F from '../Core/FormatUtilities.js';
 var format = F.format;
 import U from '../Core/Utilities.js';
-var pick = U.pick;
+var getNestedProperty = U.getNestedProperty, pick = U.pick;
 /* *
  *
  *  Composition
@@ -71,7 +71,7 @@ var A11yI18nComposition;
             var eachEnd = statement.slice(eachStart).indexOf(')') + eachStart, preEach = statement.substring(0, eachStart), postEach = statement.substring(eachEnd + 1), eachStatement = statement.substring(eachStart + 6, eachEnd), eachArguments = eachStatement.split(',');
             var lenArg = Number(eachArguments[1]), len = void 0;
             result = '';
-            arr = ctx[eachArguments[0]];
+            arr = getNestedProperty(eachArguments[0], ctx);
             if (arr) {
                 lenArg = isNaN(lenArg) ? arr.length : lenArg;
                 len = lenArg < 0 ?
@@ -86,7 +86,7 @@ var A11yI18nComposition;
         }
         // Dealing with a plural-function?
         if (pluralStart > -1) {
-            var pluralEnd = (statement.slice(pluralStart).indexOf(')') + pluralStart), pluralStatement = statement.substring(pluralStart + 8, pluralEnd), pluralArguments = pluralStatement.split(','), num = Number(ctx[pluralArguments[0]]);
+            var pluralEnd = (statement.slice(pluralStart).indexOf(')') + pluralStart), pluralStatement = statement.substring(pluralStart + 8, pluralEnd), pluralArguments = pluralStatement.split(','), num = Number(getNestedProperty(pluralArguments[0], ctx));
             switch (num) {
                 case 0:
                     result = pick(pluralArguments[4], pluralArguments[1]);
@@ -106,7 +106,7 @@ var A11yI18nComposition;
         if (indexStart > -1) {
             var arrayName = statement.substring(0, indexStart), ix = Number(statement.substring(indexStart + 1, indexEnd));
             var val = void 0;
-            arr = ctx[arrayName];
+            arr = getNestedProperty(arrayName, ctx);
             if (!isNaN(ix) && arr) {
                 if (ix < 0) {
                     val = arr[arr.length + ix];

package/es-modules/Accessibility/Accessibility.js

@@ -30,8 +30,8 @@ import SeriesComponent from './Components/SeriesComponent/SeriesComponent.js';
 import ZoomComponent from './Components/ZoomComponent.js';
 import whcm from './HighContrastMode.js';
 import highContrastTheme from './HighContrastTheme.js';
-import defaultOptionsA11Y from './Options/Options.js';
-import defaultLangOptions from './Options/LangOptions.js';
+import defaultOptionsA11Y from './Options/A11yDefaults.js';
+import defaultLangOptions from './Options/LangDefaults.js';
 import copyDeprecatedOptions from './Options/DeprecatedOptions.js';
 /* *
  *
@@ -324,7 +324,6 @@ var Accessibility = /** @class */ (function () {
         LegendComponent.compose(ChartClass, LegendClass);
         MenuComponent.compose(ChartClass);
         SeriesComponent.compose(ChartClass, PointClass, SeriesClass);
-        ZoomComponent.compose(AxisClass);
         // RangeSelector
         A11yI18n.compose(ChartClass);
         FocusBorder.compose(ChartClass, SVGElementClass);
@@ -345,7 +344,7 @@ var Accessibility = /** @class */ (function () {
                 });
             });
             // Direct updates (events happen after render)
-            ['afterDrilldown', 'drillupall'].forEach(function (event) {
+            ['afterApplyDrilldown', 'drillupall'].forEach(function (event) {
                 addEvent(ChartClass, event, function chartOnAfterDrilldown() {
                     var a11y = this.accessibility;
                     if (a11y && !a11y.zombie) {

package/es-modules/Accessibility/Components/AnnotationsA11y.js

@@ -111,7 +111,7 @@ function getAnnotationListItems(chart) {
     var labels = getChartAnnotationLabels(chart);
     return labels.map(function (label) {
         var desc = escapeStringForHTML(stripHTMLTagsFromString(getAnnotationLabelDescription(label)));
-        return desc ? "<li>" + desc + "</li>" : '';
+        return desc ? "<li>".concat(desc, "</li>") : '';
     });
 }
 /**
@@ -127,7 +127,7 @@ function getAnnotationsInfoHTML(chart) {
         return '';
     }
     var annotationItems = getAnnotationListItems(chart);
-    return "<ul style=\"list-style-type: none\">" + annotationItems.join(' ') + "</ul>";
+    return "<ul style=\"list-style-type: none\">".concat(annotationItems.join(' '), "</ul>");
 }
 /**
  * Return the texts for the annotation(s) connected to a point, or empty array
@@ -144,7 +144,7 @@ function getPointAnnotationTexts(point) {
     if (!pointLabels.length) {
         return [];
     }
-    return pointLabels.map(function (label) { return "" + getLabelText(label); });
+    return pointLabels.map(function (label) { return "".concat(getLabelText(label)); });
 }
 /* *
  *

package/es-modules/Accessibility/Components/ContainerComponent.js

@@ -14,10 +14,12 @@ var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
     return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
@@ -97,20 +99,19 @@ var ContainerComponent = /** @class */ (function (_super) {
         }
     };
     /**
+     * Set attributes on the chart container element.
      * @private
      */
     ContainerComponent.prototype.setRenderToAttrs = function () {
-        var chart = this.chart;
-        if (chart.options.accessibility.landmarkVerbosity !== 'disabled') {
-            chart.renderTo.setAttribute('role', 'region');
-        }
-        else {
-            chart.renderTo.removeAttribute('role');
-        }
-        chart.renderTo.setAttribute('aria-label', chart.langFormat('accessibility.chartContainerLabel', {
+        var chart = this.chart, shouldHaveLandmark = chart.options.accessibility
+            .landmarkVerbosity !== 'disabled', containerLabel = chart.langFormat('accessibility.chartContainerLabel', {
             title: getChartTitle(chart),
             chart: chart
-        }));
+        });
+        if (containerLabel) {
+            chart.renderTo.setAttribute('role', shouldHaveLandmark ? 'region' : 'group');
+            chart.renderTo.setAttribute('aria-label', containerLabel);
+        }
     };
     /**
      * @private

package/es-modules/Accessibility/Components/InfoRegionsComponent.js

@@ -14,10 +14,12 @@ var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
     return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
@@ -90,11 +92,12 @@ function buildTypeDescriptionFromSeries(chart, types, context) {
  * @return {string} The text description of the chart type.
  */
 function getTypeDescription(chart, types) {
-    var firstType = types[0], firstSeries = chart.series && chart.series[0] || {}, formatContext = {
+    var firstType = types[0], firstSeries = chart.series && chart.series[0] || {}, mapTitle = chart.mapView && chart.mapView.geoMap &&
+        chart.mapView.geoMap.title, formatContext = {
         numSeries: chart.series.length,
         numPoints: firstSeries.points && firstSeries.points.length,
         chart: chart,
-        mapTitle: firstSeries.mapTitle
+        mapTitle: mapTitle
     };
     if (!firstType) {
         return getTypeDescForEmptyChart(chart, formatContext);
@@ -280,27 +283,28 @@ var InfoRegionsComponent = /** @class */ (function (_super) {
             if (sectionDiv.parentNode) {
                 sectionDiv.parentNode.removeChild(sectionDiv);
             }
-            delete region.element;
+            region.element = null;
         }
     };
     /**
+     * Apply a11y attributes to a screen reader info section
      * @private
      * @param {Highcharts.HTMLDOMElement} sectionDiv The section element
      * @param {string} regionKey Name/key of the region we are setting attrs for
      */
     InfoRegionsComponent.prototype.setScreenReaderSectionAttribs = function (sectionDiv, regionKey) {
-        var labelLangKey = ('accessibility.screenReaderSection.' + regionKey + 'RegionLabel'), chart = this.chart, labelText = chart.langFormat(labelLangKey, { chart: chart, chartTitle: getChartTitle(chart) }), sectionId = 'highcharts-screen-reader-region-' + regionKey + '-' +
-            chart.index;
+        var chart = this.chart, labelText = chart.langFormat('accessibility.screenReaderSection.' + regionKey +
+            'RegionLabel', { chart: chart, chartTitle: getChartTitle(chart) }), sectionId = "highcharts-screen-reader-region-".concat(regionKey, "-").concat(chart.index);
         attr(sectionDiv, {
             id: sectionId,
-            'aria-label': labelText
+            'aria-label': labelText || void 0
         });
         // Sections are wrapped to be positioned relatively to chart in case
         // elements inside are tabbed to.
         sectionDiv.style.position = 'relative';
-        if (chart.options.accessibility.landmarkVerbosity === 'all' &&
-            labelText) {
-            sectionDiv.setAttribute('role', 'region');
+        if (labelText) {
+            sectionDiv.setAttribute('role', chart.options.accessibility.landmarkVerbosity === 'all' ?
+                'region' : 'group');
         }
     };
     /**
@@ -499,7 +503,10 @@ var InfoRegionsComponent = /** @class */ (function (_super) {
             return axes.length > 1 || axes[0] &&
                 pick(axes[0].options.accessibility &&
                     axes[0].options.accessibility.enabled, defaultCondition);
-        }, hasNoMap = !!chart.types && chart.types.indexOf('map') < 0, hasCartesian = !!chart.hasCartesianSeries, showXAxes = shouldDescribeColl('xAxis', !chart.angular && hasCartesian && hasNoMap), showYAxes = shouldDescribeColl('yAxis', hasCartesian && hasNoMap), desc = {};
+        }, hasNoMap = !!chart.types &&
+            chart.types.indexOf('map') < 0 &&
+            chart.types.indexOf('treemap') < 0 &&
+            chart.types.indexOf('tilemap') < 0, hasCartesian = !!chart.hasCartesianSeries, showXAxes = shouldDescribeColl('xAxis', !chart.angular && hasCartesian && hasNoMap), showYAxes = shouldDescribeColl('yAxis', hasCartesian && hasNoMap), desc = {};
         if (showXAxes) {
             desc.xAxis = this.getAxisDescriptionText('xAxis');
         }

package/es-modules/Accessibility/Components/LegendComponent.js

@@ -14,10 +14,12 @@ var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
     return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
@@ -26,6 +28,7 @@ var __extends = (this && this.__extends) || (function () {
 import A from '../../Core/Animation/AnimationUtilities.js';
 var animObject = A.animObject;
 import H from '../../Core/Globals.js';
+var doc = H.doc;
 import Legend from '../../Core/Legend/Legend.js';
 import U from '../../Core/Utilities.js';
 var addEvent = U.addEvent, fireEvent = U.fireEvent, isNumber = U.isNumber, pick = U.pick, syncTimeout = U.syncTimeout;
@@ -40,7 +43,6 @@ var stripHTMLTags = HU.stripHTMLTagsFromString, addClass = HU.addClass, removeCl
  *  Functions
  *
  * */
-/* eslint-disable valid-jsdoc */
 /**
  * @private
  */
@@ -59,6 +61,19 @@ function shouldDoLegendA11y(chart) {
         !(chart.colorAxis && chart.colorAxis.length) &&
         legendA11yOptions.enabled !== false);
 }
+/**
+ * @private
+ */
+function setLegendItemHoverState(hoverActive, legendItem) {
+    legendItem.setState(hoverActive ? 'hover' : '', true);
+    ['legendGroup', 'legendItem', 'legendSymbol'].forEach(function (i) {
+        var obj = legendItem[i];
+        var el = obj && obj.element || obj;
+        if (el) {
+            fireEvent(el, hoverActive ? 'mouseover' : 'mouseout');
+        }
+    });
+}
 /* *
  *
  *  Class
@@ -81,6 +96,7 @@ var LegendComponent = /** @class */ (function (_super) {
          * */
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.highlightedLegendItemIx = NaN;
+        _this.proxyGroup = null;
         return _this;
     }
     /* *
@@ -88,7 +104,6 @@ var LegendComponent = /** @class */ (function (_super) {
      *  Functions
      *
      * */
-    /* eslint-disable valid-jsdoc */
     /**
      * Init the component
      * @private
@@ -206,12 +221,19 @@ var LegendComponent = /** @class */ (function (_super) {
      * @private
      */
     LegendComponent.prototype.recreateProxies = function () {
+        var focusedElement = doc.activeElement;
+        var proxyGroup = this.proxyGroup;
+        var shouldRestoreFocus = focusedElement && proxyGroup &&
+            proxyGroup.contains(focusedElement);
         this.removeProxies();
         if (shouldDoLegendA11y(this.chart)) {
             this.addLegendProxyGroup();
             this.proxyLegendItems();
             this.updateLegendItemProxyVisibility();
             this.updateLegendTitle();
+            if (shouldRestoreFocus) {
+                this.chart.highlightLegendItem(this.highlightedLegendItemIx);
+            }
             return true;
         }
         return false;
@@ -247,7 +269,7 @@ var LegendComponent = /** @class */ (function (_super) {
         var a11yOptions = this.chart.options.accessibility;
         var groupRole = a11yOptions.landmarkVerbosity === 'all' ?
             'region' : null;
-        this.proxyProvider.addGroup('legend', 'ul', {
+        this.proxyGroup = this.proxyProvider.addGroup('legend', 'ul', {
             // Filled by updateLegendTitle, to keep up to date without
             // recreating group
             'aria-label': '_placeholder_',
@@ -328,21 +350,19 @@ var LegendComponent = /** @class */ (function (_super) {
             validate: function () {
                 return component.shouldHaveLegendNavigation();
             },
-            init: function (direction) {
-                return component.onKbdNavigationInit(direction);
+            init: function () {
+                chart.highlightLegendItem(0);
+                component.highlightedLegendItemIx = 0;
             },
             terminate: function () {
                 component.highlightedLegendItemIx = -1;
-                chart.legend.allItems.forEach(function (item) { return item.setState('', true); });
+                chart.legend.allItems.forEach(function (item) { return setLegendItemHoverState(false, item); });
             }
         });
     };
     /**
+     * Arrow key navigation
      * @private
-     * @param {Highcharts.KeyboardNavigationHandler} keyboardNavigationHandler
-     * @param {number} keyCode
-     * @return {number}
-     * Response code
      */
     LegendComponent.prototype.onKbdArrowKey = function (keyboardNavigationHandler, keyCode) {
         var keys = this.keyCodes, response = keyboardNavigationHandler.response, chart = this.chart, a11yOptions = chart.options.accessibility, numItems = chart.legend.allItems.length, direction = (keyCode === keys.left || keyCode === keys.up) ? -1 : 1;
@@ -356,8 +376,7 @@ var LegendComponent = /** @class */ (function (_super) {
             keyboardNavigationHandler.init(direction);
             return response.success;
         }
-        // No wrap, move
-        return response[direction > 0 ? 'next' : 'prev'];
+        return response.success;
     };
     /**
      * @private
@@ -383,15 +402,6 @@ var LegendComponent = /** @class */ (function (_super) {
             legendA11yOptions.keyboardNavigation &&
             legendA11yOptions.keyboardNavigation.enabled);
     };
-    /**
-     * @private
-     * @param {number} direction
-     */
-    LegendComponent.prototype.onKbdNavigationInit = function (direction) {
-        var chart = this.chart, lastIx = chart.legend.allItems.length - 1, ixToHighlight = direction > 0 ? 0 : lastIx;
-        chart.highlightLegendItem(ixToHighlight);
-        this.highlightedLegendItemIx = ixToHighlight;
-    };
     return LegendComponent;
 }(AccessibilityComponent));
 /* *
@@ -428,7 +438,7 @@ var LegendComponent = /** @class */ (function (_super) {
         var itemToHighlight = items[ix];
         if (itemToHighlight) {
             if (isNumber(oldIx) && items[oldIx]) {
-                fireEvent(items[oldIx].legendGroup.element, 'mouseout');
+                setLegendItemHoverState(false, items[oldIx]);
             }
             scrollLegendToItem(this.legend, ix);
             var legendItemProp = itemToHighlight.legendItem;
@@ -437,9 +447,7 @@ var LegendComponent = /** @class */ (function (_super) {
             if (legendItemProp && legendItemProp.element && proxyBtn) {
                 this.setFocusToElement(legendItemProp, proxyBtn);
             }
-            if (itemToHighlight.legendGroup) {
-                fireEvent(itemToHighlight.legendGroup.element, 'mouseover');
-            }
+            setLegendItemHoverState(true, itemToHighlight);
             return true;
         }
         return false;