highcharts 9.3.3 → 10.0.0

package/es-modules/Accessibility/Components/SeriesComponent/SeriesKeyboardNavigation.js

@@ -84,6 +84,35 @@ function isSkipPoint(point) {
         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
  */
@@ -95,7 +124,7 @@ function highlightLastValidPointInChart(chart) {
         // 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;
         }
@@ -103,24 +132,24 @@ function highlightLastValidPointInChart(chart) {
     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;
 }
 /* *
  *
@@ -156,7 +185,7 @@ var SeriesKeyboardNavigation = /** @class */ (function () {
         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) {
@@ -195,25 +224,23 @@ var SeriesKeyboardNavigation = /** @class */ (function () {
         });
     };
     /**
+     * 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, last.seriesName);
         var point;
         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
         }
     };
     /**
@@ -255,6 +282,9 @@ var SeriesKeyboardNavigation = /** @class */ (function () {
                 highlightFirstValidPointInChart(chart);
                 return this.response.success;
             },
+            validate: function () {
+                return !!getFirstValidPointInChart(chart);
+            },
             terminate: function () {
                 return keyboardNavigation.onHandlerTerminate();
             }
@@ -313,17 +343,15 @@ var SeriesKeyboardNavigation = /** @class */ (function () {
     /**
      * 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, wrapAround = chart.options.accessibility.keyboardNavigation
             .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'];
         }
@@ -515,7 +543,7 @@ var SeriesKeyboardNavigation = /** @class */ (function () {
         // 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
@@ -552,7 +580,7 @@ var SeriesKeyboardNavigation = /** @class */ (function () {
                     seriesTypes[type].prototype.keyboardMoveVertical = false;
                 }
             });
-            seriesProto.highlightFirstValidPoint = (seriesHighlightFirstValidPoint);
+            seriesProto.highlightNextValidPoint = (seriesHighlightNextValidPoint);
         }
     }
     SeriesKeyboardNavigation.compose = compose;
@@ -586,7 +614,7 @@ var SeriesKeyboardNavigation = /** @class */ (function () {
         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
@@ -594,9 +622,10 @@ var SeriesKeyboardNavigation = /** @class */ (function () {
      * @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 {
@@ -611,6 +640,9 @@ var SeriesKeyboardNavigation = /** @class */ (function () {
         // 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;
@@ -621,9 +653,9 @@ var SeriesKeyboardNavigation = /** @class */ (function () {
      * 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) :
             0, points = this.points, len = points.length;

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

@@ -42,8 +42,8 @@ var attr = U.attr, extend = U.extend, pick = U.pick;
  */
 function chartHasMapZoom(chart) {
     return !!(chart.mapZoom &&
-        chart.mapNavButtons &&
-        chart.mapNavButtons.length);
+        chart.mapNavigation &&
+        chart.mapNavigation.navButtons.length);
 }
 /* *
  *
@@ -81,7 +81,7 @@ var ZoomComponent = /** @class */ (function (_super) {
         var component = this, chart = this.chart;
         this.proxyProvider.addGroup('zoom', 'div');
         [
-            'afterShowResetZoom', 'afterDrilldown', 'drillupall'
+            'afterShowResetZoom', 'afterApplyDrilldown', 'drillupall'
         ].forEach(function (eventType) {
             component.addEvent(chart, eventType, function () {
                 component.updateProxyOverlays();
@@ -94,8 +94,8 @@ var ZoomComponent = /** @class */ (function (_super) {
     ZoomComponent.prototype.onChartUpdate = function () {
         var chart = this.chart, component = this;
         // Make map zoom buttons accessible
-        if (chart.mapNavButtons) {
-            chart.mapNavButtons.forEach(function (button, i) {
+        if (chart.mapNavigation) {
+            chart.mapNavigation.navButtons.forEach(function (button, i) {
                 unhideChartElementFromAT(chart, button.element);
                 component.setMapNavButtonAttrs(button.element, 'accessibility.zoom.mapZoom' + (i ? 'Out' : 'In'));
             });
@@ -131,10 +131,13 @@ var ZoomComponent = /** @class */ (function (_super) {
         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)
             }));
         }
     };
@@ -214,14 +217,14 @@ var ZoomComponent = /** @class */ (function (_super) {
         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;
@@ -241,7 +244,7 @@ var ZoomComponent = /** @class */ (function (_super) {
      * @param {number} direction
      */
     ZoomComponent.prototype.onMapNavInit = function (direction) {
-        var chart = this.chart, zoomIn = chart.mapNavButtons[0], zoomOut = chart.mapNavButtons[1], initialButton = direction > 0 ? zoomIn : zoomOut;
+        var chart = this.chart, zoomIn = chart.mapNavigation.navButtons[0], zoomOut = chart.mapNavigation.navButtons[1], initialButton = direction > 0 ? zoomIn : zoomOut;
         chart.setFocusToElement(initialButton.box, initialButton.element);
         initialButton.setState(2);
         this.focusedMapNavButtonIx = direction > 0 ? 0 : 1;

package/es-modules/Accessibility/HighContrastMode.js

@@ -42,8 +42,8 @@ function isHighContrastModeActive() {
         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

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/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);