highcharts 12.2.0 → 12.3.0

package/bower.json

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

package/css/annotations/popup.css

@@ -1,15 +1,3 @@
-/* Colors, using same names and values as in highcharts.css */
-:root {
-    --highcharts-background-color: #ffffff;
-    --highcharts-neutral-color-100: #000000;
-    --highcharts-neutral-color-80: #333333;
-    --highcharts-neutral-color-60: #666666;
-    --highcharts-neutral-color-20: #cccccc;
-    --highcharts-neutral-color-10: #e6e6e6;
-    --highcharts-neutral-color-3: #f7f7f7;
-    --highcharts-highlight-color-80: #335cad;
-}
-
 .highcharts-popup.highcharts-annotation-toolbar {
     right: 10%;
     left: auto;
@@ -23,7 +11,7 @@
 .highcharts-annotation-toolbar button {
     margin-top: 0;
     cursor: pointer;
-    background-color: var(--highcharts-neutral-color-3);
+    background-color: var(--highcharts-neutral-color-3, #f7f7f7);
 }
 
 .highcharts-popup.highcharts-annotation-toolbar > p {
@@ -45,8 +33,9 @@
         "Segoe UI Emoji",
         "Segoe UI Symbol",
         sans-serif;
-    background-color: var(--highcharts-background-color);
-    color: var(--highcharts-neutral-color-60);
+    background-color: var(--highcharts-background-color, #ffffff);
+    border-radius: 4px;
+    color: var(--highcharts-neutral-color-60, #666666);
     display: none;
     font-size: 0.9em;
     max-height: 90%;
@@ -59,9 +48,9 @@
     max-width: 600px;
     position: absolute;
     z-index: 100;
-    -webkit-box-shadow: 0 0 8px 0 rgba(61, 61, 61, 0.3);
-    -moz-box-shadow: 0 0 8px 0 rgba(61, 61, 61, 0.3);
-    box-shadow: 0 0 8px 0 rgba(61, 61, 61, 0.3);
+    -webkit-box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.5);
+    -moz-box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.5);
+    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.5);
 }
 
 .highcharts-popup div,
@@ -79,8 +68,14 @@
     box-sizing: border-box;
 }
 
+.highcharts-popup input,
+.highcharts-popup select {
+    background: var(--highcharts-neutral-color-3, #f7f7f7);
+    color: var(--highcharts-neutral-color-100, #000000);
+}
+
 .highcharts-popup input {
-    border: 1px solid var(--highcharts-neutral-color-10);
+    border: 1px solid var(--highcharts-neutral-color-10, #e6e6e6);
     border-radius: 0.3rem;
     padding: 5px;
     width: 100%;
@@ -109,7 +104,7 @@
 .highcharts-popup-lhs-col {
     clear: both;
     width: 30%;
-    border-right: 1px solid var(--highcharts-neutral-color-10);
+    border-right: 1px solid var(--highcharts-neutral-color-10, #e6e6e6);
 }
 
 .highcharts-popup-bottom-row {
@@ -117,7 +112,13 @@
     padding: 0 20px;
     padding-bottom: 12px;
     width: 100%;
-    border-top: 1px solid var(--highcharts-neutral-color-10);
+    border-top: 1px solid var(--highcharts-neutral-color-10, #e6e6e6);
+}
+
+.highcharts-popup .highcharts-popup-bottom-row > button {
+    margin-top: 10px;
+    padding: 5px 10px;
+    border-radius: 4px;
 }
 
 .highcharts-popup-rhs-col {
@@ -139,7 +140,7 @@
 .highcharts-bindings-wrapper ul.highcharts-indicator-list,
 .highcharts-indicator-list {
     float: left;
-    color: var(--highcharts-neutral-color-60);
+    color: var(--highcharts-neutral-color-60, #666666);
     height: calc(100% - 150px);
     width: 100%;
     overflow-x: hidden;
@@ -155,7 +156,8 @@ button.highcharts-indicator-list-item {
     overflow: hidden;
     word-break: break-all;
     box-sizing: border-box;
-    background-color: var(--highcharts-background-color);
+    color: var(--highcharts-neutral-color-100, #000000);
+    background-color: var(--highcharts-background-color, #ffffff);
     text-align: left;
 }
 
@@ -167,7 +169,8 @@ button.highcharts-indicator-list-item {
 
 .highcharts-popup > button.highcharts-tab-item {
     margin: 0;
-    background-color: var(--highcharts-neutral-color-3);
+    color: var(--highcharts-neutral-color-100, #000000);
+    background-color: var(--highcharts-neutral-color-3, #f7f7f7);
     cursor: pointer;
     display: block;
     float: left;
@@ -177,7 +180,7 @@ button.highcharts-indicator-list-item {
 }
 
 button.highcharts-tab-item.highcharts-tab-item-active {
-    background-color: var(--highcharts-neutral-color-10);
+    background-color: var(--highcharts-neutral-color-10, #e6e6e6);
 }
 
 .highcharts-tab-item-content {
@@ -186,7 +189,7 @@ button.highcharts-tab-item.highcharts-tab-item-active {
     height: 100%;
     overflow: hidden;
     width: 100%;
-    border-top: 1px solid var(--highcharts-neutral-color-10);
+    border-top: 1px solid var(--highcharts-neutral-color-10, #e6e6e6);
 }
 
 .highcharts-tab-item-show {
@@ -195,9 +198,7 @@ button.highcharts-tab-item.highcharts-tab-item-active {
 
 .highcharts-popup > .highcharts-popup-close {
     margin: 0;
-    background-repeat: no-repeat;
-    background-position: 50% 50%;
-    background-color: var(--highcharts-background-color);
+    background-color: var(--highcharts-background-color, #ffffff);
     width: 40px;
     height: 40px;
     cursor: pointer;
@@ -205,18 +206,60 @@ button.highcharts-tab-item.highcharts-tab-item-active {
     padding: 10px;
     top: 0%;
     right: 0%;
-    color: var(--highcharts-neutral-color-80);
+    color: var(--highcharts-neutral-color-80, #333333);
+}
+
+.highcharts-popup .highcharts-icon {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: block;
+    width: 100%;
+    height: 100%;
+    background-repeat: no-repeat;
+    background-position: 50% 50%;
+}
+
+.highcharts-dark .highcharts-popup {
+    color-scheme: dark;
+    border: 1px solid var(--highcharts-neutral-color-10, #e6e6e6);
+}
+
+.highcharts-dark .highcharts-popup .highcharts-icon {
+    filter: invert(1);
+}
+
+@media (prefers-color-scheme: dark) {
+    .highcharts-popup {
+        color-scheme: dark;
+        border: 1px solid var(--highcharts-neutral-color-10, #e6e6e6);
+    }
+
+    .highcharts-popup .highcharts-icon {
+        filter: invert(1);
+    }
+
+    .highcharts-light .highcharts-popup {
+        color-scheme: light;
+        border: none;
+    }
+
+    .highcharts-light .highcharts-popup .highcharts-icon {
+        filter: none;
+    }
 }
 
 .highcharts-popup-close:hover,
 .highcharts-popup button:hover,
 .highcharts-popup button.highcharts-annotation-edit-button:hover,
 .highcharts-popup button.highcharts-annotation-remove-button:hover {
-    background-color: var(--highcharts-neutral-color-10);
+    background-color: var(--highcharts-neutral-color-10, #e6e6e6);
 }
 
 div.highcharts-popup-rhs-col > button {
     float: right;
+    padding: 5px 10px;
+    border-radius: 4px;
 }
 
 .highcharts-popup button {
@@ -225,11 +268,11 @@ div.highcharts-popup-rhs-col > button {
 }
 
 button.highcharts-tab-item.highcharts-tab-disabled {
-    color: var(--highcharts-neutral-color-20);
+    color: var(--highcharts-neutral-color-20, #cccccc);
 }
 
 button.highcharts-tab-item.highcharts-tab-disabled:hover {
-    background-color: var(--highcharts-neutral-color-3);
+    background-color: var(--highcharts-neutral-color-3, #f7f7f7);
 }
 
 /* annotation edit small popup */
@@ -241,14 +284,12 @@ button.highcharts-tab-item.highcharts-tab-disabled:hover {
 }
 
 .highcharts-popup button.highcharts-annotation-edit-button {
-    background-repeat: no-repeat;
-    background-position: 50% 50%;
+    position: relative;
     text-indent: -9999px;
 }
 
 .highcharts-popup button.highcharts-annotation-remove-button {
-    background-repeat: no-repeat;
-    background-position: 50% 50%;
+    position: relative;
     text-indent: -9999px;
 }
 
@@ -262,7 +303,7 @@ button.highcharts-tab-item.highcharts-tab-disabled:hover {
 }
 
 .highcharts-popup .highcharts-popup-main-title {
-    border-bottom: 1px solid var(--highcharts-neutral-color-10);
+    border-bottom: 1px solid var(--highcharts-neutral-color-10, #e6e6e6);
     margin: 0;
     padding: 8px 0 6px 20px;
 }
@@ -283,7 +324,7 @@ button.highcharts-tab-item.highcharts-tab-disabled:hover {
 .highcharts-input-search-indicators-label {
     text-align: center;
     font-weight: bold;
-    color: var(--highcharts-neutral-color-100);
+    color: var(--highcharts-neutral-color-100, #000000);
     margin-top: 0.5rem;
 }
 
@@ -291,20 +332,20 @@ input.highcharts-input-search-indicators {
     width: 80%;
     margin: 0 auto;
     float: none;
-    border-color: #949494;
+    border-color: var(--highcharts-neutral-color-40, #999999);
 }
 
 .highcharts-popup a.clear-filter-button {
     margin: 0 auto;
     display: none;
-    color: var(--highcharts-highlight-color-80);
-    background-color: var(--highcharts-background-color);
-    border: 1px solid var(--highcharts-highlight-color-80);
+    color: var(--highcharts-highlight-color-80, #335cad);
+    background-color: var(--highcharts-background-color, #ffffff);
+    border: 1px solid var(--highcharts-highlight-color-80, #335cad);
     margin-top: 10px;
 }
 
 .highcharts-popup a.clear-filter-button:hover {
-    color: var(--highcharts-background-color);
-    background-color: var(--highcharts-highlight-color-80);
+    color: var(--highcharts-background-color, #ffffff);
+    background-color: var(--highcharts-highlight-color-80, #335cad);
     cursor: pointer;
 }

package/css/highcharts.css

@@ -90,51 +90,59 @@
 
 @media (prefers-color-scheme: dark) {
     :root {
+        /* Colors for data series and points */
+        --highcharts-color-1: #00e272;
+        --highcharts-color-2: #efdf00;
+
         /* UI colors */
-        --highcharts-background-color: rgb(48, 48, 48);
+        --highcharts-background-color: #141414;
 
         /*
             Neutral color variations
             https://www.highcharts.com/samples/highcharts/css/palette-helper
         */
-        --highcharts-neutral-color-100: rgb(255, 255, 255);
-        --highcharts-neutral-color-80: rgb(214, 214, 214);
-        --highcharts-neutral-color-60: rgb(173, 173, 173);
-        --highcharts-neutral-color-40: rgb(133, 133, 133);
-        --highcharts-neutral-color-20: rgb(92, 92, 92);
-        --highcharts-neutral-color-10: rgb(71, 71, 71);
-        --highcharts-neutral-color-5: rgb(61, 61, 61);
-        --highcharts-neutral-color-3: rgb(57, 57, 57);
+        --highcharts-neutral-color-100: #ffffff;
+        --highcharts-neutral-color-80: #d0d0d0;
+        --highcharts-neutral-color-60: #a1a1a1;
+        --highcharts-neutral-color-40: #727272;
+        --highcharts-neutral-color-20: #434343;
+        --highcharts-neutral-color-10: #2c2c2c;
+        --highcharts-neutral-color-5: #202020;
+        --highcharts-neutral-color-3: #1b1b1b;
 
         /* Highlight color variations */
-        --highcharts-highlight-color-100: rgb(122, 167, 255);
-        --highcharts-highlight-color-80: rgb(108, 144, 214);
-        --highcharts-highlight-color-60: rgb(94, 121, 173);
-        --highcharts-highlight-color-20: rgb(65, 74, 92);
-        --highcharts-highlight-color-10: rgb(58, 63, 71);
+        --highcharts-highlight-color-100: #2caffe;
+        --highcharts-highlight-color-80: #2790cf;
+        --highcharts-highlight-color-60: #2271a0;
+        --highcharts-highlight-color-20: #193343;
+        --highcharts-highlight-color-10: #16242b;
     }
 }
 
 .highcharts-dark {
+    /* Colors for data series and points */
+    --highcharts-color-1: #00e272;
+    --highcharts-color-2: #efdf00;
+
     /* UI colors */
-    --highcharts-background-color: rgb(48, 48, 48);
+    --highcharts-background-color: #141414;
 
     /* Neutral color variations */
-    --highcharts-neutral-color-100: rgb(255, 255, 255);
-    --highcharts-neutral-color-80: rgb(214, 214, 214);
-    --highcharts-neutral-color-60: rgb(173, 173, 173);
-    --highcharts-neutral-color-40: rgb(133, 133, 133);
-    --highcharts-neutral-color-20: rgb(92, 92, 92);
-    --highcharts-neutral-color-10: rgb(71, 71, 71);
-    --highcharts-neutral-color-5: rgb(61, 61, 61);
-    --highcharts-neutral-color-3: rgb(57, 57, 57);
+    --highcharts-neutral-color-100: #ffffff;
+    --highcharts-neutral-color-80: #d0d0d0;
+    --highcharts-neutral-color-60: #a1a1a1;
+    --highcharts-neutral-color-40: #727272;
+    --highcharts-neutral-color-20: #434343;
+    --highcharts-neutral-color-10: #2c2c2c;
+    --highcharts-neutral-color-5: #202020;
+    --highcharts-neutral-color-3: #1b1b1b;
 
     /* Highlight color variations */
-    --highcharts-highlight-color-100: rgb(122, 167, 255);
-    --highcharts-highlight-color-80: rgb(108, 144, 214);
-    --highcharts-highlight-color-60: rgb(94, 121, 173);
-    --highcharts-highlight-color-20: rgb(65, 74, 92);
-    --highcharts-highlight-color-10: rgb(58, 63, 71);
+    --highcharts-highlight-color-100: #2caffe;
+    --highcharts-highlight-color-80: #2790cf;
+    --highcharts-highlight-color-60: #2271a0;
+    --highcharts-highlight-color-20: #193343;
+    --highcharts-highlight-color-10: #16242b;
 }
 
 .highcharts-container {
@@ -519,11 +527,13 @@ text.highcharts-data-label {
     stroke: var(--highcharts-background-color);
 }
 
-.highcharts-column-series .highcharts-point {
+.highcharts-column-series .highcharts-point,
+.highcharts-bar-series .highcharts-point {
     transition: fill-opacity 250ms;
 }
 
-.highcharts-column-series .highcharts-point-hover {
+.highcharts-column-series .highcharts-point-hover,
+.highcharts-bar-series .highcharts-point-hover {
     fill-opacity: 0.75;
     transition: fill-opacity 50ms;
 }

package/css/stocktools/gui.css

@@ -42,7 +42,7 @@
 }
 
 .highcharts-button {
-    fill: var(--highcharts-neutral-color-3);
+    fill: var(--highcharts-neutral-color-3, #f7f7f7);
 }
 
 .highcharts-stocktools-popup {
@@ -66,7 +66,7 @@
     z-index: 10;
     left: 0;
     top: 0;
-    background: #ffffff;
+    background: var(--highcharts-background-color, #ffffff);
     width: 40px;
 }
 
@@ -190,7 +190,8 @@
     height: 40px;
     cursor: pointer;
     position: relative;
-    background-color: var(--highcharts-neutral-color-3);
+    background-color: var(--highcharts-neutral-color-3, #f7f7f7);
+    transition: background-color 250ms;
 }
 
 .highcharts-bindings-wrapper .highcharts-stocktools-toolbar li.highcharts-disabled-btn {
@@ -202,7 +203,7 @@
 }
 
 .highcharts-bindings-wrapper .highcharts-stocktools-toolbar li.highcharts-disabled-btn.highcharts-active {
-    background: var(--highcharts-neutral-color-3);
+    background: var(--highcharts-neutral-color-3, #f7f7f7);
 }
 
 .highcharts-bindings-wrapper .highcharts-stocktools-toolbar li.highcharts-disabled-btn .highcharts-menu-item-btn:hover {
@@ -225,6 +226,23 @@
     background-size: 32px 32px;
 }
 
+.highcharts-dark .highcharts-bindings-wrapper li > button.highcharts-menu-item-btn,
+.highcharts-dark .highcharts-bindings-wrapper li > button.highcharts-submenu-item-arrow {
+    filter: invert(1);
+}
+
+@media (prefers-color-scheme: dark) {
+    .highcharts-bindings-wrapper li > button.highcharts-menu-item-btn,
+    .highcharts-bindings-wrapper li > button.highcharts-submenu-item-arrow {
+        filter: invert(1);
+    }
+
+    .highcharts-light .highcharts-bindings-wrapper li > button.highcharts-menu-item-btn,
+    .highcharts-light .highcharts-bindings-wrapper li > button.highcharts-submenu-item-arrow {
+        filter: none;
+    }
+}
+
 .highcharts-submenu-wrapper li > button.highcharts-menu-item-btn {
     width: 40px;
 }
@@ -256,12 +274,11 @@
     width: 100%;
 }
 
-.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-bindings-wrapper li:hover,
+.highcharts-bindings-wrapper .highcharts-arrow-wrapper > div:hover,
 .highcharts-toggle-toolbar:hover {
-    background-color: var(--highcharts-neutral-color-10);
+    background-color: var(--highcharts-neutral-color-10, #e6e6e6);
     transition: background-color 100ms;
 }
 
@@ -270,7 +287,7 @@
     cursor: pointer;
     width: 10px;
     height: 10px;
-    background-color: var(--highcharts-neutral-color-3);
+    background-color: var(--highcharts-neutral-color-3, #f7f7f7);
     background-size: cover;
 }
 
@@ -280,7 +297,7 @@
 
 .highcharts-bindings-wrapper li:hover,
 .highcharts-submenu-item-arrow:hover {
-    background-color: var(--highcharts-button-hover-color);
+    background-color: var(--highcharts-neutral-color-20, #cccccc);
 }
 
 .highcharts-bindings-wrapper .highcharts-arrow-down,
@@ -292,5 +309,5 @@
 
 li.highcharts-disabled-btn:hover,
 .highcharts-disabled-btn .highcharts-submenu-item-arrow:hover {
-    background-color: var(--highcharts-neutral-color-3);
+    background-color: var(--highcharts-neutral-color-3, #f7f7f7);
 }

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

@@ -138,7 +138,7 @@ class InfoRegionsComponent extends AccessibilityComponent {
         const chart = this.chart;
         const component = this;
         this.initRegionsDefinitions();
-        this.addEvent(chart, 'aftergetTableAST', function (e) {
+        this.addEvent(chart, 'afterGetTableAST', function (e) {
             component.onDataTableCreated(e);
         });
         this.addEvent(chart, 'afterViewData', function (e) {
@@ -333,7 +333,7 @@ class InfoRegionsComponent extends AccessibilityComponent {
             yAxisDescription: axesDesc.yAxis,
             playAsSoundButton: shouldHaveSonifyBtn ?
                 this.getSonifyButtonText(sonifyButtonId) : '',
-            viewTableButton: chart.getCSV ?
+            viewTableButton: chart.exporting?.getCSV ?
                 this.getDataTableButtonText(dataTableButtonId) : '',
             annotationsTitle: annotationsList ? annotationsTitleStr : '',
             annotationsList: annotationsList
@@ -495,7 +495,7 @@ class InfoRegionsComponent extends AccessibilityComponent {
             el.onclick = chart.options.accessibility
                 .screenReaderSection.onViewDataTableClick ||
                 function () {
-                    chart.viewData();
+                    chart.exporting?.viewData();
                 };
         }
     }

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

@@ -281,6 +281,9 @@ class LegendComponent extends AccessibilityComponent {
      */
     proxyLegendItem(item) {
         const legendItem = item.legendItem || {};
+        const legendItemLabel = item.legendItem?.label;
+        const legendLabelEl = legendItemLabel?.element;
+        const ellipsis = Boolean(legendItem.label?.styles?.textOverflow === 'ellipsis');
         if (!legendItem.label || !legendItem.group) {
             return;
         }
@@ -292,8 +295,14 @@ class LegendComponent extends AccessibilityComponent {
         const attribs = {
             tabindex: -1,
             'aria-pressed': item.visible,
-            'aria-label': itemLabel
+            'aria-label': itemLabel,
+            title: ''
         };
+        // Check if label contains an ellipsis character (\u2026) #22397
+        if (ellipsis &&
+            (legendLabelEl.textContent || '').indexOf('\u2026') !== -1) {
+            attribs.title = legendItemLabel?.textStr;
+        }
         // Considers useHTML
         const proxyPositioningElement = legendItem.group.div ?
             legendItem.label :

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

@@ -28,7 +28,7 @@ const { getFakeMouseEvent } = HTMLUtilities;
  * @private
  */
 function getExportMenuButtonElement(chart) {
-    return chart.exportSVGElements && chart.exportSVGElements[0];
+    return chart.exporting?.svgElements?.[0];
 }
 /**
  * @private
@@ -78,7 +78,7 @@ class MenuComponent extends AccessibilityComponent {
      * @private
      */
     onMenuHidden() {
-        const menu = this.chart.exportContextMenu;
+        const menu = this.chart.exporting?.contextMenuEl;
         if (menu) {
             menu.setAttribute('aria-hidden', 'true');
         }
@@ -88,7 +88,7 @@ class MenuComponent extends AccessibilityComponent {
      * @private
      */
     onMenuShown() {
-        const chart = this.chart, menu = chart.exportContextMenu;
+        const chart = this.chart, menu = chart.exporting?.contextMenuEl;
         if (menu) {
             this.addAccessibleContextMenuAttribs();
             unhideChartElementFromAT(chart, menu);
@@ -114,7 +114,7 @@ class MenuComponent extends AccessibilityComponent {
         this.proxyMenuButton();
         if (this.exportButtonProxy &&
             focusEl &&
-            focusEl === chart.exportingGroup) {
+            focusEl === chart.exporting?.group) {
             if (focusEl.focusBorder) {
                 chart.setFocusToElement(focusEl, this.exportButtonProxy.innerElement);
             }
@@ -154,7 +154,7 @@ class MenuComponent extends AccessibilityComponent {
      * @private
      */
     addAccessibleContextMenuAttribs() {
-        const chart = this.chart, exportList = chart.exportDivElements;
+        const chart = this.chart, exportList = chart.exporting?.divElements;
         if (exportList && exportList.length) {
             // Set tabindex on the menu items to allow focusing by script
             // Set role to give screen readers a chance to pick up the contents
@@ -220,13 +220,12 @@ class MenuComponent extends AccessibilityComponent {
                         ?.buttons
                         ?.contextButton.enabled !== false &&
                     chart.options.exporting.enabled !== false &&
-                    chart.options.exporting.accessibility.enabled !==
-                        false;
+                    (chart.options.exporting.accessibility?.enabled || false) !== false;
             },
             // Focus export menu button
             init: function () {
                 const proxy = component.exportButtonProxy;
-                const svgEl = component.chart.exportingGroup;
+                const svgEl = component.chart.exporting?.group;
                 if (proxy && svgEl) {
                     chart.setFocusToElement(svgEl, proxy.innerElement);
                 }
@@ -272,7 +271,7 @@ class MenuComponent extends AccessibilityComponent {
         const response = keyboardNavigationHandler.response;
         // Try to highlight next item in list. Highlighting e.g.
         // separators will fail.
-        for (let i = (chart.highlightedExportItemIx || 0) + 1; i < chart.exportDivElements.length; ++i) {
+        for (let i = (chart.highlightedExportItemIx || 0) + 1; i < (chart.exporting?.divElements?.length || 0); ++i) {
             if (chart.highlightExportItem(i)) {
                 return response.success;
             }
@@ -291,13 +290,14 @@ class MenuComponent extends AccessibilityComponent {
      */
     onKbdClick(keyboardNavigationHandler) {
         const chart = this.chart;
-        const curHighlightedItem = chart.exportDivElements[chart.highlightedExportItemIx];
-        const exportButtonElement = getExportMenuButtonElement(chart).element;
-        if (chart.openMenu) {
-            this.fakeClickEvent(curHighlightedItem);
+        const curHighlightedItem = chart.highlightedExportItemIx !== void 0 &&
+            chart.exporting?.divElements?.[chart.highlightedExportItemIx];
+        const exportButtonElement = getExportMenuButtonElement(chart)?.element;
+        if (chart.exporting?.openMenu) {
+            curHighlightedItem && this.fakeClickEvent(curHighlightedItem);
         }
         else {
-            this.fakeClickEvent(exportButtonElement);
+            exportButtonElement && this.fakeClickEvent(exportButtonElement);
             chart.highlightExportItem(0);
         }
         return keyboardNavigationHandler.response.success;
@@ -352,8 +352,10 @@ class MenuComponent extends AccessibilityComponent {
      * @function Highcharts.Chart#hideExportMenu
      */
     function chartHideExportMenu() {
-        const chart = this, exportList = chart.exportDivElements;
-        if (exportList && chart.exportContextMenu && chart.openMenu) {
+        const chart = this, exportList = chart.exporting?.divElements;
+        if (exportList &&
+            chart.exporting?.contextMenuEl &&
+            chart.exporting?.openMenu) {
             // Reset hover states etc.
             exportList.forEach((el) => {
                 if (el &&
@@ -364,7 +366,7 @@ class MenuComponent extends AccessibilityComponent {
             });
             chart.highlightedExportItemIx = 0;
             // Hide the menu div
-            chart.exportContextMenu.hideMenu();
+            chart.exporting.contextMenuEl.hideMenu();
             // Make sure the chart has focus and can capture keyboard events
             chart.container.focus();
         }
@@ -376,9 +378,8 @@ class MenuComponent extends AccessibilityComponent {
      * @function Highcharts.Chart#highlightExportItem
      */
     function chartHighlightExportItem(ix) {
-        const listItem = this.exportDivElements && this.exportDivElements[ix];
-        const curHighlighted = this.exportDivElements &&
-            this.exportDivElements[this.highlightedExportItemIx];
+        const listItem = this.exporting?.divElements?.[ix], curHighlighted = this.highlightedExportItemIx !== void 0 &&
+            this.exporting?.divElements?.[this.highlightedExportItemIx];
         if (listItem &&
             listItem.tagName === 'LI' &&
             !(listItem.children && listItem.children.length)) {
@@ -408,8 +409,8 @@ class MenuComponent extends AccessibilityComponent {
      */
     function chartHighlightLastExportItem() {
         const chart = this;
-        if (chart.exportDivElements) {
-            let i = chart.exportDivElements.length;
+        if (chart.exporting?.divElements) {
+            let i = chart.exporting?.divElements.length;
             while (i--) {
                 if (chart.highlightExportItem(i)) {
                     return true;