highcharts 9.3.2 → 10.1.0

package/modules/accessibility.src.js

@@ -1,5 +1,5 @@
 /**
- * @license Highcharts JS v9.3.2 (2021-11-29)
+ * @license Highcharts JS v10.1.0 (2022-04-29)
  *
  * 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) {
@@ -43,7 +52,8 @@
          *
          * */
         var format = F.format;
-        var pick = U.pick;
+        var getNestedProperty = U.getNestedProperty,
+            pick = U.pick;
         /* *
          *
          *  Composition
@@ -102,7 +112,7 @@
                     var lenArg = Number(eachArguments[1]),
                         len = void 0;
                     result = '';
-                    arr = ctx[eachArguments[0]];
+                    arr = getNestedProperty(eachArguments[0], ctx);
                     if (arr) {
                         lenArg = isNaN(lenArg) ? arr.length : lenArg;
                         len = lenArg < 0 ?
@@ -117,7 +127,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(getNestedProperty(pluralArguments[0], ctx));
                     switch (num) {
                         case 0:
                             result = pick(pluralArguments[4], pluralArguments[1]);
@@ -140,7 +150,7 @@
                         ix = Number(statement.substring(indexStart + 1,
                         indexEnd));
                     var val = void 0;
-                    arr = ctx[arrayName];
+                    arr = getNestedProperty(arrayName, ctx);
                     if (!isNaN(ix) && arr) {
                         if (ix < 0) {
                             val = arr[arr.length + ix];
@@ -759,9 +769,11 @@
          */
         function getAxisTimeLengthDesc(axis) {
             var chart = axis.chart,
-                range = {};
+                range = {},
+                min = axis.dataMin || axis.min || 0,
+                max = axis.dataMax || axis.max || 0;
             var rangeUnit = 'Seconds';
-            range.Seconds = ((axis.max || 0) - (axis.min || 0)) / 1000;
+            range.Seconds = (max - min) / 1000;
             range.Minutes = range.Seconds / 60;
             range.Hours = range.Minutes / 60;
             range.Days = range.Hours / 24;
@@ -791,9 +803,15 @@
                     options.accessibility &&
                     options.accessibility.screenReaderSection.axisRangeDateFormat ||
                     ''),
-                format = function (axisKey) {
-                    return axis.dateTime ? chart.time.dateFormat(dateRangeFormat,
-                axis[axisKey]) : axis[axisKey];
+                extremes = {
+                    min: axis.dataMin || axis.min || 0,
+                    max: axis.dataMax || axis.max || 0
+                },
+                format = function (key) {
+                    return axis.dateTime ?
+                        chart.time.dateFormat(dateRangeFormat,
+                extremes[key]) :
+                        extremes[key].toString();
             };
             return chart.langFormat('accessibility.axis.rangeFromTo', {
                 chart: chart,
@@ -1454,20 +1472,19 @@
                 }
             };
             /**
+             * Set attributes on the chart container element.
              * @private
              */
             ContainerComponent.prototype.setRenderToAttrs = function () {
-                var chart = this.chart;
-                if (chart.options.accessibility.landmarkVerbosity !== 'disabled') {
-                    chart.renderTo.setAttribute('role', 'region');
-                }
-                else {
-                    chart.renderTo.removeAttribute('role');
+                var chart = this.chart, shouldHaveLandmark = chart.options.accessibility
+                        .landmarkVerbosity !== 'disabled', containerLabel = chart.langFormat('accessibility.chartContainerLabel', {
+                        title: getChartTitle(chart),
+                        chart: chart
+                    });
+                if (containerLabel) {
+                    chart.renderTo.setAttribute('role', shouldHaveLandmark ? 'region' : 'group');
+                    chart.renderTo.setAttribute('aria-label', containerLabel);
                 }
-                chart.renderTo.setAttribute('aria-label', chart.langFormat('accessibility.chartContainerLabel', {
-                    title: getChartTitle(chart),
-                    chart: chart
-                }));
             };
             /**
              * @private
@@ -1672,15 +1689,21 @@
                 }
                 // Add the border rect
                 var bb = this.getBBox(),
-                    pad = pick(margin, 3);
+                    pad = pick(margin, 3),
+                    parent = this.parentGroup,
+                    scaleX = this.scaleX || parent && parent.scaleX,
+                    scaleY = this.scaleY || parent && parent.scaleY,
+                    oneDefined = scaleX ? !scaleY : scaleY,
+                    scaleBoth = oneDefined ? Math.abs(scaleX || scaleY || 1) :
+                        (Math.abs(scaleX || 1) + Math.abs(scaleY || 1)) / 2;
                 bb.x += this.translateX ? this.translateX : 0;
                 bb.y += this.translateY ? this.translateY : 0;
                 var borderPosX = bb.x - pad,
                     borderPosY = bb.y - pad,
                     borderWidth = bb.width + 2 * pad,
                     borderHeight = bb.height + 2 * pad;
-                // For text elements, apply x and y offset, #11397.
                 /**
+                 * For text elements, apply x and y offset, #11397.
                  * @private
                  */
                 function getTextAnchorCorrection(text) {
@@ -1728,16 +1751,16 @@
                         }
                     }
                 }
-                this.focusBorder = this.renderer.rect(borderPosX, borderPosY, borderWidth, borderHeight, parseInt((attribs && attribs.r || 0).toString(), 10))
+                this.focusBorder = this.renderer.rect(borderPosX, borderPosY, borderWidth, borderHeight, parseInt((attribs && attribs.r || 0).toString(), 10) / scaleBoth)
                     .addClass('highcharts-focus-border')
                     .attr({
                     zIndex: 99
                 })
-                    .add(this.parentGroup);
+                    .add(parent);
                 if (!this.renderer.styledMode) {
                     this.focusBorder.attr({
                         stroke: attribs && attribs.stroke,
-                        'stroke-width': attribs && attribs.strokeWidth
+                        'stroke-width': (attribs && attribs.strokeWidth || 0) / scaleBoth
                     });
                 }
                 avgElementAddUpdateFocusBorderHooks(this, margin, attribs);
@@ -2176,11 +2199,13 @@
         function getTypeDescription(chart, types) {
             var firstType = types[0],
                 firstSeries = chart.series && chart.series[0] || {},
+                mapTitle = chart.mapView && chart.mapView.geoMap &&
+                    chart.mapView.geoMap.title,
                 formatContext = {
                     numSeries: chart.series.length,
                     numPoints: firstSeries.points && firstSeries.points.length,
                     chart: chart,
-                    mapTitle: firstSeries.mapTitle
+                    mapTitle: mapTitle
                 };
             if (!firstType) {
                 return getTypeDescForEmptyChart(chart, formatContext);
@@ -2374,23 +2399,27 @@
                 }
             };
             /**
+             * Apply a11y attributes to a screen reader info section
              * @private
              * @param {Highcharts.HTMLDOMElement} sectionDiv The section element
              * @param {string} regionKey Name/key of the region we are setting attrs for
              */
             InfoRegionsComponent.prototype.setScreenReaderSectionAttribs = function (sectionDiv, regionKey) {
-                var labelLangKey = ('accessibility.screenReaderSection.' + regionKey + 'RegionLabel'), chart = this.chart, labelText = chart.langFormat(labelLangKey, { chart: chart, chartTitle: getChartTitle(chart) }), sectionId = 'highcharts-screen-reader-region-' + regionKey + '-' +
-                        chart.index;
+                var chart = this.chart,
+                    labelText = chart.langFormat('accessibility.screenReaderSection.' + regionKey +
+                        'RegionLabel', { chart: chart,
+                    chartTitle: getChartTitle(chart) }),
+                    sectionId = "highcharts-screen-reader-region-" + regionKey + "-" + chart.index;
                 attr(sectionDiv, {
                     id: sectionId,
-                    'aria-label': labelText
+                    'aria-label': labelText || void 0
                 });
                 // Sections are wrapped to be positioned relatively to chart in case
                 // elements inside are tabbed to.
                 sectionDiv.style.position = 'relative';
-                if (chart.options.accessibility.landmarkVerbosity === 'all' &&
-                    labelText) {
-                    sectionDiv.setAttribute('role', 'region');
+                if (labelText) {
+                    sectionDiv.setAttribute('role', chart.options.accessibility.landmarkVerbosity === 'all' ?
+                        'region' : 'group');
                 }
             };
             /**
@@ -2611,7 +2640,10 @@
                     return axes.length > 1 || axes[0] &&
                         pick(axes[0].options.accessibility &&
                             axes[0].options.accessibility.enabled, defaultCondition);
-                }, hasNoMap = !!chart.types && chart.types.indexOf('map') < 0, hasCartesian = !!chart.hasCartesianSeries, showXAxes = shouldDescribeColl('xAxis', !chart.angular && hasCartesian && hasNoMap), showYAxes = shouldDescribeColl('yAxis', hasCartesian && hasNoMap), desc = {};
+                }, hasNoMap = !!chart.types &&
+                    chart.types.indexOf('map') < 0 &&
+                    chart.types.indexOf('treemap') < 0 &&
+                    chart.types.indexOf('tilemap') < 0, hasCartesian = !!chart.hasCartesianSeries, showXAxes = shouldDescribeColl('xAxis', !chart.angular && hasCartesian && hasNoMap), showYAxes = shouldDescribeColl('yAxis', hasCartesian && hasNoMap), desc = {};
                 if (showXAxes) {
                     desc.xAxis = this.getAxisDescriptionText('xAxis');
                 }
@@ -2758,7 +2790,6 @@
                 if (menu) {
                     menu.setAttribute('aria-hidden', 'true');
                 }
-                this.isExportMenuShown = false;
                 this.setExportButtonExpandedState('false');
             };
             /**
@@ -2771,7 +2802,6 @@
                     this.addAccessibleContextMenuAttribs();
                     unhideChartElementFromAT(chart, menu);
                 }
-                this.isExportMenuShown = true;
                 this.setExportButtonExpandedState('true');
             };
             /**
@@ -2788,8 +2818,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
@@ -2804,7 +2847,8 @@
                             chart: chart,
                             chartTitle: getChartTitle(chart)
                         }),
-                        'aria-expanded': false
+                        'aria-expanded': false,
+                        title: chart.options.lang.contextButtonTitle || null
                     });
                 }
             };
@@ -2958,7 +3002,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 {
@@ -3028,7 +3072,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 &&
@@ -3226,6 +3270,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
@@ -3239,30 +3342,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;
                 }
             };
@@ -3289,10 +3399,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();
@@ -3300,79 +3410,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
@@ -3401,6 +3438,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) {
@@ -3412,27 +3461,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) {
@@ -3443,6 +3482,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;
@@ -3460,7 +3502,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
@@ -3474,6 +3516,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
@@ -3509,6 +3566,7 @@
              * */
             /* eslint-disable valid-jsdoc */
             /**
+             * Composition function.
              * @private
              */
             function compose(ChartClass) {
@@ -3592,6 +3650,7 @@
             };
         })();
         var animObject = A.animObject;
+        var doc = H.doc;
         var addEvent = U.addEvent,
             fireEvent = U.fireEvent,
             isNumber = U.isNumber,
@@ -3627,6 +3686,19 @@
                 !(chart.colorAxis && chart.colorAxis.length) &&
                 legendA11yOptions.enabled !== false);
         }
+        /**
+         * @private
+         */
+        function setLegendItemHoverState(hoverActive, legendItem) {
+            legendItem.setState(hoverActive ? 'hover' : '', true);
+            ['legendGroup', 'legendItem', 'legendSymbol'].forEach(function (i) {
+                var obj = legendItem[i];
+                var el = obj && obj.element || obj;
+                if (el) {
+                    fireEvent(el, hoverActive ? 'mouseover' : 'mouseout');
+                }
+            });
+        }
         /* *
          *
          *  Class
@@ -3650,6 +3722,7 @@
                 var _this = _super !== null && _super.apply(this,
                     arguments) || this;
                 _this.highlightedLegendItemIx = NaN;
+                _this.proxyGroup = null;
                 return _this;
             }
             /* *
@@ -3775,12 +3848,19 @@
              * @private
              */
             LegendComponent.prototype.recreateProxies = function () {
+                var focusedElement = doc.activeElement;
+                var proxyGroup = this.proxyGroup;
+                var shouldRestoreFocus = focusedElement && proxyGroup &&
+                        proxyGroup.contains(focusedElement);
                 this.removeProxies();
                 if (shouldDoLegendA11y(this.chart)) {
                     this.addLegendProxyGroup();
                     this.proxyLegendItems();
                     this.updateLegendItemProxyVisibility();
                     this.updateLegendTitle();
+                    if (shouldRestoreFocus) {
+                        this.chart.highlightLegendItem(this.highlightedLegendItemIx);
+                    }
                     return true;
                 }
                 return false;
@@ -3816,7 +3896,7 @@
                 var a11yOptions = this.chart.options.accessibility;
                 var groupRole = a11yOptions.landmarkVerbosity === 'all' ?
                         'region' : null;
-                this.proxyProvider.addGroup('legend', 'ul', {
+                this.proxyGroup = this.proxyProvider.addGroup('legend', 'ul', {
                     // Filled by updateLegendTitle, to keep up to date without
                     // recreating group
                     'aria-label': '_placeholder_',
@@ -3900,21 +3980,19 @@
                     validate: function () {
                         return component.shouldHaveLegendNavigation();
                     },
-                    init: function (direction) {
-                        return component.onKbdNavigationInit(direction);
+                    init: function () {
+                        chart.highlightLegendItem(0);
+                        component.highlightedLegendItemIx = 0;
                     },
                     terminate: function () {
                         component.highlightedLegendItemIx = -1;
-                        chart.legend.allItems.forEach(function (item) { return item.setState('', true); });
+                        chart.legend.allItems.forEach(function (item) { return setLegendItemHoverState(false, item); });
                     }
                 });
             };
             /**
+             * Arrow key navigation
              * @private
-             * @param {Highcharts.KeyboardNavigationHandler} keyboardNavigationHandler
-             * @param {number} keyCode
-             * @return {number}
-             * Response code
              */
             LegendComponent.prototype.onKbdArrowKey = function (keyboardNavigationHandler, keyCode) {
                 var keys = this.keyCodes,
@@ -3933,8 +4011,7 @@
                     keyboardNavigationHandler.init(direction);
                     return response.success;
                 }
-                // No wrap, move
-                return response[direction > 0 ? 'next' : 'prev'];
+                return response.success;
             };
             /**
              * @private
@@ -3964,17 +4041,6 @@
                     legendA11yOptions.keyboardNavigation &&
                     legendA11yOptions.keyboardNavigation.enabled);
             };
-            /**
-             * @private
-             * @param {number} direction
-             */
-            LegendComponent.prototype.onKbdNavigationInit = function (direction) {
-                var chart = this.chart,
-                    lastIx = chart.legend.allItems.length - 1,
-                    ixToHighlight = direction > 0 ? 0 : lastIx;
-                chart.highlightLegendItem(ixToHighlight);
-                this.highlightedLegendItemIx = ixToHighlight;
-            };
             return LegendComponent;
         }(AccessibilityComponent));
         /* *
@@ -4011,7 +4077,7 @@
                 var itemToHighlight = items[ix];
                 if (itemToHighlight) {
                     if (isNumber(oldIx) && items[oldIx]) {
-                        fireEvent(items[oldIx].legendGroup.element, 'mouseout');
+                        setLegendItemHoverState(false, items[oldIx]);
                     }
                     scrollLegendToItem(this.legend, ix);
                     var legendItemProp = itemToHighlight.legendItem;
@@ -4020,9 +4086,7 @@
                     if (legendItemProp && legendItemProp.element && proxyBtn) {
                         this.setFocusToElement(legendItemProp, proxyBtn);
                     }
-                    if (itemToHighlight.legendGroup) {
-                        fireEvent(itemToHighlight.legendGroup.element, 'mouseover');
-                    }
+                    setLegendItemHoverState(true, itemToHighlight);
                     return true;
                 }
                 return false;
@@ -4111,14 +4175,21 @@
             }) || null;
         }
         /**
+         * Whether or not we should add a dummy point element in
+         * order to describe a point that has no graphic.
          * @private
          */
         function shouldAddDummyPoint(point) {
             // Note: Sunburst series use isNull for hidden points on drilldown.
             // Ignore these.
-            var isSunburst = point.series && point.series.is('sunburst'),
-                isNull = point.isNull;
-            return isNull && !isSunburst;
+            var series = point.series,
+                chart = series && series.chart,
+                isSunburst = series && series.is('sunburst'),
+                isNull = point.isNull,
+                shouldDescribeNull = chart &&
+                    chart
+                        .options.accessibility.point.describeNull;
+            return isNull && !isSunburst && shouldDescribeNull;
         }
         /**
          * @private
@@ -4366,9 +4437,9 @@
          * @private
          */
         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;
@@ -4399,15 +4470,21 @@
          */
         function describePointsInSeries(series) {
             var setScreenReaderProps = shouldSetScreenReaderPropsOnPoints(series),
-                setKeyboardProps = shouldSetKeyboardNavPropsOnPoints(series);
+                setKeyboardProps = shouldSetKeyboardNavPropsOnPoints(series),
+                shouldDescribeNullPoints = series.chart.options.accessibility
+                    .point.describeNull;
             if (setScreenReaderProps || setKeyboardProps) {
                 series.points.forEach(function (point) {
                     var pointEl = point.graphic && point.graphic.element ||
-                            shouldAddDummyPoint(point) && addDummyPointElement(point);
-                    var pointA11yDisabled = (point.options &&
+                            shouldAddDummyPoint(point) && addDummyPointElement(point),
+                        pointA11yDisabled = (point.options &&
                             point.options.accessibility &&
                             point.options.accessibility.enabled === false);
                     if (pointEl) {
+                        if (point.isNull && !shouldDescribeNullPoints) {
+                            pointEl.setAttribute('aria-hidden', true);
+                            return;
+                        }
                         // We always set tabindex, as long as we are setting props.
                         // When setting tabindex, also remove default outline to
                         // avoid ugly border on click.
@@ -4435,14 +4512,19 @@
                 description = getSeriesDescriptionText(series),
                 shouldDescribeAxis = function (coll) {
                     return chart[coll] && chart[coll].length > 1 && series[coll];
-            }, xAxisInfo = getSeriesAxisDescriptionText(series, 'xAxis'), yAxisInfo = getSeriesAxisDescriptionText(series, 'yAxis'), summaryContext = {
-                name: series.name || '',
-                ix: series.index + 1,
-                numSeries: chart.series && chart.series.length,
-                numPoints: series.points && series.points.length,
-                series: series
-            }, combinationSuffix = chartTypes.length > 1 ? 'Combination' : '', summary = chart.langFormat('accessibility.series.summary.' + series.type + combinationSuffix, summaryContext) || chart.langFormat('accessibility.series.summary.default' + combinationSuffix, summaryContext);
-            return summary + (description ? ' ' + description : '') + (shouldDescribeAxis('yAxis') ? ' ' + yAxisInfo : '') + (shouldDescribeAxis('xAxis') ? ' ' + xAxisInfo : '');
+            }, seriesNumber = series.index + 1, xAxisInfo = getSeriesAxisDescriptionText(series, 'xAxis'), yAxisInfo = getSeriesAxisDescriptionText(series, 'yAxis'), summaryContext = {
+                seriesNumber: seriesNumber,
+                series: series,
+                chart: chart
+            }, combinationSuffix = chartTypes.length > 1 ? 'Combination' : '', summary = chart.langFormat('accessibility.series.summary.' + series.type + combinationSuffix, summaryContext) || chart.langFormat('accessibility.series.summary.default' + combinationSuffix, summaryContext), axisDescription = (shouldDescribeAxis('yAxis') ? ' ' + yAxisInfo + '.' : '') + (shouldDescribeAxis('xAxis') ? ' ' + xAxisInfo + '.' : ''), formatStr = chart.options.accessibility.series.descriptionFormat || '';
+            return format(formatStr, {
+                seriesDescription: summary,
+                authorDescription: (description ? ' ' + description : ''),
+                axisDescription: axisDescription,
+                series: series,
+                chart: chart,
+                seriesNumber: seriesNumber
+            }, void 0);
         }
         /**
          * Set a11y props on a series element
@@ -4460,7 +4542,10 @@
             }
             else if (landmarkVerbosity === 'all') {
                 seriesElement.setAttribute('role', 'region');
-            } /* else do not add role */
+            }
+            else {
+                seriesElement.setAttribute('role', 'group');
+            }
             seriesElement.setAttribute('tabindex', '-1');
             if (!series.chart.styledMode) {
                 // Don't show browser outline on click, despite tabindex
@@ -4493,7 +4578,7 @@
                     describeSeriesElement(series, seriesEl);
                 }
                 else {
-                    seriesEl.setAttribute('aria-label', '');
+                    seriesEl.removeAttribute('aria-label');
                 }
             }
         }
@@ -4628,7 +4713,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) {
@@ -4938,9 +5023,15 @@
             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();
@@ -5038,12 +5129,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 };
@@ -5140,10 +5233,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.
@@ -5172,6 +5268,7 @@
                 // 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.
@@ -5355,6 +5452,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);
@@ -7968,7 +8069,7 @@
                     if (chart.accessibility) {
                         chart.accessibility.keyboardNavigation.tabindexContainer
                             .focus();
-                        chart.accessibility.keyboardNavigation[direction < 0 ? 'prev' : 'next']();
+                        chart.accessibility.keyboardNavigation.move(direction);
                     }
                 }
                 else if (rangeSel) {
@@ -8059,7 +8160,7 @@
                             e.stopPropagation();
                             if (a11y) {
                                 a11y.keyboardNavigation.tabindexContainer.focus();
-                                a11y.keyboardNavigation[e.shiftKey ? 'prev' : 'next']();
+                                a11y.keyboardNavigation.move(e.shiftKey ? -1 : 1);
                             }
                         }
                     });
@@ -8417,6 +8518,7 @@
                 else if (series.a11yMarkersForced) {
                     delete series.a11yMarkersForced;
                     unforceSeriesMarkerOptions(series);
+                    delete series.resetA11yMarkerOptions;
                 }
             }
             /**
@@ -8444,20 +8546,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 }
                             }
                         }
                     });
@@ -8557,6 +8659,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
          */
@@ -8569,7 +8702,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;
                 }
@@ -8577,24 +8710,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;
         }
         /* *
          *
@@ -8632,7 +8765,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) {
@@ -8672,11 +8805,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,
@@ -8685,15 +8818,13 @@
                 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
                 }
             };
             /**
@@ -8735,8 +8866,10 @@
                             }]
                     ],
                     init: function () {
-                        highlightFirstValidPointInChart(chart);
-                        return this.response.success;
+                        return keyboardNavigation.onHandlerInit(this);
+                    },
+                    validate: function () {
+                        return !!getFirstValidPointInChart(chart);
                     },
                     terminate: function () {
                         return keyboardNavigation.onHandlerTerminate();
@@ -8755,6 +8888,25 @@
                     isNext = keyCode === keys.right || keyCode === keys.down;
                 return this.attemptHighlightAdjacentPoint(handler, isNext);
             };
+            /**
+             * When keyboard navigation inits.
+             * @private
+             * @param {Highcharts.KeyboardNavigationHandler} handler The handler object
+             * @return {number}
+             * response
+             */
+            SeriesKeyboardNavigation.prototype.onHandlerInit = function (handler) {
+                var chart = this.chart,
+                    kbdNavOptions = chart.options.accessibility.keyboardNavigation;
+                if (kbdNavOptions.seriesNavigation.rememberPointFocus &&
+                    chart.highlightedPoint) {
+                    chart.highlightedPoint.highlight();
+                }
+                else {
+                    highlightFirstValidPointInChart(chart);
+                }
+                return handler.response.success;
+            };
             /**
              * @private
              * @param {Highcharts.KeyboardNavigationHandler} handler
@@ -8784,7 +8936,8 @@
              * @private
              */
             SeriesKeyboardNavigation.prototype.onHandlerTerminate = function () {
-                var chart = this.chart;
+                var chart = this.chart,
+                    kbdNavOptions = chart.options.accessibility.keyboardNavigation;
                 if (chart.tooltip) {
                     chart.tooltip.hide(0);
                 }
@@ -8795,15 +8948,13 @@
                 if (chart.highlightedPoint && chart.highlightedPoint.onMouseOut) {
                     chart.highlightedPoint.onMouseOut();
                 }
-                delete chart.highlightedPoint;
+                if (!kbdNavOptions.seriesNavigation.rememberPointFocus) {
+                    delete chart.highlightedPoint;
+                }
             };
             /**
              * 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,
@@ -8811,8 +8962,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'];
                 }
@@ -9019,7 +9172,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
@@ -9056,7 +9209,7 @@
                             seriesTypes[type].prototype.keyboardMoveVertical = false;
                         }
                     });
-                    seriesProto.highlightFirstValidPoint = (seriesHighlightFirstValidPoint);
+                    seriesProto.highlightNextValidPoint = (seriesHighlightNextValidPoint);
                 }
             }
             SeriesKeyboardNavigation.compose = compose;
@@ -9094,7 +9247,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
@@ -9102,9 +9255,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 {
@@ -9119,6 +9273,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;
@@ -9129,9 +9286,9 @@
              * point in the series, use that as starting point.
              *
              * @private
-             * @function Highcharts.Series#highlightFirstValidPoint
+             * @function Highcharts.Series#highlightNextValidPoint
              */
-            function seriesHighlightFirstValidPoint() {
+            function seriesHighlightNextValidPoint() {
                 var curPoint = this.chart.highlightedPoint,
                     start = (curPoint && curPoint.series) === this ?
                         getPointIndex(curPoint) :
@@ -9218,7 +9375,6 @@
              * @private
              */
             SeriesComponent.compose = function (ChartClass, PointClass, SeriesClass) {
-                // Handle forcing markers
                 NewDataAnnouncer.compose(SeriesClass);
                 ForcedMarkers.compose(SeriesClass);
                 SeriesKeyboardNavigation.compose(ChartClass, PointClass, SeriesClass);
@@ -9351,8 +9507,8 @@
          */
         function chartHasMapZoom(chart) {
             return !!(chart.mapZoom &&
-                chart.mapNavButtons &&
-                chart.mapNavButtons.length);
+                chart.mapNavigation &&
+                chart.mapNavigation.navButtons.length);
         }
         /* *
          *
@@ -9392,7 +9548,7 @@
                     chart = this.chart;
                 this.proxyProvider.addGroup('zoom', 'div');
                 [
-                    'afterShowResetZoom', 'afterDrilldown', 'drillupall'
+                    'afterShowResetZoom', 'afterApplyDrilldown', 'drillupall'
                 ].forEach(function (eventType) {
                     component.addEvent(chart, eventType, function () {
                         component.updateProxyOverlays();
@@ -9406,8 +9562,8 @@
                 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'));
                     });
@@ -9444,10 +9600,13 @@
                 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)
                     }));
                 }
             };
@@ -9531,14 +9690,14 @@
                 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;
@@ -9559,8 +9718,8 @@
              */
             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);
@@ -9743,8 +9902,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
@@ -10112,7 +10271,17 @@
                  */
                 accessibility: {
                     /**
-                     * Enable accessibility functionality for the chart.
+                     * Enable accessibility functionality for the chart. For more
+                     * information on how to include these features, and why this is
+                     * recommended, see [Highcharts Accessibility](https://www.highcharts.com/docs/accessibility/accessibility-module).
+                     *
+                     * Highcharts will by default emit a warning to the console if
+                     * the [accessibility module](https://code.highcharts.com/modules/accessibility.js)
+                     * is not loaded. Setting this option to `false` will override
+                     * and silence the warning.
+                     *
+                     * Once the module is loaded, setting this option to `false`
+                     * will disable the module for this chart.
                      *
                      * @since 5.0.0
                      */
@@ -10226,12 +10395,43 @@
                          * of the series for a screen reader user. If `false` is returned,
                          * the default formatter will be used for that series.
                          *
+                         * @see [series.descriptionFormat](#accessibility.series.descriptionFormat)
                          * @see [series.description](#plotOptions.series.description)
                          *
                          * @type      {Highcharts.ScreenReaderFormatterCallbackFunction<Highcharts.Series>}
                          * @since 8.0.0
                          * @apioption accessibility.series.descriptionFormatter
                          */
+                        /**
+                         * Format to use for describing the data series group to assistive
+                         * technology - including screen readers.
+                         *
+                         * The series context and its subproperties are available under the
+                         * variable `{series}`, for example `{series.name}` for the series
+                         * name, and `{series.points.length}` for the number of data points.
+                         *
+                         * The chart context and its subproperties are available under the
+                         * variable `{chart}`, for example `{chart.series.length}` for the
+                         * number of series in the chart.
+                         *
+                         * `{seriesDescription}` refers to the automatic description of the
+                         * series type and number of points added by Highcharts by default.
+                         * `{authorDescription}` refers to the description added in
+                         * [series.description](#plotOptions.series.description) if one is
+                         * present. `{axisDescription}` refers to the description added if
+                         * the chart has multiple X or Y axes.
+                         *
+                         * Note that if [series.descriptionFormatter](#accessibility.series.descriptionFormatter)
+                         * is declared it will take precedence, and this option will be
+                         * overridden.
+                         *
+                         * @sample highcharts/accessibility/advanced-accessible
+                         *  Accessible low-medium-high chart
+                         *
+                         * @type      {string}
+                         * @since 10.1.0
+                         */
+                        descriptionFormat: '{seriesDescription}{authorDescription}{axisDescription}',
                         /**
                          * Whether or not to add series descriptions to charts with a single
                          * series.
@@ -10333,6 +10533,8 @@
                          * to assistive technology - including screen readers.
                          * The point context is available as `{point}`.
                          *
+                         * Other available context variables include `{index}`, `{value}`, and `{xDescription}`.
+                         *
                          * Additionally, the series name, annotation info, and
                          * description added in `point.accessibility.description`
                          * is added by default if relevant. To override this, use the
@@ -10345,7 +10547,18 @@
                          * @type      {string}
                          * @since 8.0.1
                          */
-                        valueDescriptionFormat: '{index}. {xDescription}{separator}{value}.'
+                        valueDescriptionFormat: '{xDescription}{separator}{value}.',
+                        /**
+                         * Whether or not to describe points with the value `null` to
+                         * assistive technology, such as screen readers.
+                         *
+                         * @sample {highmaps} maps/demo/all-areas-as-null
+                         *         Accessible map with null points
+                         *
+                         * @type      {boolean}
+                         * @since 10.1.0
+                         */
+                        describeNull: true
                     },
                     /**
                      * Amount of landmarks/regions to create for screen reader users. More
@@ -10589,7 +10802,16 @@
                              * @type  {boolean|number}
                              * @since 8.0.0
                              */
-                            pointNavigationEnabledThreshold: false
+                            pointNavigationEnabledThreshold: false,
+                            /**
+                             * Remember which point was focused even after navigating away
+                             * from the series, so that when navigating back to the series
+                             * you start at the last focused point.
+                             *
+                             * @type  {boolean}
+                             * @since 10.1.0
+                             */
+                            rememberPointFocus: false
                         }
                     },
                     /**
@@ -10923,7 +11145,7 @@
                      * @since 8.0.0
                      */
                     screenReaderSection: {
-                        beforeRegionLabel: 'Chart screen reader information, {chartTitle}.',
+                        beforeRegionLabel: '',
                         afterRegionLabel: '',
                         /**
                          * Language options for annotation descriptions.
@@ -11089,12 +11311,12 @@
                         xAxisDescriptionPlural: 'The chart has {numAxes} X axes displaying {#each(names, -1) }and {names[-1]}.',
                         yAxisDescriptionSingular: 'The chart has 1 Y axis displaying {names[0]}. {ranges[0]}',
                         yAxisDescriptionPlural: 'The chart has {numAxes} Y axes displaying {#each(names, -1) }and {names[-1]}.',
-                        timeRangeDays: 'Range: {range} days.',
-                        timeRangeHours: 'Range: {range} hours.',
-                        timeRangeMinutes: 'Range: {range} minutes.',
-                        timeRangeSeconds: 'Range: {range} seconds.',
-                        rangeFromTo: 'Range: {rangeFrom} to {rangeTo}.',
-                        rangeCategories: 'Range: {numCategories} categories.'
+                        timeRangeDays: 'Data range: {range} days.',
+                        timeRangeHours: 'Data range: {range} hours.',
+                        timeRangeMinutes: 'Data range: {range} minutes.',
+                        timeRangeSeconds: 'Data range: {range} seconds.',
+                        rangeFromTo: 'Data ranges from {rangeFrom} to {rangeTo}.',
+                        rangeCategories: 'Data range: {numCategories} categories.'
                     },
                     /**
                      * Exporting menu format strings for accessibility module.
@@ -11125,34 +11347,39 @@
                          * If a definition does not exist for the specific series type
                          * and mode, the 'default' lang definitions are used.
                          *
+                         * Chart and its subproperties can be accessed with the `{chart}` variable.
+                         * The series and its subproperties can be accessed with the `{series}` variable.
+                         *
+                         * The series index (starting from 1) can be accessed with the `{seriesNumber}` variable.
+                         *
                          * @since 6.0.6
                          */
                         summary: {
                             /* eslint-disable max-len */
-                            'default': '{name}, series {ix} of {numSeries} with {numPoints} data {#plural(numPoints, points, point)}.',
-                            defaultCombination: '{name}, series {ix} of {numSeries} with {numPoints} data {#plural(numPoints, points, point)}.',
-                            line: '{name}, line {ix} of {numSeries} with {numPoints} data {#plural(numPoints, points, point)}.',
-                            lineCombination: '{name}, series {ix} of {numSeries}. Line with {numPoints} data {#plural(numPoints, points, point)}.',
-                            spline: '{name}, line {ix} of {numSeries} with {numPoints} data {#plural(numPoints, points, point)}.',
-                            splineCombination: '{name}, series {ix} of {numSeries}. Line with {numPoints} data {#plural(numPoints, points, point)}.',
-                            column: '{name}, bar series {ix} of {numSeries} with {numPoints} {#plural(numPoints, bars, bar)}.',
-                            columnCombination: '{name}, series {ix} of {numSeries}. Bar series with {numPoints} {#plural(numPoints, bars, bar)}.',
-                            bar: '{name}, bar series {ix} of {numSeries} with {numPoints} {#plural(numPoints, bars, bar)}.',
-                            barCombination: '{name}, series {ix} of {numSeries}. Bar series with {numPoints} {#plural(numPoints, bars, bar)}.',
-                            pie: '{name}, pie {ix} of {numSeries} with {numPoints} {#plural(numPoints, slices, slice)}.',
-                            pieCombination: '{name}, series {ix} of {numSeries}. Pie with {numPoints} {#plural(numPoints, slices, slice)}.',
-                            scatter: '{name}, scatter plot {ix} of {numSeries} with {numPoints} {#plural(numPoints, points, point)}.',
-                            scatterCombination: '{name}, series {ix} of {numSeries}, scatter plot with {numPoints} {#plural(numPoints, points, point)}.',
-                            boxplot: '{name}, boxplot {ix} of {numSeries} with {numPoints} {#plural(numPoints, boxes, box)}.',
-                            boxplotCombination: '{name}, series {ix} of {numSeries}. Boxplot with {numPoints} {#plural(numPoints, boxes, box)}.',
-                            bubble: '{name}, bubble series {ix} of {numSeries} with {numPoints} {#plural(numPoints, bubbles, bubble)}.',
-                            bubbleCombination: '{name}, series {ix} of {numSeries}. Bubble series with {numPoints} {#plural(numPoints, bubbles, bubble)}.',
-                            map: '{name}, map {ix} of {numSeries} with {numPoints} {#plural(numPoints, areas, area)}.',
-                            mapCombination: '{name}, series {ix} of {numSeries}. Map with {numPoints} {#plural(numPoints, areas, area)}.',
-                            mapline: '{name}, line {ix} of {numSeries} with {numPoints} data {#plural(numPoints, points, point)}.',
-                            maplineCombination: '{name}, series {ix} of {numSeries}. Line with {numPoints} data {#plural(numPoints, points, point)}.',
-                            mapbubble: '{name}, bubble series {ix} of {numSeries} with {numPoints} {#plural(numPoints, bubbles, bubble)}.',
-                            mapbubbleCombination: '{name}, series {ix} of {numSeries}. Bubble series with {numPoints} {#plural(numPoints, bubbles, bubble)}.'
+                            'default': '{series.name}, series {seriesNumber} of {chart.series.length} with {series.points.length} data {#plural(series.points.length, points, point)}.',
+                            defaultCombination: '{series.name}, series {seriesNumber} of {chart.series.length} with {series.points.length} data {#plural(series.points.length, points, point)}.',
+                            line: '{series.name}, line {seriesNumber} of {chart.series.length} with {series.points.length} data {#plural(series.points.length, points, point)}.',
+                            lineCombination: '{series.name}, series {seriesNumber} of {chart.series.length}. Line with {series.points.length} data {#plural(series.points.length, points, point)}.',
+                            spline: '{series.name}, line {seriesNumber} of {chart.series.length} with {series.points.length} data {#plural(series.points.length, points, point)}.',
+                            splineCombination: '{series.name}, series {seriesNumber} of {chart.series.length}. Line with {series.points.length} data {#plural(series.points.length, points, point)}.',
+                            column: '{series.name}, bar series {seriesNumber} of {chart.series.length} with {series.points.length} {#plural(series.points.length, bars, bar)}.',
+                            columnCombination: '{series.name}, series {seriesNumber} of {chart.series.length}. Bar series with {series.points.length} {#plural(series.points.length, bars, bar)}.',
+                            bar: '{series.name}, bar series {seriesNumber} of {chart.series.length} with {series.points.length} {#plural(series.points.length, bars, bar)}.',
+                            barCombination: '{series.name}, series {seriesNumber} of {chart.series.length}. Bar series with {series.points.length} {#plural(series.points.length, bars, bar)}.',
+                            pie: '{series.name}, pie {seriesNumber} of {chart.series.length} with {series.points.length} {#plural(series.points.length, slices, slice)}.',
+                            pieCombination: '{series.name}, series {seriesNumber} of {chart.series.length}. Pie with {series.points.length} {#plural(series.points.length, slices, slice)}.',
+                            scatter: '{series.name}, scatter plot {seriesNumber} of {chart.series.length} with {series.points.length} {#plural(series.points.length, points, point)}.',
+                            scatterCombination: '{series.name}, series {seriesNumber} of {chart.series.length}, scatter plot with {series.points.length} {#plural(series.points.length, points, point)}.',
+                            boxplot: '{series.name}, boxplot {seriesNumber} of {chart.series.length} with {series.points.length} {#plural(series.points.length, boxes, box)}.',
+                            boxplotCombination: '{series.name}, series {seriesNumber} of {chart.series.length}. Boxplot with {series.points.length} {#plural(series.points.length, boxes, box)}.',
+                            bubble: '{series.name}, bubble series {seriesNumber} of {chart.series.length} with {series.points.length} {#plural(series.points.length, bubbles, bubble)}.',
+                            bubbleCombination: '{series.name}, series {seriesNumber} of {chart.series.length}. Bubble series with {series.points.length} {#plural(series.points.length, bubbles, bubble)}.',
+                            map: '{series.name}, map {seriesNumber} of {chart.series.length} with {series.points.length} {#plural(series.points.length, areas, area)}.',
+                            mapCombination: '{series.name}, series {seriesNumber} of {chart.series.length}. Map with {series.points.length} {#plural(series.points.length, areas, area)}.',
+                            mapline: '{series.name}, line {seriesNumber} of {chart.series.length} with {series.points.length} data {#plural(series.points.length, points, point)}.',
+                            maplineCombination: '{series.name}, series {seriesNumber} of {chart.series.length}. Line with {series.points.length} data {#plural(series.points.length, points, point)}.',
+                            mapbubble: '{series.name}, bubble series {seriesNumber} of {chart.series.length} with {series.points.length} {#plural(series.points.length, bubbles, bubble)}.',
+                            mapbubbleCombination: '{series.name}, series {seriesNumber} of {chart.series.length}. Bubble series with {series.points.length} {#plural(series.points.length, bubbles, bubble)}.'
                         },
                         /**
                          * User supplied description text. This is added in the point
@@ -11784,7 +12011,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) {