highcharts 9.3.2 → 10.1.0

package/es-modules/Accessibility/KeyboardNavigation.js

@@ -123,6 +123,64 @@ var KeyboardNavigation = /** @class */ (function () {
             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
@@ -136,29 +194,37 @@ var KeyboardNavigation = /** @class */ (function () {
         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;
         }
     };
@@ -184,10 +250,10 @@ var KeyboardNavigation = /** @class */ (function () {
                 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();
@@ -195,78 +261,6 @@ var KeyboardNavigation = /** @class */ (function () {
             }
         }
     };
-    /**
-     * 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
@@ -291,6 +285,17 @@ var KeyboardNavigation = /** @class */ (function () {
         }
     };
     /**
+     * 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) {
@@ -302,26 +307,17 @@ var KeyboardNavigation = /** @class */ (function () {
         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) {
@@ -329,6 +325,9 @@ var KeyboardNavigation = /** @class */ (function () {
         this.eventProvider.addEvent(element, 'focus', function (ev) {
             var e = ev || win.event, 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;
@@ -346,7 +345,7 @@ var KeyboardNavigation = /** @class */ (function () {
                     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
@@ -360,6 +359,21 @@ var KeyboardNavigation = /** @class */ (function () {
             }
         });
     };
+    /**
+     * 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
@@ -395,6 +409,7 @@ var KeyboardNavigation = /** @class */ (function () {
      * */
     /* eslint-disable valid-jsdoc */
     /**
+     * Composition function.
      * @private
      */
     function compose(ChartClass) {

package/es-modules/Accessibility/Options/LangOptions.js

@@ -68,7 +68,7 @@ var langOptions = {
          * @since 8.0.0
          */
         screenReaderSection: {
-            beforeRegionLabel: 'Chart screen reader information, {chartTitle}.',
+            beforeRegionLabel: '',
             afterRegionLabel: '',
             /**
              * Language options for annotation descriptions.
@@ -234,12 +234,12 @@ var langOptions = {
             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.
@@ -270,34 +270,39 @@ var langOptions = {
              * 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

package/es-modules/Accessibility/Options/Options.js

@@ -90,7 +90,17 @@ var Options = {
      */
     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
          */
@@ -204,12 +214,43 @@ var Options = {
              * 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.
@@ -311,6 +352,8 @@ var Options = {
              * 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
@@ -323,7 +366,18 @@ var Options = {
              * @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
@@ -567,7 +621,16 @@ var Options = {
                  * @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
             }
         },
         /**

package/es-modules/Accessibility/ProxyElement.js

@@ -90,9 +90,15 @@ var ProxyElement = /** @class */ (function () {
     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();
@@ -189,12 +195,14 @@ var ProxyElement = /** @class */ (function () {
         var posElement = this.target.visual || clickTargetElement;
         var chartDiv = this.chart.renderTo;
         if (chartDiv && posElement && posElement.getBoundingClientRect) {
-            var rectEl = posElement.getBoundingClientRect(), rectDiv = chartDiv.getBoundingClientRect();
+            var rectEl = posElement.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 };

package/es-modules/Accessibility/ProxyProvider.js

@@ -72,10 +72,13 @@ var ProxyProvider = /** @class */ (function () {
     /**
      * 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.
@@ -104,6 +107,7 @@ var ProxyProvider = /** @class */ (function () {
         // 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.
@@ -286,6 +290,10 @@ var ProxyProvider = /** @class */ (function () {
      */
     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);

package/es-modules/Accessibility/Utils/ChartUtilities.js

@@ -113,9 +113,9 @@ function getCategoryAxisRangeDesc(axis) {
  * @private
  */
 function getAxisTimeLengthDesc(axis) {
-    var chart = axis.chart, range = {};
+    var chart = axis.chart, 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;
@@ -142,8 +142,13 @@ function getAxisFromToDescription(axis) {
     var chart = axis.chart, options = chart.options, dateRangeFormat = (options &&
         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,