highcharts 9.3.1 → 10.0.0

package/modules/accessibility.src.js

@@ -1,5 +1,5 @@
 /**
- * @license Highcharts JS v9.3.1 (2021-11-05)
+ * @license Highcharts JS v10.0.0 (2022-03-07)
  *
  * Accessibility module
  *
@@ -8,7 +8,6 @@
  *
  * License: www.highcharts.com/license
  */
-'use strict';
 (function (factory) {
     if (typeof module === 'object' && module.exports) {
         factory['default'] = factory;
@@ -23,10 +22,20 @@
         factory(typeof Highcharts !== 'undefined' ? Highcharts : undefined);
     }
 }(function (Highcharts) {
+    'use strict';
     var _modules = Highcharts ? Highcharts._modules : {};
     function _registerModule(obj, path, args, fn) {
         if (!obj.hasOwnProperty(path)) {
             obj[path] = fn.apply(null, args);
+
+            if (typeof CustomEvent === 'function') {
+                window.dispatchEvent(
+                    new CustomEvent(
+                        'HighchartsModuleLoaded',
+                        { detail: { path: path, module: obj[path] }
+                    })
+                );
+            }
         }
     }
     _registerModule(_modules, 'Accessibility/A11yI18n.js', [_modules['Core/FormatUtilities.js'], _modules['Core/Utilities.js']], function (F, U) {
@@ -88,13 +97,9 @@
              *
              * @private
              * @function formatExtendedStatement
-             *
              * @param {string} statement
-             *
              * @param {Highcharts.Dictionary<*>} ctx
              * Context to apply to the format string.
-             *
-             * @return {string}
              */
             function formatExtendedStatement(statement, ctx) {
                 var eachStart = statement.indexOf('#each('), pluralStart = statement.indexOf('#plural('), indexStart = statement.indexOf('['), indexEnd = statement.indexOf(']');
@@ -121,7 +126,7 @@
                 }
                 // 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(ctx[pluralArguments[0]]);
                     switch (num) {
                         case 0:
                             result = pick(pluralArguments[4], pluralArguments[1]);
@@ -456,8 +461,6 @@
         }
         /**
          * @private
-         * @param {string} str
-         * @return {string}
          */
         function escapeStringForHTML(str) {
             return str
@@ -470,18 +473,14 @@
         }
         /**
          * Get an element by ID
-         * @param {string} id
          * @private
-         * @return {Highcharts.HTMLDOMElement|Highcharts.SVGDOMElement|null}
          */
         function getElement(id) {
             return doc.getElementById(id);
         }
         /**
          * Get a fake mouse event of a given type
-         * @param {string} type
          * @private
-         * @return {global.MouseEvent}
          */
         function getFakeMouseEvent(type, position) {
             var pos = position || {
@@ -596,8 +595,6 @@
         /**
          * Utility function. Reverses child nodes of a DOM element.
          * @private
-         * @param {Highcharts.HTMLDOMElement|Highcharts.SVGDOMElement} node
-         * @return {void}
          */
         function reverseChildNodes(node) {
             var i = node.childNodes.length;
@@ -609,8 +606,6 @@
          * Used for aria-label attributes, painting on a canvas will fail if the
          * text contains tags.
          * @private
-         * @param {string} str
-         * @return {string}
          */
         function stripHTMLTagsFromString(str) {
             return typeof str === 'string' ?
@@ -620,8 +615,6 @@
          * Utility function for hiding an element visually, but still keeping it
          * available to screen reader users.
          * @private
-         * @param {Highcharts.HTMLDOMElement} element
-         * @return {void}
          */
         function visuallyHideElement(element) {
             css(element, {
@@ -685,12 +678,14 @@
         /* eslint-disable valid-jsdoc */
         /**
          * Fire an event on an element that is either wrapped by Highcharts,
-         * or a DOM element
+         * or a DOM element.
+         * @private
          */
         function fireEventOnWrappedOrUnwrappedElement(el, eventObject) {
             var type = eventObject.type;
             var hcEvents = el.hcEvents;
-            if (doc.createEvent && (el.dispatchEvent || el.fireEvent)) {
+            if (doc.createEvent &&
+                (el.dispatchEvent || el.fireEvent)) {
                 if (el.dispatchEvent) {
                     el.dispatchEvent(eventObject);
                 }
@@ -706,7 +701,7 @@
             }
         }
         /**
-         * @return {string}
+         * @private
          */
         function getChartTitle(chart) {
             return stripHTMLTags(chart.options.title.text ||
@@ -714,8 +709,7 @@
         }
         /**
          * Return string with the axis name/title.
-         * @param {Highcharts.Axis} axis
-         * @return {string}
+         * @private
          */
         function getAxisDescription(axis) {
             return axis && (axis.userOptions && axis.userOptions.accessibility &&
@@ -728,8 +722,11 @@
         }
         /**
          * Return string with text description of the axis range.
-         * @param {Highcharts.Axis} axis The axis to get range desc of.
-         * @return {string} A string with the range description for the axis.
+         * @private
+         * @param {Highcharts.Axis} axis
+         * The axis to get range desc of.
+         * @return {string}
+         * A string with the range description for the axis.
          */
         function getAxisRangeDescription(axis) {
             var axisOptions = axis.options || {};
@@ -752,8 +749,7 @@
         }
         /**
          * Describe the range of a category axis.
-         * @param {Highcharts.Axis} axis
-         * @return {string}
+         * @private
          */
         function getCategoryAxisRangeDesc(axis) {
             var chart = axis.chart;
@@ -768,8 +764,7 @@
         }
         /**
          * Describe the length of the time window shown on an axis.
-         * @param {Highcharts.Axis} axis
-         * @return {string}
+         * @private
          */
         function getAxisTimeLengthDesc(axis) {
             var chart = axis.chart,
@@ -796,14 +791,14 @@
         }
         /**
          * Describe an axis from-to range.
-         * @param {Highcharts.Axis} axis
-         * @return {string}
+         * @private
          */
         function getAxisFromToDescription(axis) {
             var chart = axis.chart,
-                dateRangeFormat = (chart.options &&
-                    chart.options.accessibility &&
-                    chart.options.accessibility.screenReaderSection.axisRangeDateFormat ||
+                options = chart.options,
+                dateRangeFormat = (options &&
+                    options.accessibility &&
+                    options.accessibility.screenReaderSection.axisRangeDateFormat ||
                     ''),
                 format = function (axisKey) {
                     return axis.dateTime ? chart.time.dateFormat(dateRangeFormat,
@@ -852,8 +847,6 @@
          * Remove aria-hidden from element. Also unhides parents of the element, and
          * hides siblings that are not explicitly unhidden.
          * @private
-         * @param {Highcharts.Chart} chart
-         * @param {Highcharts.HTMLDOMElement|Highcharts.SVGDOMElement} element
          */
         function unhideChartElementFromAT(chart, element) {
             element.setAttribute('aria-hidden', false);
@@ -875,9 +868,6 @@
         /**
          * Hide series from screen readers.
          * @private
-         * @param {Highcharts.Series} series
-         * The series to hide
-         * @return {void}
          */
         function hideSeriesFromAT(series) {
             var seriesEl = getSeriesA11yElement(series);
@@ -888,9 +878,6 @@
         /**
          * Get series objects by series name.
          * @private
-         * @param {Highcharts.Chart} chart
-         * @param {string} name
-         * @return {Array<Highcharts.Series>}
          */
         function getSeriesFromName(chart, name) {
             if (!name) {
@@ -903,10 +890,6 @@
         /**
          * Get point in a series from x/y values.
          * @private
-         * @param {Array<Highcharts.Series>} series
-         * @param {number} x
-         * @param {number} y
-         * @return {Highcharts.Point|undefined}
          */
         function getPointFromXY(series, x, y) {
             var i = series.length,
@@ -923,9 +906,6 @@
         /**
          * Get relative position of point on an x/y axis from 0 to 1.
          * @private
-         * @param {Highcharts.Axis} axis
-         * @param {Highcharts.Point} point
-         * @return {number}
          */
         function getRelativePointAxisPosition(axis, point) {
             if (!defined(axis.dataMin) || !defined(axis.dataMax)) {
@@ -941,7 +921,6 @@
         /**
          * Get relative position of point on an x/y axis from 0 to 1.
          * @private
-         * @param {Highcharts.Point} point
          */
         function scrollToPoint(point) {
             var xAxis = point.series.xAxis,
@@ -1229,7 +1208,7 @@
             init: function () { },
             /**
              * Get keyboard navigation handler for this component.
-             * @return {Highcharts.KeyboardNavigationHandler}
+             * @private
              */
             getKeyboardNavigation: function () { },
             /**
@@ -1514,7 +1493,7 @@
             };
             /**
              * Empty handler to just set focus on chart
-             * @return {Highcharts.KeyboardNavigationHandler}
+             * @private
              */
             ContainerComponent.prototype.getKeyboardNavigation = function () {
                 var chart = this.chart;
@@ -1712,11 +1691,6 @@
                 // For text elements, apply x and y offset, #11397.
                 /**
                  * @private
-                 * @function
-                 *
-                 * @param {Highcharts.SVGElement} text
-                 *
-                 * @return {TextAnchorCorrectionObject}
                  */
                 function getTextAnchorCorrection(text) {
                     var posXCorrection = 0,
@@ -1912,12 +1886,12 @@
                     clearTimeout(this.clearAnnouncementRegionTimer);
                 }
                 this.clearAnnouncementRegionTimer = setTimeout(function () {
-                    _this.announceRegion.innerHTML = '';
+                    _this.announceRegion.innerHTML = AST.emptyHTML;
                     delete _this.clearAnnouncementRegionTimer;
                 }, 1000);
             };
             Announcer.prototype.addAnnounceRegion = function (type) {
-                var chartContainer = this.chart.announcerContainer || this.createAnnouncerContainer(),
+                var chartContainer = (this.chart.announcerContainer || this.createAnnouncerContainer()),
                     div = this.domElementProvider.createElement('div');
                 attr(div, {
                     'aria-hidden': false,
@@ -1994,7 +1968,7 @@
          * Get the text of an annotation label.
          *
          * @private
-         * @param {object} label The annotation label object
+         * @param {Object} label The annotation label object
          * @return {string} The text in the label.
          */
         function getLabelText(label) {
@@ -2010,7 +1984,7 @@
          * Describe an annotation label.
          *
          * @private
-         * @param {object} label The annotation label object to describe
+         * @param {Object} label The annotation label object to describe
          * @return {string} The description for the label.
          */
         function getAnnotationLabelDescription(label) {
@@ -2039,10 +2013,14 @@
             var pointValueDescriptions = points
                     .filter(function (p) { return !!p.graphic; }) // Filter out mock points
                     .map(getValueDesc)
-                    .filter(function (desc) { return !!desc; }); // Filter out points we can't describe
-                var numPoints = pointValueDescriptions.length;
-            var pointsSelector = numPoints > 1 ? 'MultiplePoints' : numPoints ? 'SinglePoint' : 'NoPoints';
-            var langFormatStr = 'accessibility.screenReaderSection.annotations.description' + pointsSelector;
+                    // Filter out points we can't describe
+                    .filter(function (desc) { return !!desc; });
+            var numPoints = pointValueDescriptions.length;
+            var pointsSelector = numPoints > 1 ?
+                    'MultiplePoints' : numPoints ?
+                    'SinglePoint' : 'NoPoints';
+            var langFormatStr = ('accessibility.screenReaderSection.annotations.description' +
+                    pointsSelector);
             var context = {
                     annotationText: labelText,
                     annotation: label,
@@ -2311,7 +2289,8 @@
                     after: {
                         element: null,
                         buildContent: function (chart) {
-                            var formatter = chart.options.accessibility.screenReaderSection
+                            var formatter = chart.options.accessibility
+                                    .screenReaderSection
                                     .afterChartFormatter;
                             return formatter ? formatter(chart) :
                                 component.defaultAfterChartFormatter();
@@ -2425,11 +2404,11 @@
             };
             /**
              * @private
-             * @return {string}
              */
             InfoRegionsComponent.prototype.defaultBeforeChartFormatter = function () {
-                var chart = this.chart;
-                var format = chart.options.accessibility.screenReaderSection.beforeChartFormat;
+                var chart = this.chart,
+                    format = chart.options.accessibility.screenReaderSection
+                        .beforeChartFormat;
                 if (!format) {
                     return '';
                 }
@@ -2467,11 +2446,11 @@
             };
             /**
              * @private
-             * @return {string}
              */
             InfoRegionsComponent.prototype.defaultAfterChartFormatter = function () {
                 var chart = this.chart;
-                var format = chart.options.accessibility.screenReaderSection.afterChartFormat;
+                var format = chart.options.accessibility.screenReaderSection
+                        .afterChartFormat;
                 if (!format) {
                     return '';
                 }
@@ -2483,7 +2462,6 @@
             };
             /**
              * @private
-             * @return {string}
              */
             InfoRegionsComponent.prototype.getLinkedDescription = function () {
                 var el = this.linkedDescriptionElement,
@@ -2492,7 +2470,6 @@
             };
             /**
              * @private
-             * @return {string}
              */
             InfoRegionsComponent.prototype.getLongdescText = function () {
                 var chartOptions = this.chart.options,
@@ -2506,7 +2483,6 @@
             };
             /**
              * @private
-             * @return {string}
              */
             InfoRegionsComponent.prototype.getTypeDescriptionText = function () {
                 var chart = this.chart;
@@ -2516,8 +2492,6 @@
             };
             /**
              * @private
-             * @param {string} buttonId
-             * @return {string}
              */
             InfoRegionsComponent.prototype.getDataTableButtonText = function (buttonId) {
                 var chart = this.chart,
@@ -2527,8 +2501,6 @@
             };
             /**
              * @private
-             * @param {string} buttonId
-             * @return {string}
              */
             InfoRegionsComponent.prototype.getSonifyButtonText = function (buttonId) {
                 var chart = this.chart;
@@ -2542,7 +2514,6 @@
             };
             /**
              * @private
-             * @return {string}
              */
             InfoRegionsComponent.prototype.getSubtitleText = function () {
                 var subtitle = (this.chart.options.subtitle);
@@ -2550,7 +2521,6 @@
             };
             /**
              * @private
-             * @return {string}
              */
             InfoRegionsComponent.prototype.getEndOfChartMarkerText = function () {
                 var chart = this.chart, markerText = chart.langFormat('accessibility.screenReaderSection.endOfChartMarker', { chart: chart }), id = 'highcharts-end-of-chart-marker-' + chart.index;
@@ -2613,7 +2583,8 @@
                     el.setAttribute('tabindex', -1);
                     el.onclick = function (e) {
                         var onPlayAsSoundClick = (chart.options.accessibility &&
-                                chart.options.accessibility.screenReaderSection.onPlayAsSoundClick);
+                                chart.options.accessibility.screenReaderSection
+                                    .onPlayAsSoundClick);
                         (onPlayAsSoundClick || defaultHandler).call(this, e, chart);
                     };
                 }
@@ -2640,7 +2611,6 @@
             /**
              * Return object with text description of each of the chart's axes.
              * @private
-             * @return {Highcharts.Dictionary<string>}
              */
             InfoRegionsComponent.prototype.getAxesDescription = function () {
                 var chart = this.chart,
@@ -2661,8 +2631,6 @@
             };
             /**
              * @private
-             * @param {string} collectionKey
-             * @return {string}
              */
             InfoRegionsComponent.prototype.getAxisDescriptionText = function (collectionKey) {
                 var chart = this.chart;
@@ -2736,17 +2704,13 @@
         /* eslint-disable valid-jsdoc */
         /**
          * Get the wrapped export button element of a chart.
-         *
          * @private
-         * @param {Highcharts.Chart} chart
-         * @returns {Highcharts.SVGElement}
          */
         function getExportMenuButtonElement(chart) {
             return chart.exportSVGElements && chart.exportSVGElements[0];
         }
         /**
          * @private
-         * @param {Highcharts.Chart} chart
          */
         function exportingShouldHaveA11y(chart) {
             var exportingOpts = chart.options.exporting,
@@ -2803,7 +2767,6 @@
                 if (menu) {
                     menu.setAttribute('aria-hidden', 'true');
                 }
-                this.isExportMenuShown = false;
                 this.setExportButtonExpandedState('false');
             };
             /**
@@ -2816,7 +2779,6 @@
                     this.addAccessibleContextMenuAttribs();
                     unhideChartElementFromAT(chart, menu);
                 }
-                this.isExportMenuShown = true;
                 this.setExportButtonExpandedState('true');
             };
             /**
@@ -2833,8 +2795,21 @@
              * proxy overlay.
              */
             MenuComponent.prototype.onChartRender = function () {
+                var chart = this.chart,
+                    focusEl = chart.focusElement,
+                    a11y = chart.accessibility;
                 this.proxyProvider.clearGroup('chartMenu');
                 this.proxyMenuButton();
+                if (this.exportButtonProxy &&
+                    focusEl &&
+                    focusEl === chart.exportingGroup) {
+                    if (focusEl.focusBorder) {
+                        chart.setFocusToElement(focusEl, this.exportButtonProxy.buttonElement);
+                    }
+                    else if (a11y) {
+                        a11y.keyboardNavigation.tabindexContainer.focus();
+                    }
+                }
             };
             /**
              * @private
@@ -2849,7 +2824,8 @@
                             chart: chart,
                             chartTitle: getChartTitle(chart)
                         }),
-                        'aria-expanded': false
+                        'aria-expanded': false,
+                        title: chart.options.lang.contextButtonTitle || null
                     });
                 }
             };
@@ -2895,7 +2871,7 @@
             };
             /**
              * Get keyboard navigation handler for this component.
-             * @return {Highcharts.KeyboardNavigationHandler}
+             * @private
              */
             MenuComponent.prototype.getKeyboardNavigation = function () {
                 var keys = this.keyCodes,
@@ -3003,7 +2979,7 @@
                 var chart = this.chart;
                 var curHighlightedItem = chart.exportDivElements[chart.highlightedExportItemIx];
                 var exportButtonElement = getExportMenuButtonElement(chart).element;
-                if (this.isExportMenuShown) {
+                if (chart.openMenu) {
                     this.fakeClickEvent(curHighlightedItem);
                 }
                 else {
@@ -3073,7 +3049,7 @@
             function chartHideExportMenu() {
                 var chart = this,
                     exportList = chart.exportDivElements;
-                if (exportList && chart.exportContextMenu) {
+                if (exportList && chart.exportContextMenu && chart.openMenu) {
                     // Reset hover states etc.
                     exportList.forEach(function (el) {
                         if (el &&
@@ -3094,10 +3070,6 @@
              *
              * @private
              * @function Highcharts.Chart#highlightExportItem
-             *
-             * @param {number} ix
-             *
-             * @return {boolean}
              */
             function chartHighlightExportItem(ix) {
                 var listItem = this.exportDivElements && this.exportDivElements[ix];
@@ -3129,7 +3101,6 @@
              *
              * @private
              * @function Highcharts.Chart#highlightLastExportItem
-             * @return {boolean}
              */
             function chartHighlightLastExportItem() {
                 var chart = this;
@@ -3184,7 +3155,7 @@
          * @class
          * @param {Highcharts.Chart} chart
          *        Chart object
-         * @param {object} components
+         * @param {Object} components
          *        Map of component names to AccessibilityComponent objects.
          * @name Highcharts.KeyboardNavigation
          */
@@ -3220,7 +3191,7 @@
              * @private
              * @param {Highcharts.Chart} chart
              *        Chart object
-             * @param {object} components
+             * @param {Object} components
              *        Map of component names to AccessibilityComponent objects.
              */
             KeyboardNavigation.prototype.init = function (chart, components) {
@@ -3264,7 +3235,8 @@
                     order.length) {
                     // We (still) have keyboard navigation. Update module list
                     this.modules = order.reduce(function (modules, componentName) {
-                        var navModules = components[componentName].getKeyboardNavigation();
+                        var navModules = components[componentName]
+                                .getKeyboardNavigation();
                         return modules.concat(navModules);
                     }, []);
                     this.updateExitAnchor();
@@ -3275,6 +3247,65 @@
                     this.removeExitAnchor();
                 }
             };
+            /**
+             * We use an exit anchor to move focus out of chart whenever we want, by
+             * setting focus to this div and not preventing the default tab action. We
+             * also use this when users come back into the chart by tabbing back, in
+             * order to navigate from the end of the chart.
+             * @private
+             */
+            KeyboardNavigation.prototype.updateExitAnchor = function () {
+                var endMarkerId = "highcharts-end-of-chart-marker-" + this.chart.index,
+                    endMarker = getElement(endMarkerId);
+                this.removeExitAnchor();
+                if (endMarker) {
+                    this.makeElementAnExitAnchor(endMarker);
+                    this.exitAnchor = endMarker;
+                }
+                else {
+                    this.createExitAnchor();
+                }
+            };
+            /**
+             * Move to prev/next module.
+             * @private
+             * @param {number} direction
+             * Direction to move. +1 for next, -1 for prev.
+             * @return {boolean}
+             * True if there was a valid module in direction.
+             */
+            KeyboardNavigation.prototype.move = function (direction) {
+                var curModule = this.modules && this.modules[this.currentModuleIx];
+                if (curModule && curModule.terminate) {
+                    curModule.terminate(direction);
+                }
+                // Remove existing focus border if any
+                if (this.chart.focusElement) {
+                    this.chart.focusElement.removeFocusBorder();
+                }
+                this.currentModuleIx += direction;
+                var newModule = this.modules && this.modules[this.currentModuleIx];
+                if (newModule) {
+                    if (newModule.validate && !newModule.validate()) {
+                        return this.move(direction); // Invalid module, recurse
+                    }
+                    if (newModule.init) {
+                        newModule.init(direction); // Valid module, init it
+                        return true;
+                    }
+                }
+                // No module
+                this.currentModuleIx = 0; // Reset counter
+                // Set focus to chart or exit anchor depending on direction
+                this.exiting = true;
+                if (direction > 0) {
+                    this.exitAnchor.focus();
+                }
+                else {
+                    this.tabindexContainer.focus();
+                }
+                return false;
+            };
             /**
              * Function to run on container focus
              * @private
@@ -3288,30 +3319,37 @@
                 if (!this.exiting &&
                     !this.tabbingInBackwards &&
                     !this.isClickingChart &&
-                    !focusComesFromChart &&
-                    this.modules[0]) {
-                    this.modules[0].init(1);
+                    !focusComesFromChart) {
+                    var ix = this.getFirstValidModuleIx();
+                    if (ix !== null) {
+                        this.currentModuleIx = ix;
+                        this.modules[ix].init(1);
+                    }
                 }
                 this.exiting = false;
             };
             /**
-             * Reset chart navigation state if we click outside the chart and it's
-             * not already reset.
+             * Reset chart navigation state if we mouse click and it's not already
+             * reset. Reset fully if outside the chart, otherwise just hide focus
+             * indicator.
              * @private
              */
             KeyboardNavigation.prototype.onMouseUp = function () {
                 delete this.isClickingChart;
-                if (!this.keyboardReset && !this.pointerIsOverChart) {
-                    var chart = this.chart,
-                        curMod = this.modules &&
-                            this.modules[this.currentModuleIx || 0];
-                    if (curMod && curMod.terminate) {
-                        curMod.terminate();
+                if (!this.keyboardReset) {
+                    var chart = this.chart;
+                    if (!this.pointerIsOverChart) {
+                        var curMod = this.modules &&
+                                this.modules[this.currentModuleIx || 0];
+                        if (curMod && curMod.terminate) {
+                            curMod.terminate();
+                        }
+                        this.currentModuleIx = 0;
                     }
                     if (chart.focusElement) {
                         chart.focusElement.removeFocusBorder();
+                        delete chart.focusElement;
                     }
-                    this.currentModuleIx = 0;
                     this.keyboardReset = true;
                 }
             };
@@ -3338,10 +3376,10 @@
                         preventDefault = true;
                     }
                     else if (response === curNavModule.response.prev) {
-                        preventDefault = this.prev();
+                        preventDefault = this.move(-1);
                     }
                     else if (response === curNavModule.response.next) {
-                        preventDefault = this.next();
+                        preventDefault = this.move(1);
                     }
                     if (preventDefault) {
                         e.preventDefault();
@@ -3349,79 +3387,6 @@
                     }
                 }
             };
-            /**
-             * Go to previous module.
-             * @private
-             */
-            KeyboardNavigation.prototype.prev = function () {
-                return this.move(-1);
-            };
-            /**
-             * Go to next module.
-             * @private
-             */
-            KeyboardNavigation.prototype.next = function () {
-                return this.move(1);
-            };
-            /**
-             * Move to prev/next module.
-             * @private
-             * @param {number} direction
-             * Direction to move. +1 for next, -1 for prev.
-             * @return {boolean}
-             * True if there was a valid module in direction.
-             */
-            KeyboardNavigation.prototype.move = function (direction) {
-                var curModule = this.modules && this.modules[this.currentModuleIx];
-                if (curModule && curModule.terminate) {
-                    curModule.terminate(direction);
-                }
-                // Remove existing focus border if any
-                if (this.chart.focusElement) {
-                    this.chart.focusElement.removeFocusBorder();
-                }
-                this.currentModuleIx += direction;
-                var newModule = this.modules && this.modules[this.currentModuleIx];
-                if (newModule) {
-                    if (newModule.validate && !newModule.validate()) {
-                        return this.move(direction); // Invalid module, recurse
-                    }
-                    if (newModule.init) {
-                        newModule.init(direction); // Valid module, init it
-                        return true;
-                    }
-                }
-                // No module
-                this.currentModuleIx = 0; // Reset counter
-                // Set focus to chart or exit anchor depending on direction
-                this.exiting = true;
-                if (direction > 0) {
-                    this.exitAnchor.focus();
-                }
-                else {
-                    this.tabindexContainer.focus();
-                }
-                return false;
-            };
-            /**
-             * We use an exit anchor to move focus out of chart whenever we want, by
-             * setting focus to this div and not preventing the default tab action. We
-             * also use this when users come back into the chart by tabbing back, in
-             * order to navigate from the end of the chart.
-             * @private
-             */
-            KeyboardNavigation.prototype.updateExitAnchor = function () {
-                var endMarkerId = 'highcharts-end-of-chart-marker-' + this.chart.index,
-                    endMarker = getElement(endMarkerId);
-                this.removeExitAnchor();
-                if (endMarker) {
-                    this.makeElementAnExitAnchor(endMarker);
-                    this.exitAnchor = endMarker;
-                }
-                else {
-                    this.createExitAnchor();
-                }
-            };
             /**
              * Chart container should have tabindex if navigation is enabled.
              * @private
@@ -3450,6 +3415,18 @@
                 }
             };
             /**
+             * Add new exit anchor to the chart.
+             * @private
+             */
+            KeyboardNavigation.prototype.createExitAnchor = function () {
+                var chart = this.chart,
+                    exitAnchor = this.exitAnchor = doc.createElement('div');
+                chart.renderTo.appendChild(exitAnchor);
+                this.makeElementAnExitAnchor(exitAnchor);
+            };
+            /**
+             * Add attributes and events to an element to make it function as an
+             * exit anchor.
              * @private
              */
             KeyboardNavigation.prototype.makeElementAnExitAnchor = function (el) {
@@ -3461,27 +3438,17 @@
                 this.addExitAnchorEventsToEl(el);
             };
             /**
-             * Add new exit anchor to the chart.
-             *
-             * @private
-             */
-            KeyboardNavigation.prototype.createExitAnchor = function () {
-                var chart = this.chart,
-                    exitAnchor = this.exitAnchor = doc.createElement('div');
-                chart.renderTo.appendChild(exitAnchor);
-                this.makeElementAnExitAnchor(exitAnchor);
-            };
-            /**
+             * Destroy the exit anchor and remove from DOM.
              * @private
              */
             KeyboardNavigation.prototype.removeExitAnchor = function () {
                 if (this.exitAnchor && this.exitAnchor.parentNode) {
-                    this.exitAnchor.parentNode
-                        .removeChild(this.exitAnchor);
+                    this.exitAnchor.parentNode.removeChild(this.exitAnchor);
                     delete this.exitAnchor;
                 }
             };
             /**
+             * Add focus handler to exit anchor element.
              * @private
              */
             KeyboardNavigation.prototype.addExitAnchorEventsToEl = function (element) {
@@ -3492,6 +3459,9 @@
                         focusComesFromChart = (e.relatedTarget &&
                             chart.container.contains(e.relatedTarget)),
                         comingInBackwards = !(focusComesFromChart || keyboardNavigation.exiting);
+                    if (chart.focusElement) {
+                        delete chart.focusElement;
+                    }
                     if (comingInBackwards) {
                         // Focus the container instead
                         keyboardNavigation.tabbingInBackwards = true;
@@ -3509,7 +3479,7 @@
                             if (curModule &&
                                 curModule.validate && !curModule.validate()) {
                                 // Invalid. Try moving backwards to find next valid.
-                                keyboardNavigation.prev();
+                                keyboardNavigation.move(-1);
                             }
                             else if (curModule) {
                                 // We have a valid module, init it
@@ -3523,6 +3493,21 @@
                     }
                 });
             };
+            /**
+             * Get the ix of the first module that either does not require validation or
+             * validates positively.
+             * @private
+             */
+            KeyboardNavigation.prototype.getFirstValidModuleIx = function () {
+                var len = this.modules.length;
+                for (var i = 0; i < len; ++i) {
+                    var mod = this.modules[i];
+                    if (!mod.validate || mod.validate()) {
+                        return i;
+                    }
+                }
+                return null;
+            };
             /**
              * Remove all traces of keyboard navigation.
              * @private
@@ -3558,6 +3543,7 @@
              * */
             /* eslint-disable valid-jsdoc */
             /**
+             * Composition function.
              * @private
              */
             function compose(ChartClass) {
@@ -3612,7 +3598,7 @@
 
         return KeyboardNavigation;
     });
-    _registerModule(_modules, 'Accessibility/Components/LegendComponent.js', [_modules['Core/Animation/AnimationUtilities.js'], _modules['Core/Chart/Chart.js'], _modules['Core/Globals.js'], _modules['Core/Legend/Legend.js'], _modules['Core/Utilities.js'], _modules['Accessibility/AccessibilityComponent.js'], _modules['Accessibility/KeyboardNavigationHandler.js'], _modules['Accessibility/Utils/HTMLUtilities.js'], _modules['Accessibility/Utils/ChartUtilities.js']], function (A, Chart, H, Legend, U, AccessibilityComponent, KeyboardNavigationHandler, HTMLUtilities, ChartUtils) {
+    _registerModule(_modules, 'Accessibility/Components/LegendComponent.js', [_modules['Core/Animation/AnimationUtilities.js'], _modules['Core/Globals.js'], _modules['Core/Legend/Legend.js'], _modules['Core/Utilities.js'], _modules['Accessibility/AccessibilityComponent.js'], _modules['Accessibility/KeyboardNavigationHandler.js'], _modules['Accessibility/Utils/ChartUtilities.js'], _modules['Accessibility/Utils/HTMLUtilities.js']], function (A, H, Legend, U, AccessibilityComponent, KeyboardNavigationHandler, CU, HU) {
         /* *
          *
          *  (c) 2009-2021 Øystein Moseng
@@ -3624,18 +3610,39 @@
          *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
          *
          * */
+        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]; };
+                return extendStatics(d, b);
+            };
+            return function (d, b) {
+                extendStatics(d, b);
+                function __() { this.constructor = d; }
+                d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+            };
+        })();
         var animObject = A.animObject;
+        var doc = H.doc;
         var addEvent = U.addEvent,
-            extend = U.extend,
             fireEvent = U.fireEvent,
             isNumber = U.isNumber,
             pick = U.pick,
             syncTimeout = U.syncTimeout;
-        var stripHTMLTags = HTMLUtilities.stripHTMLTagsFromString,
-            addClass = HTMLUtilities.addClass,
-            removeClass = HTMLUtilities.removeClass;
-        var getChartTitle = ChartUtils.getChartTitle;
-        /* eslint-disable no-invalid-this, valid-jsdoc */
+        var getChartTitle = CU.getChartTitle;
+        var stripHTMLTags = HU.stripHTMLTagsFromString,
+            addClass = HU.addClass,
+            removeClass = HU.removeClass;
+        /* *
+         *
+         *  Functions
+         *
+         * */
+        /* eslint-disable valid-jsdoc */
         /**
          * @private
          */
@@ -3657,46 +3664,23 @@
                 legendA11yOptions.enabled !== false);
         }
         /**
-         * Highlight legend item by index.
-         *
          * @private
-         * @function Highcharts.Chart#highlightLegendItem
-         *
-         * @param {number} ix
-         *
-         * @return {boolean}
          */
-        Chart.prototype.highlightLegendItem = function (ix) {
-            var items = this.legend.allItems;
-            var oldIx = this.accessibility &&
-                    this.accessibility.components.legend.highlightedLegendItemIx;
-            var itemToHighlight = items[ix];
-            if (itemToHighlight) {
-                if (isNumber(oldIx) && items[oldIx]) {
-                    fireEvent(items[oldIx].legendGroup.element, 'mouseout');
-                }
-                scrollLegendToItem(this.legend, ix);
-                var legendItemProp = itemToHighlight.legendItem;
-                var proxyBtn = itemToHighlight.a11yProxyElement && itemToHighlight.a11yProxyElement.buttonElement;
-                if (legendItemProp && legendItemProp.element && proxyBtn) {
-                    this.setFocusToElement(legendItemProp, proxyBtn);
-                }
-                if (itemToHighlight.legendGroup) {
-                    fireEvent(itemToHighlight.legendGroup.element, 'mouseover');
+        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');
                 }
-                return true;
-            }
-            return false;
-        };
-        // Keep track of pressed state for legend items
-        addEvent(Legend, 'afterColorizeItem', function (e) {
-            var chart = this.chart,
-                a11yOptions = chart.options.accessibility,
-                legendItem = e.item;
-            if (a11yOptions.enabled && legendItem && legendItem.a11yProxyElement) {
-                legendItem.a11yProxyElement.buttonElement.setAttribute('aria-pressed', e.visible ? 'true' : 'false');
-            }
-        });
+            });
+        }
+        /* *
+         *
+         *  Class
+         *
+         * */
         /**
          * The LegendComponent class
          *
@@ -3704,18 +3688,37 @@
          * @class
          * @name Highcharts.LegendComponent
          */
-        var LegendComponent = function () { };
-        LegendComponent.prototype = new AccessibilityComponent();
-        extend(LegendComponent.prototype, /** @lends Highcharts.LegendComponent */ {
+        var LegendComponent = /** @class */ (function (_super) {
+                __extends(LegendComponent, _super);
+            function LegendComponent() {
+                /* *
+                 *
+                 *  Properties
+                 *
+                 * */
+                var _this = _super !== null && _super.apply(this,
+                    arguments) || this;
+                _this.highlightedLegendItemIx = NaN;
+                _this.proxyGroup = null;
+                return _this;
+            }
+            /* *
+             *
+             *  Functions
+             *
+             * */
+            /* eslint-disable valid-jsdoc */
             /**
              * Init the component
              * @private
              */
-            init: function () {
+            LegendComponent.prototype.init = function () {
                 var component = this;
                 this.recreateProxies();
                 // Note: Chart could create legend dynamically, so events can not be
                 // tied to the component's chart's current legend.
+                // @todo 1. attach component to created legends
+                // @todo 2. move listeners to composition and access `this.component`
                 this.addEvent(Legend, 'afterScroll', function () {
                     if (this.chart === component.chart) {
                         component.proxyProvider.updateGroupProxyElementPositions('legend');
@@ -3734,15 +3737,16 @@
                     if (this.chart === component.chart &&
                         this.chart.renderer &&
                         component.recreateProxies()) {
-                        syncTimeout(function () { return component.proxyProvider.updateGroupProxyElementPositions('legend'); }, animObject(pick(this.chart.renderer.globalAnimation, true)).duration);
+                        syncTimeout(function () { return component.proxyProvider
+                            .updateGroupProxyElementPositions('legend'); }, animObject(pick(this.chart.renderer.globalAnimation, true)).duration);
                     }
                 });
-            },
+            };
             /**
              * Update visibility of legend items when using paged legend
              * @private
              */
-            updateLegendItemProxyVisibility: function () {
+            LegendComponent.prototype.updateLegendItemProxyVisibility = function () {
                 var chart = this.chart;
                 var legend = chart.legend;
                 var items = legend.allItems || [];
@@ -3756,8 +3760,11 @@
                         if (hasPages) {
                             var itemPage = item.pageIx || 0;
                             var y = item._legendItemPos ? item._legendItemPos[1] : 0;
-                            var h = item.legendItem ? Math.round(item.legendItem.getBBox().height) : 0;
-                            hide = y + h - legend.pages[itemPage] > clipHeight || itemPage !== curPage - 1;
+                            var h = item.legendItem ?
+                                    Math.round(item.legendItem.getBBox().height) :
+                                    0;
+                            hide = y + h - legend.pages[itemPage] > clipHeight ||
+                                itemPage !== curPage - 1;
                         }
                         if (hide) {
                             if (chart.styledMode) {
@@ -3773,19 +3780,19 @@
                         }
                     }
                 });
-            },
+            };
             /**
              * @private
              */
-            onChartRender: function () {
+            LegendComponent.prototype.onChartRender = function () {
                 if (!shouldDoLegendA11y(this.chart)) {
                     this.removeProxies();
                 }
-            },
+            };
             /**
              * @private
              */
-            highlightAdjacentLegendPage: function (direction) {
+            LegendComponent.prototype.highlightAdjacentLegendPage = function (direction) {
                 var chart = this.chart;
                 var legend = chart.legend;
                 var curPageIx = legend.currentPage || 1;
@@ -3803,41 +3810,48 @@
                         }
                     }
                 }
-            },
+            };
             /**
              * @private
              */
-            updateProxyPositionForItem: function (item) {
+            LegendComponent.prototype.updateProxyPositionForItem = function (item) {
                 if (item.a11yProxyElement) {
                     item.a11yProxyElement.refreshPosition();
                 }
-            },
+            };
             /**
              * Returns false if legend a11y is disabled and proxies were not created,
              * true otherwise.
              * @private
              */
-            recreateProxies: function () {
+            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;
-            },
+            };
             /**
              * @private
              */
-            removeProxies: function () {
+            LegendComponent.prototype.removeProxies = function () {
                 this.proxyProvider.removeGroup('legend');
-            },
+            };
             /**
              * @private
              */
-            updateLegendTitle: function () {
+            LegendComponent.prototype.updateLegendTitle = function () {
                 var chart = this.chart;
                 var legendTitle = stripHTMLTags((chart.legend &&
                         chart.legend.options.title &&
@@ -3851,22 +3865,25 @@
                 this.proxyProvider.updateGroupAttrs('legend', {
                     'aria-label': legendLabel
                 });
-            },
+            };
             /**
              * @private
              */
-            addLegendProxyGroup: function () {
+            LegendComponent.prototype.addLegendProxyGroup = function () {
                 var a11yOptions = this.chart.options.accessibility;
-                var groupRole = a11yOptions.landmarkVerbosity === 'all' ? 'region' : null;
-                this.proxyProvider.addGroup('legend', 'ul', {
+                var groupRole = a11yOptions.landmarkVerbosity === 'all' ?
+                        'region' : null;
+                this.proxyGroup = this.proxyProvider.addGroup('legend', 'ul', {
+                    // Filled by updateLegendTitle, to keep up to date without
+                    // recreating group
                     'aria-label': '_placeholder_',
                     role: groupRole
                 });
-            },
+            };
             /**
              * @private
              */
-            proxyLegendItems: function () {
+            LegendComponent.prototype.proxyLegendItems = function () {
                 var component = this,
                     items = (this.chart.legend &&
                         this.chart.legend.allItems || []);
@@ -3875,12 +3892,12 @@
                         component.proxyLegendItem(item);
                     }
                 });
-            },
+            };
             /**
              * @private
              * @param {Highcharts.BubbleLegendItem|Point|Highcharts.Series} item
              */
-            proxyLegendItem: function (item) {
+            LegendComponent.prototype.proxyLegendItem = function (item) {
                 if (!item.legendItem || !item.legendGroup) {
                     return;
                 }
@@ -3895,17 +3912,19 @@
                         'aria-label': itemLabel
                     };
                 // Considers useHTML
-                var proxyPositioningElement = item.legendGroup.div ? item.legendItem : item.legendGroup;
+                var proxyPositioningElement = item.legendGroup.div ?
+                        item.legendItem :
+                        item.legendGroup;
                 item.a11yProxyElement = this.proxyProvider.addProxyElement('legend', {
                     click: item.legendItem,
                     visual: proxyPositioningElement.element
                 }, attribs);
-            },
+            };
             /**
              * Get keyboard navigation handler for this component.
-             * @return {Highcharts.KeyboardNavigationHandler}
+             * @private
              */
-            getKeyboardNavigation: function () {
+            LegendComponent.prototype.getKeyboardNavigation = function () {
                 var keys = this.keyCodes,
                     component = this,
                     chart = this.chart;
@@ -3938,23 +3957,21 @@
                     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
              */
-            onKbdArrowKey: function (keyboardNavigationHandler, keyCode) {
+            LegendComponent.prototype.onKbdArrowKey = function (keyboardNavigationHandler, keyCode) {
                 var keys = this.keyCodes,
                     response = keyboardNavigationHandler.response,
                     chart = this.chart,
@@ -3971,50 +3988,119 @@
                     keyboardNavigationHandler.init(direction);
                     return response.success;
                 }
-                // No wrap, move
-                return response[direction > 0 ? 'next' : 'prev'];
-            },
+                return response.success;
+            };
+            /**
+             * @private
+             * @param {Highcharts.KeyboardNavigationHandler} keyboardNavigationHandler
+             * @return {number} Response code
+             */
+            LegendComponent.prototype.onKbdClick = function (keyboardNavigationHandler) {
+                var legendItem = this.chart.legend.allItems[this.highlightedLegendItemIx];
+                if (legendItem && legendItem.a11yProxyElement) {
+                    legendItem.a11yProxyElement.click();
+                }
+                return keyboardNavigationHandler.response.success;
+            };
+            /**
+             * @private
+             */
+            LegendComponent.prototype.shouldHaveLegendNavigation = function () {
+                var chart = this.chart,
+                    legendOptions = chart.options.legend || {},
+                    hasLegend = chart.legend && chart.legend.allItems,
+                    hasColorAxis = chart.colorAxis && chart.colorAxis.length,
+                    legendA11yOptions = (legendOptions.accessibility || {});
+                return !!(hasLegend &&
+                    chart.legend.display &&
+                    !hasColorAxis &&
+                    legendA11yOptions.enabled &&
+                    legendA11yOptions.keyboardNavigation &&
+                    legendA11yOptions.keyboardNavigation.enabled);
+            };
+            return LegendComponent;
+        }(AccessibilityComponent));
+        /* *
+         *
+         *  Class Namespace
+         *
+         * */
+        (function (LegendComponent) {
+            /* *
+             *
+             *  Declarations
+             *
+             * */
+            /* *
+             *
+             *  Constants
+             *
+             * */
+            var composedClasses = [];
+            /* *
+             *
+             *  Functions
+             *
+             * */
+            /* eslint-disable valid-jsdoc */
             /**
+             * Highlight legend item by index.
              * @private
-             * @param {Highcharts.KeyboardNavigationHandler} keyboardNavigationHandler
-             * @return {number} Response code
              */
-            onKbdClick: function (keyboardNavigationHandler) {
-                var legendItem = this.chart.legend.allItems[this.highlightedLegendItemIx];
-                if (legendItem && legendItem.a11yProxyElement) {
-                    legendItem.a11yProxyElement.click();
+            function chartHighlightLegendItem(ix) {
+                var items = this.legend.allItems;
+                var oldIx = this.accessibility &&
+                        this.accessibility.components.legend.highlightedLegendItemIx;
+                var itemToHighlight = items[ix];
+                if (itemToHighlight) {
+                    if (isNumber(oldIx) && items[oldIx]) {
+                        setLegendItemHoverState(false, items[oldIx]);
+                    }
+                    scrollLegendToItem(this.legend, ix);
+                    var legendItemProp = itemToHighlight.legendItem;
+                    var proxyBtn = itemToHighlight.a11yProxyElement &&
+                            itemToHighlight.a11yProxyElement.buttonElement;
+                    if (legendItemProp && legendItemProp.element && proxyBtn) {
+                        this.setFocusToElement(legendItemProp, proxyBtn);
+                    }
+                    setLegendItemHoverState(true, itemToHighlight);
+                    return true;
                 }
-                return keyboardNavigationHandler.response.success;
-            },
+                return false;
+            }
             /**
              * @private
-             * @return {boolean|undefined}
              */
-            shouldHaveLegendNavigation: function () {
-                var chart = this.chart,
-                    legendOptions = chart.options.legend || {},
-                    hasLegend = chart.legend && chart.legend.allItems,
-                    hasColorAxis = chart.colorAxis && chart.colorAxis.length,
-                    legendA11yOptions = (legendOptions.accessibility || {});
-                return !!(hasLegend &&
-                    chart.legend.display &&
-                    !hasColorAxis &&
-                    legendA11yOptions.enabled &&
-                    legendA11yOptions.keyboardNavigation &&
-                    legendA11yOptions.keyboardNavigation.enabled);
-            },
+            function compose(ChartClass, LegendClass) {
+                if (composedClasses.indexOf(ChartClass) === -1) {
+                    composedClasses.push(ChartClass);
+                    var chartProto = ChartClass.prototype;
+                    chartProto.highlightLegendItem = chartHighlightLegendItem;
+                }
+                if (composedClasses.indexOf(LegendClass) === -1) {
+                    composedClasses.push(LegendClass);
+                    addEvent(LegendClass, 'afterColorizeItem', legendOnAfterColorizeItem);
+                }
+            }
+            LegendComponent.compose = compose;
             /**
+             * Keep track of pressed state for legend items.
              * @private
-             * @param {number} direction
              */
-            onKbdNavigationInit: function (direction) {
+            function legendOnAfterColorizeItem(e) {
                 var chart = this.chart,
-                    lastIx = chart.legend.allItems.length - 1,
-                    ixToHighlight = direction > 0 ? 0 : lastIx;
-                chart.highlightLegendItem(ixToHighlight);
-                this.highlightedLegendItemIx = ixToHighlight;
+                    a11yOptions = chart.options.accessibility,
+                    legendItem = e.item;
+                if (a11yOptions.enabled && legendItem && legendItem.a11yProxyElement) {
+                    legendItem.a11yProxyElement.buttonElement.setAttribute('aria-pressed', e.visible ? 'true' : 'false');
+                }
             }
-        });
+        })(LegendComponent || (LegendComponent = {}));
+        /* *
+         *
+         *  Default Export
+         *
+         * */
 
         return LegendComponent;
     });
@@ -4093,8 +4179,6 @@
         }
         /**
          * @private
-         * @param {Highcharts.Point} point
-         * @return {Highcharts.HTMLDOMElement|Highcharts.SVGDOMElement|undefined}
          */
         function addDummyPointElement(point) {
             var series = point.series,
@@ -4125,8 +4209,6 @@
         }
         /**
          * @private
-         * @param {Highcharts.Series} series
-         * @return {boolean}
          */
         function hasMorePointsThanDescriptionThreshold(series) {
             var chartA11yOptions = series.chart.options.accessibility,
@@ -4137,8 +4219,6 @@
         }
         /**
          * @private
-         * @param {Highcharts.Series} series
-         * @return {boolean}
          */
         function shouldSetScreenReaderPropsOnPoints(series) {
             var seriesA11yOptions = series.options.accessibility || {};
@@ -4147,8 +4227,6 @@
         }
         /**
          * @private
-         * @param {Highcharts.Series} series
-         * @return {boolean}
          */
         function shouldSetKeyboardNavPropsOnPoints(series) {
             var chartA11yOptions = series.chart.options.accessibility,
@@ -4159,8 +4237,6 @@
         }
         /**
          * @private
-         * @param {Highcharts.Series} series
-         * @return {boolean}
          */
         function shouldDescribeSeriesElement(series) {
             var chart = series.chart,
@@ -4175,15 +4251,13 @@
         }
         /**
          * @private
-         * @param {Highcharts.Point} point
-         * @param {number} value
-         * @return {string}
          */
         function pointNumberToString(point, value) {
             var series = point.series,
                 chart = series.chart,
                 a11yPointOptions = chart.options.accessibility.point || {},
-                seriesA11yPointOptions = series.options.accessibility && series.options.accessibility.point || {},
+                seriesA11yPointOptions = series.options.accessibility &&
+                    series.options.accessibility.point || {},
                 tooltipOptions = series.tooltipOptions || {},
                 lang = chart.options.lang;
             if (isNumber(value)) {
@@ -4196,8 +4270,6 @@
         }
         /**
          * @private
-         * @param {Highcharts.Series} series
-         * @return {string}
          */
         function getSeriesDescriptionText(series) {
             var seriesA11yOptions = series.options.accessibility || {},
@@ -4209,9 +4281,6 @@
         }
         /**
          * @private
-         * @param {Highcharts.series} series
-         * @param {string} axisCollection
-         * @return {string}
          */
         function getSeriesAxisDescriptionText(series, axisCollection) {
             var axis = series[axisCollection];
@@ -4224,21 +4293,19 @@
          * Get accessible time description for a point on a datetime axis.
          *
          * @private
-         * @function Highcharts.Point#getTimeDescription
-         * @param {Highcharts.Point} point
-         * @return {string|undefined}
-         * The description as string.
          */
         function getPointA11yTimeDescription(point) {
             var series = point.series,
                 chart = series.chart,
-                seriesA11yOptions = series.options.accessibility && series.options.accessibility.point || {},
+                seriesA11yOptions = series.options.accessibility &&
+                    series.options.accessibility.point || {},
                 a11yOptions = chart.options.accessibility.point || {},
                 dateXAxis = series.xAxis && series.xAxis.dateTime;
             if (dateXAxis) {
                 var tooltipDateFormat = dateXAxis.getXDateFormat(point.x || 0,
                     chart.options.tooltip.dateTimeLabelFormats),
-                    dateFormat = seriesA11yOptions.dateFormatter && seriesA11yOptions.dateFormatter(point) ||
+                    dateFormat = seriesA11yOptions.dateFormatter &&
+                        seriesA11yOptions.dateFormatter(point) ||
                         a11yOptions.dateFormatter && a11yOptions.dateFormatter(point) ||
                         seriesA11yOptions.dateFormat ||
                         a11yOptions.dateFormat ||
@@ -4248,8 +4315,6 @@
         }
         /**
          * @private
-         * @param {Highcharts.Point} point
-         * @return {string}
          */
         function getPointXDescription(point) {
             var timeDesc = getPointA11yTimeDescription(point), xAxis = point.series.xAxis || {}, pointCategory = xAxis.categories && defined(point.category) &&
@@ -4259,10 +4324,6 @@
         }
         /**
          * @private
-         * @param {Highcharts.Point} point
-         * @param {string} prefix
-         * @param {string} suffix
-         * @return {string}
          */
         function getPointArrayMapValueDescription(point, prefix, suffix) {
             var pre = prefix || '', suf = suffix || '', keyToValStr = function (key) {
@@ -4275,13 +4336,12 @@
         }
         /**
          * @private
-         * @param {Highcharts.Point} point
-         * @return {string}
          */
         function getPointValue(point) {
             var series = point.series,
                 a11yPointOpts = series.chart.options.accessibility.point || {},
-                seriesA11yPointOpts = series.chart.options.accessibility && series.chart.options.accessibility.point || {},
+                seriesA11yPointOpts = series.chart.options.accessibility &&
+                    series.chart.options.accessibility.point || {},
                 tooltipOptions = series.tooltipOptions || {},
                 valuePrefix = seriesA11yPointOpts.valuePrefix ||
                     a11yPointOpts.valuePrefix ||
@@ -4311,8 +4371,10 @@
          * empty string if none.
          *
          * @private
-         * @param {Highcharts.Point} point The data point to get the annotation info from.
-         * @return {string} Annotation description
+         * @param {Highcharts.Point} point
+         * The data point to get the annotation info from.
+         * @return {string}
+         * Annotation description
          */
         function getPointAnnotationDescription(point) {
             var chart = point.series.chart;
@@ -4325,7 +4387,6 @@
         /**
          * Return string with information about point.
          * @private
-         * @return {string}
          */
         function getPointValueDescription(point) {
             var series = point.series, chart = series.chart, seriesA11yOptions = series.options.accessibility, seriesValueDescFormat = seriesA11yOptions && seriesA11yOptions.point &&
@@ -4344,12 +4405,11 @@
         /**
          * Return string with information about point.
          * @private
-         * @return {string}
          */
         function defaultPointDescriptionFormatter(point) {
-            var series = point.series, chart = series.chart, valText = getPointValueDescription(point), description = point.options && point.options.accessibility &&
-                    point.options.accessibility.description, userDescText = description ? ' ' + description : '', seriesNameText = chart.series.length > 1 && series.name ?
-                    ' ' + series.name + '.' : '', annotationsDesc = getPointAnnotationDescription(point), pointAnnotationsText = annotationsDesc ? ' ' + annotationsDesc : '';
+            var series = point.series, shouldExposeSeriesName = series.chart.series.length > 1 ||
+                    series.options.name, valText = getPointValueDescription(point), description = point.options && point.options.accessibility &&
+                    point.options.accessibility.description, userDescText = description ? ' ' + description : '', seriesNameText = shouldExposeSeriesName ? ' ' + series.name + '.' : '', annotationsDesc = getPointAnnotationDescription(point), pointAnnotationsText = annotationsDesc ? ' ' + annotationsDesc : '';
             point.accessibility = point.accessibility || {};
             point.accessibility.valueDescription = valText;
             return valText + userDescText + seriesNameText + pointAnnotationsText;
@@ -4363,7 +4423,8 @@
         function setPointScreenReaderAttribs(point, pointElement) {
             var series = point.series,
                 a11yPointOptions = series.chart.options.accessibility.point || {},
-                seriesPointA11yOptions = series.options.accessibility && series.options.accessibility.point || {},
+                seriesPointA11yOptions = series.options.accessibility &&
+                    series.options.accessibility.point || {},
                 label = stripHTMLTags(seriesPointA11yOptions.descriptionFormatter &&
                     seriesPointA11yOptions.descriptionFormatter(point) ||
                     a11yPointOptions.descriptionFormatter &&
@@ -4408,7 +4469,6 @@
         /**
          * Return string with information about series.
          * @private
-         * @return {string}
          */
         function defaultSeriesDescriptionFormatter(series) {
             var chart = series.chart,
@@ -4444,7 +4504,8 @@
             } /* else do not add role */
             seriesElement.setAttribute('tabindex', '-1');
             if (!series.chart.styledMode) {
-                seriesElement.style.outline = 'none'; // Don't show browser outline on click, despite tabindex
+                // Don't show browser outline on click, despite tabindex
+                seriesElement.style.outline = 'none';
             }
             seriesElement.setAttribute('aria-label', stripHTMLTags(a11yOptions.series.descriptionFormatter &&
                 a11yOptions.series.descriptionFormatter(series) ||
@@ -4581,8 +4642,9 @@
              */
             NewDataAnnouncer.prototype.init = function () {
                 var chart = this.chart;
-                var announceOptions = chart.options.accessibility.announceNewData;
-                var announceType = announceOptions.interruptUser ? 'assertive' : 'polite';
+                var announceOptions = (chart.options.accessibility.announceNewData);
+                var announceType = announceOptions.interruptUser ?
+                        'assertive' : 'polite';
                 this.lastAnnouncementTime = 0;
                 this.dirty = {
                     allSeries: {}
@@ -4607,7 +4669,7 @@
                 var announcer = this,
                     chart = this.chart,
                     e = this.eventProvider;
-                e.addEvent(chart, 'afterDrilldown', function () {
+                e.addEvent(chart, 'afterApplyDrilldown', function () {
                     announcer.lastAnnouncementTime = 0;
                 });
                 e.addEvent(chart, 'afterAddSeries', function (e) {
@@ -4649,7 +4711,9 @@
                     }
                     this.queueAnnouncement(Object
                         .keys(this.dirty.allSeries)
-                        .map(function (ix) { return announcer.dirty.allSeries[ix]; }), this.dirty.newSeries, newPoint);
+                        .map(function (ix) {
+                        return announcer.dirty.allSeries[ix];
+                    }), this.dirty.newSeries, newPoint);
                     // Reset
                     this.dirty = {
                         allSeries: {}
@@ -4731,7 +4795,8 @@
                     }
                 }
                 // Default formatter - use lang options
-                var multiple = H.charts && H.charts.length > 1 ? 'Multiple' : 'Single', langKey = newSeries ? 'newSeriesAnnounce' + multiple :
+                var multiple = H.charts && H.charts.length > 1 ?
+                        'Multiple' : 'Single', langKey = newSeries ? 'newSeriesAnnounce' + multiple :
                         newPoint ? 'newPointAnnounce' + multiple : 'newDataAnnounce', chartTitle = getChartTitle(chart);
                 return chart.langFormat('accessibility.announceNewData.' + langKey, {
                     chartTitle: chartTitle,
@@ -4868,13 +4933,17 @@
                     this.chart = chart;
                 this.target = target;
                 this.groupType = groupType;
+                var isListItem = groupType === 'ul';
                 this.eventProvider = new EventProvider();
-                var wrapperEl = groupType === 'ul' ? doc.createElement('li') : null;
+                var wrapperEl = isListItem ? doc.createElement('li') : null;
                 var btnEl = this.buttonElement = doc.createElement('button');
                 if (!chart.styledMode) {
                     this.hideButtonVisually(btnEl);
                 }
                 if (wrapperEl) {
+                    if (isListItem && !chart.styledMode) {
+                        wrapperEl.style.listStyle = 'none';
+                    }
                     wrapperEl.appendChild(btnEl);
                     this.element = wrapperEl;
                 }
@@ -4901,17 +4970,24 @@
                 fireEventOnWrappedOrUnwrappedElement(this.target.click, fakeEventObject);
             };
             /**
-             * Update the target to be proxied.
-             * The position and events are updated to match the new target.
+             * Update the target to be proxied. The position and events are updated to
+             * match the new target.
              * @param target The new target definition
-             * @param attributes New HTML attributes to apply to the button. Set an attribute to null to remove.
+             * @param attributes New HTML attributes to apply to the button. Set an
+             * attribute to null to remove.
              */
             ProxyElement.prototype.updateTarget = function (target, attributes) {
                 this.target = target;
                 this.updateCSSClassName();
+                var attrs = attributes || {};
+                Object.keys(attrs).forEach(function (a) {
+                    if (attrs[a] === null) {
+                        delete attrs[a];
+                    }
+                });
                 attr(this.buttonElement, merge({
                     'aria-label': this.getTargetAttr(target.click, 'aria-label')
-                }, attributes));
+                }, attrs));
                 this.eventProvider.removeAddedEvents();
                 this.addProxyEventsToButton(this.buttonElement, target.click);
                 this.refreshPosition();
@@ -4940,7 +5016,7 @@
              * Update the CSS class name to match target
              */
             ProxyElement.prototype.updateCSSClassName = function () {
-                var stringHasNoTooltip = function (s) { return s.indexOf('highcharts-no-tooltip') > -1; };
+                var stringHasNoTooltip = function (s) { return (s.indexOf('highcharts-no-tooltip') > -1); };
                 var legend = this.chart.legend;
                 var groupDiv = legend.group && legend.group.div;
                 var noTooltipOnGroup = stringHasNoTooltip(groupDiv && groupDiv.className || '');
@@ -4968,7 +5044,8 @@
                             fireEventOnWrappedOrUnwrappedElement(target, clonedEvent);
                         }
                         e.stopPropagation();
-                        // #9682, #15318: Touch scrolling didnt work when touching proxy
+                        // #9682, #15318: Touch scrolling didnt work when touching
+                        // proxy
                         if (!isTouchEvent) {
                             e.preventDefault();
                         }
@@ -5008,12 +5085,14 @@
                 var chartDiv = this.chart.renderTo;
                 if (chartDiv && posElement && posElement.getBoundingClientRect) {
                     var rectEl = posElement.getBoundingClientRect(),
-                        rectDiv = chartDiv.getBoundingClientRect();
+                        chartPos = this.chart.pointer.getChartPosition();
                     return {
-                        x: rectEl.left - rectDiv.left,
-                        y: rectEl.top - rectDiv.top,
-                        width: rectEl.right - rectEl.left,
-                        height: rectEl.bottom - rectEl.top
+                        x: (rectEl.left - chartPos.left) / chartPos.scaleX,
+                        y: (rectEl.top - chartPos.top) / chartPos.scaleY,
+                        width: rectEl.right / chartPos.scaleX -
+                            rectEl.left / chartPos.scaleX,
+                        height: rectEl.bottom / chartPos.scaleY -
+                            rectEl.top / chartPos.scaleY
                     };
                 }
                 return { x: 0, y: 0, width: 1, height: 1 };
@@ -5110,10 +5189,13 @@
             /**
              * Create a group that will contain proxy elements. The group order is
              * automatically updated according to the last group order keys.
+             *
+             * Returns the added group.
              */
             ProxyProvider.prototype.addGroup = function (groupKey, groupType, attributes) {
-                if (this.groups[groupKey]) {
-                    return;
+                var existingGroup = this.groups[groupKey];
+                if (existingGroup) {
+                    return existingGroup.groupElement;
                 }
                 var proxyContainer = this.domElementProvider.createElement(groupType);
                 // If we want to add a role to the group, and still use e.g.
@@ -5136,15 +5218,13 @@
                 };
                 attr(groupElement, attributes || {});
                 if (groupType === 'ul') {
-                    if (!this.chart.styledMode) {
-                        proxyContainer.style.listStyle = 'none';
-                    }
                     proxyContainer.setAttribute('role', 'list'); // Needed for webkit
                 }
                 // Add the group to the end by default, and perhaps then we
                 // won't have to reorder the whole set of groups.
                 this.afterChartProxyPosContainer.appendChild(groupElement);
                 this.updateGroupOrder(this.groupOrder);
+                return groupElement;
             };
             /**
              * Update HTML attributes of a group.
@@ -5328,6 +5408,10 @@
              */
             ProxyProvider.prototype.updatePosContainerPositions = function () {
                 var chart = this.chart;
+                // If exporting, don't add these containers to the DOM.
+                if (chart.renderer.forExport) {
+                    return;
+                }
                 var rendererSVGEl = chart.renderer.box;
                 chart.container.insertBefore(this.afterChartProxyPosContainer, rendererSVGEl.nextSibling);
                 chart.container.insertBefore(this.beforeChartProxyPosContainer, rendererSVGEl);
@@ -5934,7 +6018,6 @@
              * @param {number} i
              *        The index of the button
              * @param {boolean} [redraw]
-             * @return {void}
              */
             RangeSelector.prototype.clickButton = function (i, redraw) {
                 var rangeSelector = this,
@@ -6032,7 +6115,8 @@
                     // If the navigator exist and the axis range is declared reset that
                     // range and from now on only use the range set by a user, #14742.
                     if (chart.navigator && chart.navigator.baseSeries[0]) {
-                        chart.navigator.baseSeries[0].xAxis.options.range = void 0;
+                        chart.navigator.baseSeries[0].xAxis.options
+                            .range = void 0;
                     }
                     newMin = dataMin;
                     newMax = dataMax;
@@ -6077,7 +6161,6 @@
              * @private
              * @function Highcharts.RangeSelector#setSelected
              * @param {number} [selected]
-             * @return {void}
              */
             RangeSelector.prototype.setSelected = function (selected) {
                 this.selected = this.options.selected = selected;
@@ -6088,12 +6171,11 @@
              * @private
              * @function Highcharts.RangeSelector#init
              * @param {Highcharts.Chart} chart
-             * @return {void}
              */
             RangeSelector.prototype.init = function (chart) {
                 var rangeSelector = this,
                     options = chart.options.rangeSelector,
-                    buttonOptions = options.buttons || rangeSelector.defaultButtons.slice(),
+                    buttonOptions = (options.buttons || rangeSelector.defaultButtons.slice()),
                     selectedOption = options.selected,
                     blurInputs = function () {
                         var minInput = rangeSelector.minInput,
@@ -6143,7 +6225,6 @@
              *
              * @private
              * @function Highcharts.RangeSelector#updateButtonStates
-             * @return {void}
              */
             RangeSelector.prototype.updateButtonStates = function () {
                 var rangeSelector = this,
@@ -6249,7 +6330,6 @@
              * @private
              * @function Highcharts.RangeSelector#computeButtonRange
              * @param {Highcharts.RangeSelectorButtonsOptions} rangeOptions
-             * @return {void}
              */
             RangeSelector.prototype.computeButtonRange = function (rangeOptions) {
                 var type = rangeOptions.type,
@@ -6284,12 +6364,11 @@
              *
              * @private
              * @function Highcharts.RangeSelector#getInputValue
-             * @param {string} name
-             * @return {number}
              */
             RangeSelector.prototype.getInputValue = function (name) {
                 var input = name === 'min' ? this.minInput : this.maxInput;
-                var options = this.chart.options.rangeSelector;
+                var options = this.chart.options
+                        .rangeSelector;
                 var time = this.chart.time;
                 if (input) {
                     return ((input.type === 'text' && options.inputDateParser) ||
@@ -6302,9 +6381,6 @@
              *
              * @private
              * @function Highcharts.RangeSelector#setInputValue
-             * @param {string} name
-             * @param {number} [inputTime]
-             * @return {void}
              */
             RangeSelector.prototype.setInputValue = function (name, inputTime) {
                 var options = this.options, time = this.chart.time, input = name === 'min' ? this.minInput : this.maxInput, dateBox = name === 'min' ? this.minDateBox : this.maxDateBox;
@@ -6319,7 +6395,8 @@
                         input.setAttribute('data-hc-time', inputTime);
                         updatedTime = inputTime;
                     }
-                    input.value = time.dateFormat(this.inputTypeFormats[input.type] || options.inputEditDateFormat, updatedTime);
+                    input.value = time.dateFormat((this.inputTypeFormats[input.type] ||
+                        options.inputEditDateFormat), updatedTime);
                     if (dateBox) {
                         dateBox.attr({
                             text: time.dateFormat(options.inputDateFormat, updatedTime)
@@ -6332,10 +6409,6 @@
              *
              * @private
              * @function Highcharts.RangeSelector#setInputExtremes
-             * @param {string} name
-             * @param {number} min
-             * @param {number} max
-             * @return {void}
              */
             RangeSelector.prototype.setInputExtremes = function (name, min, max) {
                 var input = name === 'min' ? this.minInput : this.maxInput;
@@ -6360,7 +6433,6 @@
              * @private
              * @function Highcharts.RangeSelector#showInput
              * @param {string} name
-             * @return {void}
              */
             RangeSelector.prototype.showInput = function (name) {
                 var dateBox = name === 'min' ? this.minDateBox : this.maxDateBox;
@@ -6372,7 +6444,9 @@
                         translateY = _a.translateY;
                     var inputBoxWidth = this.options.inputBoxWidth;
                     css(input, {
-                        width: isTextInput ? ((dateBox.width + (inputBoxWidth ? -2 : 20)) + 'px') : 'auto',
+                        width: isTextInput ?
+                            ((dateBox.width + (inputBoxWidth ? -2 : 20)) + 'px') :
+                            'auto',
                         height: isTextInput ? ((dateBox.height - 2) + 'px') : 'auto',
                         border: '2px solid silver'
                     });
@@ -6398,7 +6472,6 @@
              * @private
              * @function Highcharts.RangeSelector#hideInput
              * @param {string} name
-             * @return {void}
              */
             RangeSelector.prototype.hideInput = function (name) {
                 var input = name === 'min' ? this.minInput : this.maxInput;
@@ -6450,8 +6523,6 @@
              *
              * @private
              * @function Highcharts.RangeSelector#drawInput
-             * @param {string} name
-             * @return {RangeSelectorInputElements}
              */
             RangeSelector.prototype.drawInput = function (name) {
                 var _a = this,
@@ -6620,8 +6691,6 @@
              *
              * @private
              * @function Highcharts.RangeSelector#getPosition
-             *
-             * @return {Highcharts.Dictionary<number>}
              */
             RangeSelector.prototype.getPosition = function () {
                 var chart = this.chart,
@@ -6641,13 +6710,8 @@
              *
              * @private
              * @function Highcharts.RangeSelector#getYTDExtremes
-             *
-             * @param {number} dataMax
-             *
-             * @param {number} dataMin
-             *
              * @return {*}
-             *         Returns min and max for the YTD
+             * Returns min and max for the YTD
              */
             RangeSelector.prototype.getYTDExtremes = function (dataMax, dataMin, useUTC) {
                 var time = this.chart.time,
@@ -6676,7 +6740,6 @@
              *        X axis minimum
              * @param {number} [max]
              *        X axis maximum
-             * @return {void}
              */
             RangeSelector.prototype.render = function (min, max) {
                 var chart = this.chart,
@@ -6730,7 +6793,8 @@
                     this.setInputValue('min', min);
                     this.setInputValue('max', max);
                     var unionExtremes = (chart.scroller && chart.scroller.getUnionExtremes()) || chart.xAxis[0] || {};
-                    if (defined(unionExtremes.dataMin) && defined(unionExtremes.dataMax)) {
+                    if (defined(unionExtremes.dataMin) &&
+                        defined(unionExtremes.dataMax)) {
                         var minRange = chart.xAxis[0].minRange || 0;
                         this.setInputExtremes('min', unionExtremes.dataMin, Math.min(unionExtremes.dataMax, this.getInputValue('max')) - minRange);
                         this.setInputExtremes('max', Math.max(unionExtremes.dataMin, this.getInputValue('min')) + minRange, unionExtremes.dataMax);
@@ -6763,7 +6827,6 @@
              *
              * @private
              * @function Highcharts.RangeSelector#renderButtons
-             * @return {void}
              */
             RangeSelector.prototype.renderButtons = function () {
                 var _this = this;
@@ -6864,7 +6927,6 @@
              *
              * @private
              * @function Highcharts.RangeSelector#alignElements
-             * @return {void}
              */
             RangeSelector.prototype.alignElements = function () {
                 var _this = this;
@@ -7020,7 +7082,6 @@
              * @function Highcharts.RangeSelector#alignButtonGroup
              * @param {number} xOffsetForExportButton
              * @param {number} [width]
-             * @return {void}
              */
             RangeSelector.prototype.alignButtonGroup = function (xOffsetForExportButton, width) {
                 var _a = this,
@@ -7050,7 +7111,6 @@
             /**
              * @private
              * @function Highcharts.RangeSelector#positionButtons
-             * @return {void}
              */
             RangeSelector.prototype.positionButtons = function () {
                 var _a = this,
@@ -7091,7 +7151,6 @@
              * @param  {number} xOffsetForExportButton
              *                  The X offset of the group required to make room for the
              *                  exporting button
-             * @return {void}
              */
             RangeSelector.prototype.handleCollision = function (xOffsetForExportButton) {
                 var _this = this;
@@ -7192,7 +7251,6 @@
              * @private
              * @function Highcharts.RangeSelector#collapseButtons
              * @param {number} xOffsetForExportButton
-             * @return {void}
              */
             RangeSelector.prototype.collapseButtons = function (xOffsetForExportButton) {
                 var _a = this,
@@ -7246,7 +7304,6 @@
              *
              * @private
              * @function Highcharts.RangeSelector#expandButtons
-             * @return {void}
              */
             RangeSelector.prototype.expandButtons = function () {
                 var _a = this,
@@ -7278,7 +7335,6 @@
              *
              * @private
              * @function Highcharts.RangeSelector#currentButtonIndex
-             * @return {number}
              */
             RangeSelector.prototype.currentButtonIndex = function () {
                 var dropdown = this.dropdown;
@@ -7292,7 +7348,6 @@
              *
              * @private
              * @function Highcharts.RangeSelector#showDropdown
-             * @return {void}
              */
             RangeSelector.prototype.showDropdown = function () {
                 var _a = this,
@@ -7316,7 +7371,6 @@
             /**
              * @private
              * @function Highcharts.RangeSelector#hideDropdown
-             * @return {void}
              */
             RangeSelector.prototype.hideDropdown = function () {
                 var dropdown = this.dropdown;
@@ -7335,7 +7389,7 @@
              * @private
              * @function Highcharts.RangeSelector#getHeight
              * @return {number}
-             *         Returns rangeSelector height
+             * Returns rangeSelector height
              */
             RangeSelector.prototype.getHeight = function () {
                 var rangeSelector = this,
@@ -7371,11 +7425,8 @@
              *
              * @private
              * @function Highcharts.RangeSelector#titleCollision
-             *
-             * @param {Highcharts.Chart} chart
-             *
              * @return {boolean}
-             *         Returns collision status
+             * Returns collision status
              */
             RangeSelector.prototype.titleCollision = function (chart) {
                 return !(chart.options.title.text ||
@@ -7387,7 +7438,6 @@
              * @private
              * @function Highcharts.RangeSelector#update
              * @param {Highcharts.RangeSelectorOptions} options
-             * @return {void}
              */
             RangeSelector.prototype.update = function (options) {
                 var chart = this.chart;
@@ -7483,17 +7533,14 @@
          *
          * @private
          * @function preferredInputType
-         * @param {string} format
-         * @return {string}
          */
         function preferredInputType(format) {
             var ms = format.indexOf('%L') !== -1;
             if (ms) {
                 return 'text';
             }
-            var date = ['a', 'A', 'd', 'e', 'w', 'b', 'B', 'm', 'o', 'y', 'Y'].some(function (char) {
-                    return format.indexOf('%' + char) !== -1;
-            });
+            var date = ['a', 'A', 'd', 'e', 'w', 'b', 'B', 'm', 'o', 'y', 'Y']
+                    .some(function (char) { return format.indexOf('%' + char) !== -1; });
             var time = ['H', 'k', 'I', 'l', 'M', 'S'].some(function (char) {
                     return format.indexOf('%' + char) !== -1;
             });
@@ -7530,7 +7577,8 @@
                 // Get the true range from a start date
                 getTrueRange = function (base,
                 count) {
-                    var timeName = type === 'year' ? 'FullYear' : 'Month';
+                    var timeName = type === 'year' ?
+                        'FullYear' : 'Month';
                 var date = new time.Date(base);
                 var basePeriod = time.get(timeName,
                     date);
@@ -7975,8 +8023,9 @@
                 var newIxOutOfRange = newIx > 1 || newIx < 0;
                 if (newIxOutOfRange) {
                     if (chart.accessibility) {
-                        chart.accessibility.keyboardNavigation.tabindexContainer.focus();
-                        chart.accessibility.keyboardNavigation[direction < 0 ? 'prev' : 'next']();
+                        chart.accessibility.keyboardNavigation.tabindexContainer
+                            .focus();
+                        chart.accessibility.keyboardNavigation.move(direction);
                     }
                 }
                 else if (rangeSel) {
@@ -8060,13 +8109,14 @@
                     // Tab-press with dropdown focused does not propagate to chart
                     // automatically, so we manually catch and handle it when relevant.
                     this.removeDropdownKeydownHandler = addEvent(dropdown, 'keydown', function (e) {
-                        var isTab = (e.which || e.keyCode) === _this.keyCodes.tab;
+                        var isTab = (e.which || e.keyCode) === _this.keyCodes.tab,
+                            a11y = chart.accessibility;
                         if (isTab) {
                             e.preventDefault();
                             e.stopPropagation();
-                            if (chart.accessibility) {
-                                chart.accessibility.keyboardNavigation.tabindexContainer.focus();
-                                chart.accessibility.keyboardNavigation[e.shiftKey ? 'prev' : 'next']();
+                            if (a11y) {
+                                a11y.keyboardNavigation.tabindexContainer.focus();
+                                a11y.keyboardNavigation.move(e.shiftKey ? -1 : 1);
                             }
                         }
                     });
@@ -8196,10 +8246,6 @@
              *
              * @private
              * @function Highcharts.Chart#highlightRangeSelectorButton
-             *
-             * @param {number} ix
-             *
-             * @return {boolean}
              */
             function chartHighlightRangeSelectorButton(ix) {
                 var buttons = (this.rangeSelector &&
@@ -8233,7 +8279,7 @@
                 if (composedClasses.indexOf(ChartClass) === -1) {
                     composedClasses.push(ChartClass);
                     var chartProto = ChartClass.prototype;
-                    chartProto.highlightRangeSelectorButton = chartHighlightRangeSelectorButton;
+                    chartProto.highlightRangeSelectorButton = (chartHighlightRangeSelectorButton);
                 }
                 if (composedClasses.indexOf(RangeSelectorClass) === -1) {
                     composedClasses.push(RangeSelectorClass);
@@ -8247,9 +8293,9 @@
              * @private
              */
             function rangeSelectorAfterBtnClick() {
-                if (this.chart.accessibility &&
-                    this.chart.accessibility.components.rangeSelector) {
-                    return this.chart.accessibility.components.rangeSelector.onAfterBtnClick();
+                var a11y = this.chart.accessibility;
+                if (a11y && a11y.components.rangeSelector) {
+                    return a11y.components.rangeSelector.onAfterBtnClick();
                 }
             }
         })(RangeSelectorComponent || (RangeSelectorComponent = {}));
@@ -8345,7 +8391,8 @@
                     var hadForcedMarker = point.hasForcedA11yMarker;
                     delete point.hasForcedA11yMarker;
                     if (pointOptions.marker) {
-                        var isStillForcedMarker = hadForcedMarker && getPointMarkerOpacity(pointOptions) === 0;
+                        var isStillForcedMarker = hadForcedMarker &&
+                                getPointMarkerOpacity(pointOptions) === 0;
                         if (pointOptions.marker.enabled && !isStillForcedMarker) {
                             unforcePointMarkerOptions(pointOptions);
                             point.hasForcedA11yMarker = false;
@@ -8361,7 +8408,9 @@
              * @private
              */
             function hasIndividualPointMarkerOptions(series) {
-                return !!(series._hasPointMarkers && series.points && series.points.length);
+                return !!(series._hasPointMarkers &&
+                    series.points &&
+                    series.points.length);
             }
             /**
              * @private
@@ -8370,7 +8419,8 @@
                 var a11yOptions = series.chart.options.accessibility;
                 return series.points.length <
                     a11yOptions.series.pointDescriptionEnabledThreshold ||
-                    a11yOptions.series.pointDescriptionEnabledThreshold === false;
+                    a11yOptions.series
+                        .pointDescriptionEnabledThreshold === false;
             }
             /**
              * Process marker graphics after render
@@ -8388,8 +8438,11 @@
                     if (hasIndividualPointMarkerOptions(series)) {
                         series.points.forEach(function (point) {
                             if (point.graphic) {
-                                point.graphic[point.hasForcedA11yMarker ? 'addClass' : 'removeClass']('highcharts-a11y-marker-hidden');
-                                point.graphic[point.hasForcedA11yMarker === false ? 'addClass' : 'removeClass']('highcharts-a11y-marker-visible');
+                                point.graphic[point.hasForcedA11yMarker ?
+                                    'addClass' : 'removeClass']('highcharts-a11y-marker-hidden');
+                                point.graphic[point.hasForcedA11yMarker === false ?
+                                    'addClass' :
+                                    'removeClass']('highcharts-a11y-marker-visible');
                             }
                         });
                     }
@@ -8421,6 +8474,7 @@
                 else if (series.a11yMarkersForced) {
                     delete series.a11yMarkersForced;
                     unforceSeriesMarkerOptions(series);
+                    delete series.resetA11yMarkerOptions;
                 }
             }
             /**
@@ -8431,7 +8485,9 @@
                     chartA11yEnabled = chart.options.accessibility.enabled,
                     seriesA11yEnabled = (series.options.accessibility &&
                         series.options.accessibility.enabled) !== false;
-                return chartA11yEnabled && seriesA11yEnabled && isWithinDescriptionThreshold(series);
+                return (chartA11yEnabled &&
+                    seriesA11yEnabled &&
+                    isWithinDescriptionThreshold(series));
             }
             /**
              * @private
@@ -8446,20 +8502,20 @@
                 });
             }
             /**
+             * Reset markers to normal
              * @private
              */
             function unforceSeriesMarkerOptions(series) {
                 var resetMarkerOptions = series.resetA11yMarkerOptions;
                 if (resetMarkerOptions) {
-                    merge(true, series.options, {
+                    var originalOpactiy = resetMarkerOptions.states &&
+                            resetMarkerOptions.states.normal &&
+                            resetMarkerOptions.states.normal.opacity;
+                    series.update({
                         marker: {
                             enabled: resetMarkerOptions.enabled,
                             states: {
-                                normal: {
-                                    opacity: resetMarkerOptions.states &&
-                                        resetMarkerOptions.states.normal &&
-                                        resetMarkerOptions.states.normal.opacity
-                                }
+                                normal: { opacity: originalOpactiy }
                             }
                         }
                     });
@@ -8505,12 +8561,10 @@
          *
          * @private
          * @function getPointIndex
-         *
          * @param {Highcharts.AccessibilityPoint} point
-         *        The point to find index of.
-         *
+         * The point to find index of.
          * @return {number|undefined}
-         *         The index in the series.points array of the point.
+         * The index in the series.points array of the point.
          */
         function getPointIndex(point) {
             var index = point.index,
@@ -8529,13 +8583,7 @@
         }
         /**
          * Determine if series navigation should be skipped
-         *
          * @private
-         * @function isSkipSeries
-         *
-         * @param {Highcharts.Series} series
-         *
-         * @return {boolean|number|undefined}
          */
         function isSkipSeries(series) {
             var a11yOptions = series.chart.options.accessibility,
@@ -8554,13 +8602,7 @@
         }
         /**
          * Determine if navigation for a point should be skipped
-         *
          * @private
-         * @function isSkipPoint
-         *
-         * @param {Highcharts.Point} point
-         *
-         * @return {boolean|number|undefined}
          */
         function isSkipPoint(point) {
             var a11yOptions = point.series.chart.options.accessibility;
@@ -8573,6 +8615,37 @@
                 pointA11yDisabled ||
                 isSkipSeries(point.series);
         }
+        /**
+         * Get the first point that is not a skip point in this series.
+         * @private
+         */
+        function getFirstValidPointInSeries(series) {
+            var points = series.points || [],
+                len = points.length;
+            for (var i = 0; i < len; ++i) {
+                if (!isSkipPoint(points[i])) {
+                    return points[i];
+                }
+            }
+            return null;
+        }
+        /**
+         * Get the first point that is not a skip point in this chart.
+         * @private
+         */
+        function getFirstValidPointInChart(chart) {
+            var series = chart.series || [],
+                len = series.length;
+            for (var i = 0; i < len; ++i) {
+                if (!isSkipSeries(series[i])) {
+                    var point = getFirstValidPointInSeries(series[i]);
+                    if (point) {
+                        return point;
+                    }
+                }
+            }
+            return null;
+        }
         /**
          * @private
          */
@@ -8585,7 +8658,7 @@
                 // Highlight first valid point in the series will also
                 // look backwards. It always starts from currently
                 // highlighted point.
-                res = chart.series[i].highlightFirstValidPoint();
+                res = chart.series[i].highlightNextValidPoint();
                 if (res) {
                     break;
                 }
@@ -8593,22 +8666,24 @@
             return res;
         }
         /**
+         * After drilling down/up, we need to set focus to the first point for
+         * screen readers and keyboard nav.
          * @private
          */
         function updateChartFocusAfterDrilling(chart) {
-            highlightFirstValidPointInChart(chart);
-            if (chart.focusElement) {
-                chart.focusElement.removeFocusBorder();
+            var point = getFirstValidPointInChart(chart);
+            if (point) {
+                point.highlight(false); // Do not visually highlight
             }
         }
         /**
+         * Highlight the first point in chart that is not a skip point
          * @private
          */
         function highlightFirstValidPointInChart(chart) {
-            var res = false;
             delete chart.highlightedPoint;
-            res = chart.series.reduce(function (acc, cur) { return acc || cur.highlightFirstValidPoint(); }, false);
-            return res;
+            var point = getFirstValidPointInChart(chart);
+            return point ? point.highlight() : false;
         }
         /* *
          *
@@ -8646,7 +8721,7 @@
                 e.addEvent(Series, 'destroy', function () {
                     return keyboardNavigation.onSeriesDestroy(this);
                 });
-                e.addEvent(chart, 'afterDrilldown', function () {
+                e.addEvent(chart, 'afterApplyDrilldown', function () {
                     updateChartFocusAfterDrilling(this);
                 });
                 e.addEvent(chart, 'drilldown', function (e) {
@@ -8673,7 +8748,7 @@
                     // If then navigating with virtual cursor, it is possible to leave
                     // keyboard nav module state on the data points and still activate
                     // proxy buttons.
-                    var focusedElClassName = focusedElement && focusedElement.getAttribute('class');
+                    var focusedElClassName = (focusedElement && focusedElement.getAttribute('class'));
                     var isProxyFocused = focusedElClassName &&
                             focusedElClassName.indexOf('highcharts-a11y-proxy-button') > -1;
                     if (chart.highlightedPoint === point &&
@@ -8686,11 +8761,11 @@
                 });
             };
             /**
+             * After drillup we want to find the point that was drilled down to and
+             * highlight it.
              * @private
              */
             SeriesKeyboardNavigation.prototype.onDrillupAll = function () {
-                // After drillup we want to find the point that was drilled down to and
-                // highlight it.
                 var last = this.lastDrilledDownPoint,
                     chart = this.chart,
                     series = last && getSeriesFromName(chart,
@@ -8699,19 +8774,17 @@
                 if (last && series && defined(last.x) && defined(last.y)) {
                     point = getPointFromXY(series, last.x, last.y);
                 }
+                point = point || getFirstValidPointInChart(chart);
                 // Container focus can be lost on drillup due to deleted elements.
                 if (chart.container) {
                     chart.container.focus();
                 }
                 if (point && point.highlight) {
-                    point.highlight();
-                }
-                if (chart.focusElement) {
-                    chart.focusElement.removeFocusBorder();
+                    point.highlight(false); // Do not visually highlight
                 }
             };
             /**
-             * @return {Highcharts.KeyboardNavigationHandler}
+             * @private
              */
             SeriesKeyboardNavigation.prototype.getKeyboardNavigationHandler = function () {
                 var keyboardNavigation = this,
@@ -8752,6 +8825,9 @@
                         highlightFirstValidPointInChart(chart);
                         return this.response.success;
                     },
+                    validate: function () {
+                        return !!getFirstValidPointInChart(chart);
+                    },
                     terminate: function () {
                         return keyboardNavigation.onHandlerTerminate();
                     }
@@ -8802,7 +8878,7 @@
                 if (chart.tooltip) {
                     chart.tooltip.hide(0);
                 }
-                var hoverSeries = chart.highlightedPoint && chart.highlightedPoint.series;
+                var hoverSeries = (chart.highlightedPoint && chart.highlightedPoint.series);
                 if (hoverSeries && hoverSeries.onMouseOut) {
                     hoverSeries.onMouseOut();
                 }
@@ -8814,10 +8890,6 @@
             /**
              * Function that attempts to highlight next/prev point. Handles wrap around.
              * @private
-             * @param {Highcharts.KeyboardNavigationHandler} handler
-             * @param {boolean} directionIsNext
-             * @return {number}
-             * response
              */
             SeriesKeyboardNavigation.prototype.attemptHighlightAdjacentPoint = function (handler, directionIsNext) {
                 var chart = this.chart,
@@ -8825,8 +8897,10 @@
                         .wrapAround,
                     highlightSuccessful = chart.highlightAdjacentPoint(directionIsNext);
                 if (!highlightSuccessful) {
-                    if (wrapAround) {
-                        return handler.init(directionIsNext ? 1 : -1);
+                    if (wrapAround && (directionIsNext ?
+                        highlightFirstValidPointInChart(chart) :
+                        highlightLastValidPointInChart(chart))) {
+                        return handler.response.success;
                     }
                     return handler.response[directionIsNext ? 'next' : 'prev'];
                 }
@@ -8896,7 +8970,9 @@
                     curPointIndex = curPoint && getPointIndex(curPoint) || 0,
                     curPoints = curPoint && curPoint.series.points || [],
                     lastSeries = chart.series && chart.series[chart.series.length - 1],
-                    lastPoint = lastSeries && lastSeries.points && lastSeries.points[lastSeries.points.length - 1];
+                    lastPoint = lastSeries &&
+                        lastSeries.points &&
+                        lastSeries.points[lastSeries.points.length - 1];
                 var newSeries,
                     newPoint;
                 // If no points, return false
@@ -8909,8 +8985,7 @@
                     newPoint = next ? series[0].points[0] : lastPoint;
                 }
                 else {
-                    // We have a highlighted point.
-                    // Grab next/prev point & series
+                    // We have a highlighted point. Grab next/prev point & series.
                     newSeries = series[curPoint.series.index + (next ? 1 : -1)];
                     newPoint = curPoints[curPointIndex + (next ? 1 : -1)];
                     if (!newPoint && newSeries) {
@@ -8970,7 +9045,7 @@
                             if (series.yAxis && series.yAxis.reversed) {
                                 yDistance *= -1;
                         }
-                        if (yDistance <= 0 && down || yDistance >= 0 && !down || // Chk dir
+                        if (yDistance <= 0 && down || yDistance >= 0 && !down ||
                             distance < 5 || // Points in same spot => infinite loop
                             isSkipPoint(point)) {
                             return;
@@ -9001,10 +9076,11 @@
                 if (!chart.highlightedPoint) {
                     newSeries = down ? (chart.series && chart.series[0]) : lastSeries;
                     newPoint = down ?
-                        (newSeries && newSeries.points && newSeries.points[0]) : lastPoint;
+                        (newSeries && newSeries.points && newSeries.points[0]) :
+                        lastPoint;
                     return newPoint ? newPoint.highlight() : false;
                 }
-                newSeries = chart.series[curPoint.series.index + (down ? -1 : 1)];
+                newSeries = (chart.series[curPoint.series.index + (down ? -1 : 1)]);
                 if (!newSeries) {
                     return false;
                 }
@@ -9018,7 +9094,8 @@
                 if (isSkipSeries(newSeries)) {
                     // Skip the series
                     newPoint.highlight();
-                    adjacentNewPoint = chart.highlightAdjacentSeries(down); // Try recurse
+                    // Try recurse
+                    adjacentNewPoint = chart.highlightAdjacentSeries(down);
                     if (!adjacentNewPoint) {
                         // Recurse failed
                         curPoint.highlight();
@@ -9030,7 +9107,7 @@
                 // Highlight the new point or any first valid point back or forwards
                 // from it
                 newPoint.highlight();
-                return newPoint.series.highlightFirstValidPoint();
+                return newPoint.series.highlightNextValidPoint();
             }
             /**
              * @private
@@ -9040,7 +9117,7 @@
                     composedClasses.push(ChartClass);
                     var chartProto = ChartClass.prototype;
                     chartProto.highlightAdjacentPoint = chartHighlightAdjacentPoint;
-                    chartProto.highlightAdjacentPointVertical = chartHighlightAdjacentPointVertical;
+                    chartProto.highlightAdjacentPointVertical = (chartHighlightAdjacentPointVertical);
                     chartProto.highlightAdjacentSeries = chartHighlightAdjacentSeries;
                 }
                 if (composedClasses.indexOf(PointClass) === -1) {
@@ -9067,7 +9144,7 @@
                             seriesTypes[type].prototype.keyboardMoveVertical = false;
                         }
                     });
-                    seriesProto.highlightFirstValidPoint = seriesHighlightFirstValidPoint;
+                    seriesProto.highlightNextValidPoint = (seriesHighlightNextValidPoint);
                 }
             }
             SeriesKeyboardNavigation.compose = compose;
@@ -9105,7 +9182,7 @@
                 return defined(minIx) ? series.points[minIx] : void 0;
             }
             /**
-             * Highlights a point (show tooltip and display hover state).
+             * Highlights a point (show tooltip, display hover state, focus element).
              *
              * @private
              * @function Highcharts.Point#highlight
@@ -9113,9 +9190,10 @@
              * @return {Highcharts.Point}
              *         This highlighted point.
              */
-            function pointHighlight() {
+            function pointHighlight(highlightVisually) {
+                if (highlightVisually === void 0) { highlightVisually = true; }
                 var chart = this.series.chart;
-                if (!this.isNull) {
+                if (!this.isNull && highlightVisually) {
                     this.onMouseOver(); // Show the hover marker and tooltip
                 }
                 else {
@@ -9130,6 +9208,9 @@
                 // change z-index and mess up the element.
                 if (this.graphic) {
                     chart.setFocusToElement(this.graphic);
+                    if (!highlightVisually && chart.focusElement) {
+                        chart.focusElement.removeFocusBorder();
+                    }
                 }
                 chart.highlightedPoint = this;
                 return this;
@@ -9140,11 +9221,9 @@
              * point in the series, use that as starting point.
              *
              * @private
-             * @function Highcharts.Series#highlightFirstValidPoint
-             *
-             * @return {boolean|Highcharts.Point}
+             * @function Highcharts.Series#highlightNextValidPoint
              */
-            function seriesHighlightFirstValidPoint() {
+            function seriesHighlightNextValidPoint() {
                 var curPoint = this.chart.highlightedPoint,
                     start = (curPoint && curPoint.series) === this ?
                         getPointIndex(curPoint) :
@@ -9231,7 +9310,7 @@
              * @private
              */
             SeriesComponent.compose = function (ChartClass, PointClass, SeriesClass) {
-                // Handle forcing markers
+                NewDataAnnouncer.compose(SeriesClass);
                 ForcedMarkers.compose(SeriesClass);
                 SeriesKeyboardNavigation.compose(ChartClass, PointClass, SeriesClass);
             };
@@ -9296,13 +9375,14 @@
             };
             /**
              * Get keyboard navigation handler for this component.
-             * @return {Highcharts.KeyboardNavigationHandler}
+             * @private
              */
             SeriesComponent.prototype.getKeyboardNavigation = function () {
                 return this.keyboardNavigation.getKeyboardNavigationHandler();
             };
             /**
              * Remove traces
+             * @private
              */
             SeriesComponent.prototype.destroy = function () {
                 this.newDataAnnouncer.destroy();
@@ -9330,47 +9410,46 @@
          *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
          *
          * */
+        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]; };
+                return extendStatics(d, b);
+            };
+            return function (d, b) {
+                extendStatics(d, b);
+                function __() { this.constructor = d; }
+                d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+            };
+        })();
         var unhideChartElementFromAT = ChartUtilities.unhideChartElementFromAT;
         var noop = H.noop;
         var attr = U.attr,
             extend = U.extend,
             pick = U.pick;
-        /* eslint-disable no-invalid-this, valid-jsdoc */
+        /* *
+         *
+         *  Functions
+         *
+         * */
+        /* eslint-disable valid-jsdoc */
         /**
          * @private
          */
         function chartHasMapZoom(chart) {
             return !!(chart.mapZoom &&
-                chart.mapNavButtons &&
-                chart.mapNavButtons.length);
+                chart.mapNavigation &&
+                chart.mapNavigation.navButtons.length);
         }
-        /**
-         * Pan along axis in a direction (1 or -1), optionally with a defined
-         * granularity (number of steps it takes to walk across current view)
+        /* *
          *
-         * @private
-         * @function Highcharts.Axis#panStep
+         *  Class
          *
-         * @param {number} direction
-         * @param {number} [granularity]
-         */
-        H.Axis.prototype.panStep = function (direction, granularity) {
-            var gran = granularity || 3;
-            var extremes = this.getExtremes();
-            var step = (extremes.max - extremes.min) / gran * direction;
-            var newMax = extremes.max + step;
-            var newMin = extremes.min + step;
-            var size = newMax - newMin;
-            if (direction < 0 && newMin < extremes.dataMin) {
-                newMin = extremes.dataMin;
-                newMax = newMin + size;
-            }
-            else if (direction > 0 && newMax > extremes.dataMax) {
-                newMax = extremes.dataMax;
-                newMin = newMax - size;
-            }
-            this.setExtremes(newMin, newMax);
-        };
+         * */
         /**
          * The ZoomComponent class
          *
@@ -9378,44 +9457,59 @@
          * @class
          * @name Highcharts.ZoomComponent
          */
-        var ZoomComponent = noop;
-        ZoomComponent.prototype = new AccessibilityComponent();
-        extend(ZoomComponent.prototype, /** @lends Highcharts.ZoomComponent */ {
+        var ZoomComponent = /** @class */ (function (_super) {
+                __extends(ZoomComponent, _super);
+            function ZoomComponent() {
+                /* *
+                 *
+                 *  Properties
+                 *
+                 * */
+                var _this = _super !== null && _super.apply(this,
+                    arguments) || this;
+                _this.focusedMapNavButtonIx = -1;
+                return _this;
+            }
+            /* *
+             *
+             *  Functions
+             *
+             * */
             /**
              * Initialize the component
              */
-            init: function () {
+            ZoomComponent.prototype.init = function () {
                 var component = this,
                     chart = this.chart;
                 this.proxyProvider.addGroup('zoom', 'div');
                 [
-                    'afterShowResetZoom', 'afterDrilldown', 'drillupall'
+                    'afterShowResetZoom', 'afterApplyDrilldown', 'drillupall'
                 ].forEach(function (eventType) {
                     component.addEvent(chart, eventType, function () {
                         component.updateProxyOverlays();
                     });
                 });
-            },
+            };
             /**
              * Called when chart is updated
              */
-            onChartUpdate: function () {
+            ZoomComponent.prototype.onChartUpdate = function () {
                 var chart = this.chart,
                     component = this;
                 // Make map zoom buttons accessible
-                if (chart.mapNavButtons) {
-                    chart.mapNavButtons.forEach(function (button, i) {
+                if (chart.mapNavigation) {
+                    chart.mapNavigation.navButtons.forEach(function (button, i) {
                         unhideChartElementFromAT(chart, button.element);
                         component.setMapNavButtonAttrs(button.element, 'accessibility.zoom.mapZoom' + (i ? 'Out' : 'In'));
                     });
                 }
-            },
+            };
             /**
              * @private
              * @param {Highcharts.HTMLDOMElement|Highcharts.SVGDOMElement} button
              * @param {string} labelFormatKey
              */
-            setMapNavButtonAttrs: function (button, labelFormatKey) {
+            ZoomComponent.prototype.setMapNavButtonAttrs = function (button, labelFormatKey) {
                 var chart = this.chart,
                     label = chart.langFormat(labelFormatKey, { chart: chart });
                 attr(button, {
@@ -9423,51 +9517,54 @@
                     role: 'button',
                     'aria-label': label
                 });
-            },
+            };
             /**
              * Update the proxy overlays on every new render to ensure positions are
              * correct.
              */
-            onChartRender: function () {
+            ZoomComponent.prototype.onChartRender = function () {
                 this.updateProxyOverlays();
-            },
+            };
             /**
              * Update proxy overlays, recreating the buttons.
              */
-            updateProxyOverlays: function () {
+            ZoomComponent.prototype.updateProxyOverlays = function () {
                 var chart = this.chart;
                 // Always start with a clean slate
                 this.proxyProvider.clearGroup('zoom');
                 if (chart.resetZoomButton) {
                     this.createZoomProxyButton(chart.resetZoomButton, 'resetZoomProxyButton', chart.langFormat('accessibility.zoom.resetZoomButton', { chart: chart }));
                 }
-                if (chart.drillUpButton) {
+                if (chart.drillUpButton &&
+                    chart.breadcrumbs &&
+                    chart.breadcrumbs.list) {
+                    var lastBreadcrumb = chart.breadcrumbs.list[chart.breadcrumbs.list.length - 1];
                     this.createZoomProxyButton(chart.drillUpButton, 'drillUpProxyButton', chart.langFormat('accessibility.drillUpButton', {
                         chart: chart,
-                        buttonText: chart.getDrilldownBackText()
+                        buttonText: chart.breadcrumbs.getButtonText(lastBreadcrumb)
                     }));
                 }
-            },
+            };
             /**
              * @private
              * @param {Highcharts.SVGElement} buttonEl
              * @param {string} buttonProp
              * @param {string} label
              */
-            createZoomProxyButton: function (buttonEl, buttonProp, label) {
+            ZoomComponent.prototype.createZoomProxyButton = function (buttonEl, buttonProp, label) {
                 this[buttonProp] = this.proxyProvider.addProxyElement('zoom', {
                     click: buttonEl
                 }, {
                     'aria-label': label,
                     tabindex: -1
                 });
-            },
+            };
             /**
              * Get keyboard navigation handler for map zoom.
              * @private
              * @return {Highcharts.KeyboardNavigationHandler} The module object
              */
-            getMapZoomNavigation: function () {
+            ZoomComponent.prototype.getMapZoomNavigation = function () {
                 var keys = this.keyCodes,
                     chart = this.chart,
                     component = this;
@@ -9499,14 +9596,14 @@
                         return component.onMapNavInit(direction);
                     }
                 });
-            },
+            };
             /**
              * @private
              * @param {Highcharts.KeyboardNavigationHandler} keyboardNavigationHandler
              * @param {number} keyCode
              * @return {number} Response code
              */
-            onMapKbdArrow: function (keyboardNavigationHandler, keyCode) {
+            ZoomComponent.prototype.onMapKbdArrow = function (keyboardNavigationHandler, keyCode) {
                 var keys = this.keyCodes,
                     panAxis = (keyCode === keys.up || keyCode === keys.down) ?
                         'yAxis' : 'xAxis',
@@ -9514,55 +9611,55 @@
                         -1 : 1;
                 this.chart[panAxis][0].panStep(stepDirection);
                 return keyboardNavigationHandler.response.success;
-            },
+            };
             /**
              * @private
              * @param {Highcharts.KeyboardNavigationHandler} keyboardNavigationHandler
              * @param {global.KeyboardEvent} event
              * @return {number} Response code
              */
-            onMapKbdTab: function (keyboardNavigationHandler, event) {
+            ZoomComponent.prototype.onMapKbdTab = function (keyboardNavigationHandler, event) {
                 var chart = this.chart;
                 var response = keyboardNavigationHandler.response;
                 var isBackwards = event.shiftKey;
                 var isMoveOutOfRange = isBackwards && !this.focusedMapNavButtonIx ||
                         !isBackwards && this.focusedMapNavButtonIx;
                 // Deselect old
-                chart.mapNavButtons[this.focusedMapNavButtonIx].setState(0);
+                chart.mapNavigation.navButtons[this.focusedMapNavButtonIx].setState(0);
                 if (isMoveOutOfRange) {
                     chart.mapZoom(); // Reset zoom
                     return response[isBackwards ? 'prev' : 'next'];
                 }
                 // Select other button
                 this.focusedMapNavButtonIx += isBackwards ? -1 : 1;
-                var button = chart.mapNavButtons[this.focusedMapNavButtonIx];
+                var button = chart.mapNavigation.navButtons[this.focusedMapNavButtonIx];
                 chart.setFocusToElement(button.box, button.element);
                 button.setState(2);
                 return response.success;
-            },
+            };
             /**
              * @private
              * @param {Highcharts.KeyboardNavigationHandler} keyboardNavigationHandler
              * @return {number} Response code
              */
-            onMapKbdClick: function (keyboardNavigationHandler) {
+            ZoomComponent.prototype.onMapKbdClick = function (keyboardNavigationHandler) {
                 var el = this.chart.mapNavButtons[this.focusedMapNavButtonIx].element;
                 this.fakeClickEvent(el);
                 return keyboardNavigationHandler.response.success;
-            },
+            };
             /**
              * @private
              * @param {number} direction
              */
-            onMapNavInit: function (direction) {
+            ZoomComponent.prototype.onMapNavInit = function (direction) {
                 var chart = this.chart,
-                    zoomIn = chart.mapNavButtons[0],
-                    zoomOut = chart.mapNavButtons[1],
+                    zoomIn = chart.mapNavigation.navButtons[0],
+                    zoomOut = chart.mapNavigation.navButtons[1],
                     initialButton = direction > 0 ? zoomIn : zoomOut;
                 chart.setFocusToElement(initialButton.box, initialButton.element);
                 initialButton.setState(2);
                 this.focusedMapNavButtonIx = direction > 0 ? 0 : 1;
-            },
+            };
             /**
              * Get keyboard navigation handler for a simple chart button. Provide the
              * button reference for the chart, and a function to call on click.
@@ -9571,7 +9668,7 @@
              * @param {string} buttonProp The property on chart referencing the button.
              * @return {Highcharts.KeyboardNavigationHandler} The module object
              */
-            simpleButtonNavigation: function (buttonProp, proxyProp, onClick) {
+            ZoomComponent.prototype.simpleButtonNavigation = function (buttonProp, proxyProp, onClick) {
                 var keys = this.keyCodes,
                     component = this,
                     chart = this.chart;
@@ -9580,8 +9677,9 @@
                         [
                             [keys.tab, keys.up, keys.down, keys.left, keys.right],
                             function (keyCode, e) {
-                                var isBackwards = keyCode === keys.tab && e.shiftKey ||
-                                        keyCode === keys.left || keyCode === keys.up;
+                                var isBackwards = (keyCode === keys.tab && e.shiftKey ||
+                                        keyCode === keys.left ||
+                                        keyCode === keys.up);
                                 // Arrow/tab => just move
                                 return this.response[isBackwards ? 'prev' : 'next'];
                             }
@@ -9605,13 +9703,13 @@
                         chart.setFocusToElement(chart[buttonProp].box, component[proxyProp].buttonElement);
                     }
                 });
-            },
+            };
             /**
              * Get keyboard navigation handlers for this component.
              * @return {Array<Highcharts.KeyboardNavigationHandler>}
              *         List of module objects
              */
-            getKeyboardNavigation: function () {
+            ZoomComponent.prototype.getKeyboardNavigation = function () {
                 return [
                     this.simpleButtonNavigation('resetZoomButton', 'resetZoomProxyButton', function (_handler, chart) {
                         chart.zoomOut();
@@ -9622,8 +9720,75 @@
                     }),
                     this.getMapZoomNavigation()
                 ];
+            };
+            return ZoomComponent;
+        }(AccessibilityComponent));
+        /* *
+         *
+         *  Class Namespace
+         *
+         * */
+        (function (ZoomComponent) {
+            /* *
+             *
+             *  Declarations
+             *
+             * */
+            /* *
+             *
+             *  Constants
+             *
+             * */
+            ZoomComponent.composedClasses = [];
+            /* *
+             *
+             *  Functions
+             *
+             * */
+            /**
+             * @private
+             */
+            function compose(AxisClass) {
+                if (ZoomComponent.composedClasses.indexOf(AxisClass) === -1) {
+                    ZoomComponent.composedClasses.push(AxisClass);
+                    var axisProto = AxisClass.prototype;
+                    axisProto.panStep = axisPanStep;
+                }
             }
-        });
+            ZoomComponent.compose = compose;
+            /**
+             * Pan along axis in a direction (1 or -1), optionally with a defined
+             * granularity (number of steps it takes to walk across current view)
+             *
+             * @private
+             * @function Highcharts.Axis#panStep
+             *
+             * @param {number} direction
+             * @param {number} [granularity]
+             */
+            function axisPanStep(direction, granularity) {
+                var gran = granularity || 3;
+                var extremes = this.getExtremes();
+                var step = (extremes.max - extremes.min) / gran * direction;
+                var newMax = extremes.max + step;
+                var newMin = extremes.min + step;
+                var size = newMax - newMin;
+                if (direction < 0 && newMin < extremes.dataMin) {
+                    newMin = extremes.dataMin;
+                    newMax = newMin + size;
+                }
+                else if (direction > 0 && newMax > extremes.dataMax) {
+                    newMax = extremes.dataMax;
+                    newMin = newMax - size;
+                }
+                this.setExtremes(newMin, newMax);
+            }
+        })(ZoomComponent || (ZoomComponent = {}));
+        /* *
+         *
+         *  Default Export
+         *
+         * */
 
         return ZoomComponent;
     });
@@ -9663,7 +9828,8 @@
             // Test BG image for IE
             if (isMS && win.getComputedStyle) {
                 var testDiv = doc.createElement('div');
-                var imageSrc = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
+                var imageSrc = 'data:image/gif;base64,' +
+                        'R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
                 testDiv.style.backgroundImage = "url(" + imageSrc + ")"; // #13071
                 doc.body.appendChild(testDiv);
                 var bi = (testDiv.currentStyle ||
@@ -9671,8 +9837,8 @@
                 doc.body.removeChild(testDiv);
                 return bi === 'none';
             }
-            // Not used for other browsers
-            return false;
+            // Other browsers use the forced-colors standard
+            return win.matchMedia && win.matchMedia('(forced-colors: active)').matches;
         }
         /**
          * Force high contrast theme for the chart. The default theme is defined in
@@ -10860,9 +11026,9 @@
                          */
                         annotations: {
                             heading: 'Chart annotations summary',
-                            descriptionSinglePoint: '{annotationText}. Related to {annotationPoint}',
-                            descriptionMultiplePoints: '{annotationText}. Related to {annotationPoint}' +
-                                '{ Also related to, #each(additionalAnnotationPoints)}',
+                            descriptionSinglePoint: ('{annotationText}. Related to {annotationPoint}'),
+                            descriptionMultiplePoints: ('{annotationText}. Related to {annotationPoint}' +
+                                '{ Also related to, #each(additionalAnnotationPoints)}'),
                             descriptionNoPoints: '{annotationText}'
                         },
                         /**
@@ -11229,7 +11395,8 @@
                 if (typeof val !== 'undefined') {
                     traverseSetOption(rootNew, mapToNewOptions[oldOptionKey], val);
                     error(32, false, chart, (_a = {},
-                        _a[rootOldAsArray.join('.') + "." + oldOptionKey] = rootNewAsArray.join('.') + "." + mapToNewOptions[oldOptionKey].join('.'),
+                        _a[rootOldAsArray.join('.') + '.' + oldOptionKey] = (rootNewAsArray.join('.') + '.' +
+                            mapToNewOptions[oldOptionKey].join('.')),
                         _a));
                 }
             });
@@ -11257,7 +11424,9 @@
                 if (opts && opts.description) {
                     opts.accessibility = opts.accessibility || {};
                     opts.accessibility.description = opts.description;
-                    error(32, false, chart, { 'axis.description': 'use axis.accessibility.description' });
+                    error(32, false, chart, {
+                        'axis.description': 'use axis.accessibility.description'
+                    });
                 }
             });
         }
@@ -11287,8 +11456,9 @@
                     var optionVal = series.options[oldOption];
                     // Special case
                     if (oldOption === 'accessibility.pointDescriptionFormatter') {
-                        optionVal = series.options.accessibility &&
-                            series.options.accessibility.pointDescriptionFormatter;
+                        optionVal = (series.options.accessibility &&
+                            series.options.accessibility
+                                .pointDescriptionFormatter);
                     }
                     if (typeof optionVal !== 'undefined') {
                         // Set the new option
@@ -11297,7 +11467,10 @@
                         // value, since we set enabled rather than disabled
                         oldOption === 'skipKeyboardNavigation' ?
                             !optionVal : optionVal);
-                        error(32, false, chart, (_a = {}, _a["series." + oldOption] = "series." + oldToNewSeriesOptions[oldOption].join('.'), _a));
+                        error(32, false, chart, (_a = {},
+                            _a["series." + oldOption] = ('series.' +
+                                oldToNewSeriesOptions[oldOption].join('.')),
+                            _a));
                     }
                 });
             });
@@ -11453,7 +11626,6 @@
                 this.proxyProvider = new ProxyProvider(this.chart);
                 this.initComponents();
                 this.keyboardNavigation = new KeyboardNavigation(chart, this.components);
-                this.update();
             };
             /**
              * @private
@@ -11658,6 +11830,9 @@
                     }
                     else {
                         this.accessibility = a11y = new Accessibility(this);
+                        if (a11y && !a11y.zombie) {
+                            a11y.update();
+                        }
                     }
                 }
                 else if (a11y) {
@@ -11675,13 +11850,17 @@
             /**
              * @private
              */
-            function compose(ChartClass, PointClass, SeriesClass, SVGElementClass, RangeSelectorClass) {
-                A11yI18n.compose(ChartClass);
-                FocusBorder.compose(ChartClass, SVGElementClass);
+            function compose(AxisClass, ChartClass, LegendClass, PointClass, SeriesClass, SVGElementClass, RangeSelectorClass) {
+                // ordered:
                 KeyboardNavigation.compose(ChartClass);
-                MenuComponent.compose(ChartClass);
                 NewDataAnnouncer.compose(SeriesClass);
+                LegendComponent.compose(ChartClass, LegendClass);
+                MenuComponent.compose(ChartClass);
                 SeriesComponent.compose(ChartClass, PointClass, SeriesClass);
+                ZoomComponent.compose(AxisClass);
+                // RangeSelector
+                A11yI18n.compose(ChartClass);
+                FocusBorder.compose(ChartClass, SVGElementClass);
                 if (RangeSelectorClass) {
                     RangeSelectorComponent.compose(ChartClass, RangeSelectorClass);
                 }
@@ -11699,7 +11878,7 @@
                         });
                     });
                     // 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) {
@@ -11764,7 +11943,7 @@
         G.AccessibilityComponent = AccessibilityComponent;
         G.KeyboardNavigationHandler = KeyboardNavigationHandler;
         G.SeriesAccessibilityDescriber = SeriesDescriber;
-        Accessibility.compose(G.Chart, G.Point, G.Series, G.SVGElement, G.RangeSelector);
+        Accessibility.compose(G.Axis, G.Chart, G.Legend, G.Point, G.Series, G.SVGElement, G.RangeSelector);
 
     });
 }));