highcharts 11.3.0 → 11.4.0

package/README.md

@@ -3,7 +3,7 @@ Highcharts is a JavaScript charting library based on SVG rendering. This project
 This package is intended for supporting client-side JavaScript charting through bundlers like Parcel or Webpack and environments like Babel or TypeScript. If you intend to generate static charts on the server side, use the [Highcharts node.js Export Server](https://www.npmjs.com/package/highcharts-export-server) instead.
 
 ### License
-Please note that commercial use of Highcharts requires a commercial license. For testing and demonstration purposes (POC), Highcharts can be used free of charge. Non-profit organisations, schools and personal websites are qualified for the free license. Read more about licenses [in the Highcharts shop](https://shop.highsoft.com/?utm_source=npmjs&utm_medium=referral&utm_campaign=highchartspage&utm_content=licenseinfo).
+Please note that commercial use of Highcharts requires a commercial license. Non-commercial use may qualify for a free educational or personal license. Read more about licenses [in the Highcharts shop](https://shop.highsoft.com/?utm_source=npmjs&utm_medium=referral&utm_campaign=highchartspage&utm_content=licenseinfo).
 
 ### Links
 * Official website: [www.highcharts.com](http://www.highcharts.com)

package/bower.json

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

package/css/annotations/popup.css

@@ -20,11 +20,14 @@
     min-width: 0;
 }
 
-.highcharts-popup.highcharts-annotation-toolbar button {
+.highcharts-annotation-toolbar button {
     margin-top: 0;
+    cursor: pointer;
+    background-color: var(--highcharts-neutral-color-3);
 }
 
-.highcharts-popup.highcharts-annotation-toolbar > span {
+.highcharts-popup.highcharts-annotation-toolbar > p {
+    margin: 0;
     display: block;
     float: left;
     padding: 12px;
@@ -134,22 +137,26 @@
     padding: 15px 0;
 }
 
-.highcharts-indicator-list li {
+button.highcharts-indicator-list-item {
     cursor: pointer;
     padding: 5px 20px;
-    margin: 0;
     width: 100%;
     height: auto;
     overflow: hidden;
     word-break: break-all;
     box-sizing: border-box;
+    background-color: var(--highcharts-background-color);
+    text-align: left;
 }
 
-.highcharts-indicator-list li:hover {
-    background-color: var(--highcharts-neutral-color-10);
+.highcharts-indicator-list li {
+    width: 100%;
+    padding: 0;
+    height: auto;
 }
 
-.highcharts-tab-item {
+.highcharts-popup > button.highcharts-tab-item {
+    margin: 0;
     background-color: var(--highcharts-neutral-color-3);
     cursor: pointer;
     display: block;
@@ -159,7 +166,7 @@
     line-height: 40px;
 }
 
-.highcharts-tab-item.highcharts-tab-item-active {
+button.highcharts-tab-item.highcharts-tab-item-active {
     background-color: var(--highcharts-neutral-color-10);
 }
 
@@ -176,9 +183,11 @@
     display: block;
 }
 
-.highcharts-popup-close {
+.highcharts-popup > .highcharts-popup-close {
+    margin: 0;
     background-repeat: no-repeat;
     background-position: 50% 50%;
+    background-color: var(--highcharts-background-color);
     width: 40px;
     height: 40px;
     cursor: pointer;
@@ -194,26 +203,25 @@
 .highcharts-popup button.highcharts-annotation-edit-button:hover,
 .highcharts-popup button.highcharts-annotation-remove-button:hover {
     background-color: var(--highcharts-neutral-color-10);
-    cursor: pointer;
 }
 
-.highcharts-popup button {
+div.highcharts-popup-rhs-col > button {
     float: right;
-    border: none;
-    background: var(--highcharts-neutral-color-3);
-    color: var(--highcharts-neutral-color-60);
-    margin-left: 5px;
-    margin-top: 12px;
 }
 
-.highcharts-popup button:first-child {
-    margin-left: 0;
+.highcharts-popup button {
+    border: none;
+    margin: 0 5px 0 0;
 }
 
-.highcharts-tab-disabled {
+button.highcharts-tab-item.highcharts-tab-disabled {
     color: var(--highcharts-neutral-color-20);
 }
 
+button.highcharts-tab-item.highcharts-tab-disabled:hover {
+    background-color: var(--highcharts-neutral-color-3);
+}
+
 /* annotation edit small popup */
 .highcharts-popup button.highcharts-annotation-edit-button,
 .highcharts-popup button.highcharts-annotation-remove-button {

package/css/stocktools/gui.css

@@ -209,9 +209,15 @@
     background-color: transparent;
 }
 
-.highcharts-bindings-wrapper li > span.highcharts-menu-item-btn {
+.highcharts-bindings-wrapper li > button.highcharts-menu-item-btn {
     display: block;
+    border: none;
     float: left;
+    padding: 0;
+    background: none;
+    color: inherit;
+    font: inherit;
+    cursor: pointer;
     width: 100%;
     height: 100%;
     background-repeat: no-repeat;
@@ -219,15 +225,21 @@
     background-size: 32px 32px;
 }
 
-.highcharts-submenu-wrapper li > span.highcharts-menu-item-btn {
+.highcharts-submenu-wrapper li > button.highcharts-menu-item-btn {
     width: 40px;
 }
 
-.highcharts-bindings-wrapper li > span.highcharts-submenu-item-arrow {
+.highcharts-bindings-wrapper li > button.highcharts-submenu-item-arrow {
     float: left;
+    background-repeat: no-repeat;
+    color: inherit;
+    border: none;
+    padding: 0;
+    font: inherit;
+    cursor: pointer;
+    background-color: transparent;
     width: 10px;
     height: 100%;
-    cursor: pointer;
     position: absolute;
     bottom: 0;
     right: 0;
@@ -240,12 +252,12 @@
     pointer-events: none;
 }
 
-.highcharts-bindings-wrapper li.highcharts-separator > span.highcharts-menu-item-btn {
+.highcharts-bindings-wrapper li.highcharts-separator > button.highcharts-menu-item-btn {
     width: 100%;
 }
 
-.highcharts-bindings-wrapper li.highcharts-active > span.highcharts-menu-item-btn,
-.highcharts-bindings-wrapper li > span.highcharts-menu-item-btn:hover,
+.highcharts-bindings-wrapper li.highcharts-active > button.highcharts-menu-item-btn,
+.highcharts-bindings-wrapper li > button.highcharts-menu-item-btn:hover,
 .highcharts-bindings-wrapper .highcharts-arrow-wrapper > div:hover,
 .highcharts-bindings-wrapper li.highcharts-active,
 .highcharts-toggle-toolbar:hover {

package/es-modules/Accessibility/A11yI18n.js

@@ -13,10 +13,8 @@
 'use strict';
 import F from '../Core/Templating.js';
 const { format } = F;
-import H from '../Core/Globals.js';
-const { composed } = H;
 import U from '../Core/Utilities.js';
-const { getNestedProperty, pick, pushUnique } = U;
+const { getNestedProperty, pick } = U;
 /* *
  *
  *  Composition
@@ -38,8 +36,8 @@ var A11yI18nComposition;
      * @private
      */
     function compose(ChartClass) {
-        if (pushUnique(composed, compose)) {
-            const chartProto = ChartClass.prototype;
+        const chartProto = ChartClass.prototype;
+        if (!chartProto.langFormat) {
             chartProto.langFormat = langFormat;
         }
     }
@@ -149,7 +147,7 @@ var A11yI18nComposition;
      * If negative, the function will subtract the number from the length of the
      * array.  Use this to stop iterating before the array ends.  Example:
      *
-     * - Format: 'List contains: {#each(myArray, -1) }and {myArray[-1]}.'
+     * - Format: 'List contains: {#each(myArray, -1), }and {myArray[-1]}.'
      *
      * - Context: { myArray: [0, 1, 2, 3] }
      *

package/es-modules/Accessibility/Accessibility.js

@@ -13,9 +13,9 @@
 import D from '../Core/Defaults.js';
 const { defaultOptions } = D;
 import H from '../Core/Globals.js';
-const { composed, doc } = H;
+const { doc } = H;
 import U from '../Core/Utilities.js';
-const { addEvent, extend, fireEvent, merge, pushUnique } = U;
+const { addEvent, extend, fireEvent, merge } = U;
 import HU from './Utils/HTMLUtilities.js';
 const { removeElement } = HU;
 import A11yI18n from './A11yI18n.js';
@@ -155,8 +155,10 @@ class Accessibility {
         // Update keyboard navigation
         this.keyboardNavigation.update(kbdNavOrder);
         // Handle high contrast mode
-        if (!chart.highContrastModeActive && // Only do this once
-            whcm.isHighContrastModeActive()) {
+        // Should only be applied once, and not if explicitly disabled
+        if (!chart.highContrastModeActive &&
+            a11yOptions.highContrastMode !== false && (whcm.isHighContrastModeActive() ||
+            a11yOptions.highContrastMode === true)) {
             whcm.setHighContrastTheme(chart);
         }
         fireEvent(chart, 'afterA11yUpdate', {
@@ -325,8 +327,8 @@ class Accessibility {
         if (RangeSelectorClass) {
             RangeSelectorComponent.compose(ChartClass, RangeSelectorClass);
         }
-        if (pushUnique(composed, compose)) {
-            const chartProto = ChartClass.prototype;
+        const chartProto = ChartClass.prototype;
+        if (!chartProto.updateA11yEnabled) {
             chartProto.updateA11yEnabled = chartUpdateA11yEnabled;
             addEvent(ChartClass, 'destroy', chartOnDestroy);
             addEvent(ChartClass, 'render', chartOnRender);

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

@@ -25,7 +25,7 @@ const { doc } = H;
 import HU from '../Utils/HTMLUtilities.js';
 const { addClass, getElement, getHeadingTagNameForElement, stripHTMLTagsFromString, visuallyHideElement } = HU;
 import U from '../../Core/Utilities.js';
-const { attr, pick } = U;
+const { attr, pick, replaceNested } = U;
 /* *
  *
  *  Functions
@@ -62,13 +62,13 @@ function getTypeDescForEmptyChart(chart, formatContext) {
  * @private
  */
 function buildTypeDescriptionFromSeries(chart, types, context) {
-    const firstType = types[0], typeExplaination = chart.langFormat('accessibility.seriesTypeDescriptions.' + firstType, context), multi = chart.series && chart.series.length < 2 ? 'Single' : 'Multiple';
+    const firstType = types[0], typeExplanation = chart.langFormat('accessibility.seriesTypeDescriptions.' + firstType, context), multi = chart.series && chart.series.length < 2 ? 'Single' : 'Multiple';
     return (chart.langFormat('accessibility.chartTypes.' + firstType + multi, context) ||
-        chart.langFormat('accessibility.chartTypes.default' + multi, context)) + (typeExplaination ? ' ' + typeExplaination : '');
+        chart.langFormat('accessibility.chartTypes.default' + multi, context)) + (typeExplanation ? ' ' + typeExplanation : '');
 }
 /**
- * Return simplified explaination of chart type. Some types will not be
- * familiar to most users, but in those cases we try to add an explaination
+ * Return simplified explanation of chart type. Some types will not be
+ * familiar to most users, but in those cases we try to add an explanation
  * of the type.
  *
  * @private
@@ -99,7 +99,8 @@ function getTypeDescription(chart, types) {
  * @private
  */
 function stripEmptyHTMLTags(str) {
-    return str.replace(/<(\w+)[^>]*?>\s*<\/\1>/g, '');
+    // Scan alert #[71]: Loop for nested patterns
+    return replaceNested(str, [/<([\w\-.:!]+)\b[^<>]*>\s*<\/\1>/g, '']);
 }
 /* *
  *
@@ -400,6 +401,10 @@ class InfoRegionsComponent extends AccessibilityComponent {
      * @private
      */
     getEndOfChartMarkerText() {
+        const endMarkerId = `highcharts-end-of-chart-marker-${this.chart.index}`, endMarker = getElement(endMarkerId);
+        if (endMarker) {
+            return endMarker.outerHTML;
+        }
         const chart = this.chart, markerText = chart.langFormat('accessibility.screenReaderSection.endOfChartMarker', { chart: chart }), id = 'highcharts-end-of-chart-marker-' + chart.index;
         return '<div id="' + id + '">' + markerText + '</div>';
     }

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

@@ -13,10 +13,10 @@
 import A from '../../Core/Animation/AnimationUtilities.js';
 const { animObject } = A;
 import H from '../../Core/Globals.js';
-const { composed, doc } = H;
+const { doc } = H;
 import Legend from '../../Core/Legend/Legend.js';
 import U from '../../Core/Utilities.js';
-const { addEvent, fireEvent, isNumber, pick, pushUnique, syncTimeout } = U;
+const { addEvent, fireEvent, isNumber, pick, syncTimeout } = U;
 import AccessibilityComponent from '../AccessibilityComponent.js';
 import KeyboardNavigationHandler from '../KeyboardNavigationHandler.js';
 import CU from '../Utils/ChartUtilities.js';
@@ -439,8 +439,8 @@ class LegendComponent extends AccessibilityComponent {
      * @private
      */
     function compose(ChartClass, LegendClass) {
-        if (pushUnique(composed, compose)) {
-            const chartProto = ChartClass.prototype;
+        const chartProto = ChartClass.prototype;
+        if (!chartProto.highlightLegendItem) {
             chartProto.highlightLegendItem = chartHighlightLegendItem;
             addEvent(LegendClass, 'afterColorizeItem', legendOnAfterColorizeItem);
         }

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

@@ -10,11 +10,8 @@
  *
  * */
 'use strict';
-import Chart from '../../Core/Chart/Chart.js';
-import H from '../../Core/Globals.js';
-const { composed } = H;
 import U from '../../Core/Utilities.js';
-const { attr, pushUnique } = U;
+const { attr } = U;
 import AccessibilityComponent from '../AccessibilityComponent.js';
 import KeyboardNavigationHandler from '../KeyboardNavigationHandler.js';
 import ChartUtilities from '../Utils/ChartUtilities.js';
@@ -321,8 +318,8 @@ class MenuComponent extends AccessibilityComponent {
      * @private
      */
     function compose(ChartClass) {
-        if (pushUnique(composed, compose)) {
-            const chartProto = Chart.prototype;
+        const chartProto = ChartClass.prototype;
+        if (!chartProto.hideExportMenu) {
             chartProto.hideExportMenu = chartHideExportMenu;
             chartProto.highlightExportItem = chartHighlightExportItem;
             chartProto.highlightLastExportItem = chartHighlightLastExportItem;

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

@@ -181,9 +181,12 @@ class NavigatorComponent extends AccessibilityComponent {
      */
     updateNavigator(beforeAnnounce) {
         const performUpdate = (beforeAnnounce) => {
-            const chart = this.chart, navigator = chart.navigator;
-            if (navigator && this.minHandleProxy && this.maxHandleProxy) {
-                const chartPos = chart.pointer.getChartPosition(), minNewX = parseFloat(this.minHandleProxy.value) /
+            const chart = this.chart, { navigator, pointer } = chart;
+            if (navigator &&
+                pointer &&
+                this.minHandleProxy &&
+                this.maxHandleProxy) {
+                const chartPos = pointer.getChartPosition(), minNewX = parseFloat(this.minHandleProxy.value) /
                     100 * navigator.size, maxNewX = parseFloat(this.maxHandleProxy.value) /
                     100 * navigator.size;
                 // Fire fake events in order for each handle.

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

@@ -14,12 +14,9 @@ import AccessibilityComponent from '../AccessibilityComponent.js';
 import Announcer from '../Utils/Announcer.js';
 import ChartUtilities from '../Utils/ChartUtilities.js';
 const { unhideChartElementFromAT, getAxisRangeDescription } = ChartUtilities;
-import H from '../../Core/Globals.js';
-const { composed } = H;
 import KeyboardNavigationHandler from '../KeyboardNavigationHandler.js';
-import RangeSelector from '../../Stock/RangeSelector/RangeSelector.js';
 import U from '../../Core/Utilities.js';
-const { addEvent, attr, pushUnique } = U;
+const { addEvent, attr } = U;
 /* *
  *
  *  Functions
@@ -450,10 +447,10 @@ class RangeSelectorComponent extends AccessibilityComponent {
      * @private
      */
     function compose(ChartClass, RangeSelectorClass) {
-        if (pushUnique(composed, compose)) {
-            const chartProto = ChartClass.prototype;
+        const chartProto = ChartClass.prototype;
+        if (!chartProto.highlightRangeSelectorButton) {
             chartProto.highlightRangeSelectorButton = (chartHighlightRangeSelectorButton);
-            addEvent(RangeSelector, 'afterBtnClick', rangeSelectorAfterBtnClick);
+            addEvent(RangeSelectorClass, 'afterBtnClick', rangeSelectorAfterBtnClick);
         }
     }
     RangeSelectorComponent.compose = compose;

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

@@ -35,10 +35,11 @@ var ForcedMarkersComposition;
      * @private
      */
     function compose(SeriesClass) {
-        if (pushUnique(composed, compose)) {
+        if (pushUnique(composed, 'A11y.FM')) {
             addEvent(SeriesClass, 'afterSetOptions', seriesOnAfterSetOptions);
             addEvent(SeriesClass, 'render', seriesOnRender);
             addEvent(SeriesClass, 'afterRender', seriesOnAfterRender);
+            addEvent(SeriesClass, 'renderCanvas', seriesOnRenderCanvas);
         }
     }
     ForcedMarkersComposition.compose = compose;
@@ -190,7 +191,7 @@ var ForcedMarkersComposition;
     function unforceSeriesMarkerOptions(series) {
         const resetMarkerOptions = series.resetA11yMarkerOptions;
         if (resetMarkerOptions) {
-            const originalOpactiy = resetMarkerOptions.states &&
+            const originalOpacity = resetMarkerOptions.states &&
                 resetMarkerOptions.states.normal &&
                 resetMarkerOptions.states.normal.opacity;
             // Temporarily set the old marker options to enabled in order to
@@ -202,12 +203,26 @@ var ForcedMarkersComposition;
                 marker: {
                     enabled: resetMarkerOptions.enabled,
                     states: {
-                        normal: { opacity: originalOpactiy }
+                        normal: { opacity: originalOpacity }
                     }
                 }
             });
         }
     }
+    /**
+     * Reset markers if series is boosted and had forced markers (#17320).
+     * @private
+     */
+    function seriesOnRenderCanvas() {
+        if (this.boosted && this.a11yMarkersForced) {
+            merge(true, this.options, {
+                marker: {
+                    enabled: false
+                }
+            });
+            delete this.a11yMarkersForced;
+        }
+    }
 })(ForcedMarkersComposition || (ForcedMarkersComposition = {}));
 /* *
  *

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

@@ -262,7 +262,7 @@ class NewDataAnnouncer {
      * @private
      */
     function compose(SeriesClass) {
-        if (pushUnique(composed, compose)) {
+        if (pushUnique(composed, 'A11y.NDA')) {
             addEvent(SeriesClass, 'addPoint', seriesOnAddPoint);
             addEvent(SeriesClass, 'updatedData', seriesOnUpdatedData);
         }
@@ -274,7 +274,8 @@ class NewDataAnnouncer {
      * @param {Highcharts.Point} point
      */
     function seriesOnAddPoint(e) {
-        const chart = this.chart, newDataAnnouncer = this.newDataAnnouncer;
+        const chart = this.chart, newDataAnnouncer = chart.accessibility?.components
+            .series.newDataAnnouncer;
         if (newDataAnnouncer &&
             newDataAnnouncer.chart === chart &&
             chartHasAnnounceEnabled(chart)) {
@@ -290,7 +291,8 @@ class NewDataAnnouncer {
      * @param {Highcharts.Series} series
      */
     function seriesOnUpdatedData() {
-        const chart = this.chart, newDataAnnouncer = this.newDataAnnouncer;
+        const chart = this.chart, newDataAnnouncer = chart.accessibility?.components
+            .series.newDataAnnouncer;
         if (newDataAnnouncer &&
             newDataAnnouncer.chart === chart &&
             chartHasAnnounceEnabled(chart)) {

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

@@ -15,9 +15,9 @@ import Series from '../../../Core/Series/Series.js';
 import SeriesRegistry from '../../../Core/Series/SeriesRegistry.js';
 const { seriesTypes } = SeriesRegistry;
 import H from '../../../Core/Globals.js';
-const { composed, doc } = H;
+const { doc } = H;
 import U from '../../../Core/Utilities.js';
-const { defined, fireEvent, pushUnique } = U;
+const { defined, fireEvent } = U;
 import KeyboardNavigationHandler from '../../KeyboardNavigationHandler.js';
 import EventProvider from '../../Utils/EventProvider.js';
 import ChartUtilities from '../../Utils/ChartUtilities.js';
@@ -567,8 +567,8 @@ class SeriesKeyboardNavigation {
      * @private
      */
     function compose(ChartClass, PointClass, SeriesClass) {
-        if (pushUnique(composed, compose)) {
-            const chartProto = ChartClass.prototype, pointProto = PointClass.prototype, seriesProto = SeriesClass.prototype;
+        const chartProto = ChartClass.prototype, pointProto = PointClass.prototype, seriesProto = SeriesClass.prototype;
+        if (!chartProto.highlightAdjacentPoint) {
             chartProto.highlightAdjacentPoint = chartHighlightAdjacentPoint;
             chartProto.highlightAdjacentPointVertical = (chartHighlightAdjacentPointVertical);
             chartProto.highlightAdjacentSeries = chartHighlightAdjacentSeries;

package/es-modules/Accessibility/FocusBorder.js

@@ -10,10 +10,8 @@
  *
  * */
 'use strict';
-import H from '../Core/Globals.js';
-const { composed } = H;
 import U from '../Core/Utilities.js';
-const { addEvent, pick, pushUnique } = U;
+const { addEvent, pick } = U;
 /* *
  *
  *  Composition
@@ -44,10 +42,12 @@ var FocusBorderComposition;
      * @private
      */
     function compose(ChartClass, SVGElementClass) {
-        if (pushUnique(composed, compose)) {
-            const chartProto = ChartClass.prototype, svgElementProto = SVGElementClass.prototype;
+        const chartProto = ChartClass.prototype, svgElementProto = SVGElementClass.prototype;
+        if (!chartProto.renderFocusBorder) {
             chartProto.renderFocusBorder = chartRenderFocusBorder;
             chartProto.setFocusToElement = chartSetFocusToElement;
+        }
+        if (!svgElementProto.addFocusBorder) {
             svgElementProto.addFocusBorder = svgElementAddFocusBorder;
             svgElementProto.removeFocusBorder = svgElementRemoveFocusBorder;
         }

package/es-modules/Accessibility/HighContrastMode.js

@@ -62,23 +62,32 @@ function setHighContrastTheme(chart) {
     // Apply theme to chart
     const theme = (chart.options.accessibility.highContrastTheme);
     chart.update(theme, false);
+    const hasCustomColors = theme.colors?.length > 1;
     // Force series colors (plotOptions is not enough)
     chart.series.forEach(function (s) {
         const plotOpts = theme.plotOptions[s.type] || {};
-        s.update({
+        const fillColor = hasCustomColors && s.colorIndex !== void 0 ?
+            theme.colors[s.colorIndex] :
+            plotOpts.color || 'window';
+        const seriesOptions = {
             color: plotOpts.color || 'windowText',
-            colors: [plotOpts.color || 'windowText'],
-            borderColor: plotOpts.borderColor || 'window'
-        });
-        // Force point colors if existing
-        s.points.forEach(function (p) {
-            if (p.options && p.options.color) {
-                p.update({
-                    color: plotOpts.color || 'windowText',
-                    borderColor: plotOpts.borderColor || 'window'
-                }, false);
-            }
-        });
+            colors: hasCustomColors ?
+                theme.colors : [plotOpts.color || 'windowText'],
+            borderColor: plotOpts.borderColor || 'window',
+            fillColor
+        };
+        s.update(seriesOptions, false);
+        if (s.points) {
+            // Force point colors if existing
+            s.points.forEach(function (p) {
+                if (p.options && p.options.color) {
+                    p.update({
+                        color: plotOpts.color || 'windowText',
+                        borderColor: plotOpts.borderColor || 'window'
+                    }, false);
+                }
+            });
+        }
     });
     // The redraw for each series and after is required for 3D pie
     // (workaround)

package/es-modules/Accessibility/HighContrastTheme.js

@@ -10,11 +10,6 @@
  *
  * */
 'use strict';
-/* *
- *
- *  Theme
- *
- * */
 const theme = {
     chart: {
         backgroundColor: 'window'
@@ -32,7 +27,8 @@ const theme = {
     colorAxis: {
         minColor: 'windowText',
         maxColor: 'windowText',
-        stops: []
+        stops: [],
+        dataClasses: []
     },
     colors: ['windowText'],
     xAxis: {

package/es-modules/Accessibility/KeyboardNavigation.js

@@ -11,10 +11,10 @@
  * */
 'use strict';
 import H from '../Core/Globals.js';
-const { composed, doc, win } = H;
+const { doc, win } = H;
 import MenuComponent from './Components/MenuComponent.js';
 import U from '../Core/Utilities.js';
-const { addEvent, fireEvent, pushUnique } = U;
+const { addEvent, defined, fireEvent } = U;
 import EventProvider from './Utils/EventProvider.js';
 import HTMLUtilities from './Utils/HTMLUtilities.js';
 const { getElement, simulatedEventTarget } = HTMLUtilities;
@@ -298,8 +298,16 @@ class KeyboardNavigation {
      * @private
      */
     removeExitAnchor() {
-        if (this.exitAnchor && this.exitAnchor.parentNode) {
-            this.exitAnchor.parentNode.removeChild(this.exitAnchor);
+        // Remove event from element and from eventRemovers array to prevent
+        // memory leak (#20329).
+        if (this.exitAnchor) {
+            if (defined(this.exitAnchor.focusEventRemover)) {
+                this.eventProvider.removeEvent(this.exitAnchor.focusEventRemover);
+                delete this.exitAnchor.focusEventRemover;
+            }
+            if (this.exitAnchor.parentNode) {
+                this.exitAnchor.parentNode.removeChild(this.exitAnchor);
+            }
             delete this.exitAnchor;
         }
     }
@@ -309,7 +317,7 @@ class KeyboardNavigation {
      */
     addExitAnchorEventsToEl(element) {
         const chart = this.chart, keyboardNavigation = this;
-        this.eventProvider.addEvent(element, 'focus', function (ev) {
+        element.focusEventRemover = this.eventProvider.addEvent(element, 'focus', function (ev) {
             const e = ev || win.event, focusComesFromChart = (e.relatedTarget &&
                 chart.container.contains(e.relatedTarget)), comingInBackwards = !(focusComesFromChart || keyboardNavigation.exiting);
             if (chart.focusElement) {
@@ -331,7 +339,8 @@ class KeyboardNavigation {
                     // Validate the module
                     if (curModule &&
                         curModule.validate && !curModule.validate()) {
-                        // Invalid. Try moving backwards to find next valid.
+                        // Invalid.
+                        // Try moving backwards to find next valid.
                         keyboardNavigation.move(-1);
                     }
                     else if (curModule) {
@@ -393,8 +402,8 @@ class KeyboardNavigation {
      */
     function compose(ChartClass) {
         MenuComponent.compose(ChartClass);
-        if (pushUnique(composed, compose)) {
-            const chartProto = ChartClass.prototype;
+        const chartProto = ChartClass.prototype;
+        if (!chartProto.dismissPopupContent) {
             chartProto.dismissPopupContent = chartDismissPopupContent;
             addEvent(doc, 'keydown', documentOnKeydown);
         }