highcharts 9.3.3 → 10.2.0

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

@@ -14,36 +14,57 @@ var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
     return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
 import AccessibilityComponent from '../AccessibilityComponent.js';
-import ChartUtilities from '../Utils/ChartUtilities.js';
-var unhideChartElementFromAT = ChartUtilities.unhideChartElementFromAT;
-import H from '../../Core/Globals.js';
-var noop = H.noop;
+import CU from '../Utils/ChartUtilities.js';
+var unhideChartElementFromAT = CU.unhideChartElementFromAT;
 import KeyboardNavigationHandler from '../KeyboardNavigationHandler.js';
 import U from '../../Core/Utilities.js';
-var attr = U.attr, extend = U.extend, pick = U.pick;
+var attr = U.attr, pick = U.pick;
 /* *
  *
  *  Functions
  *
  * */
-/* eslint-disable valid-jsdoc */
+/**
+ * Pan along axis in a direction (1 or -1), optionally with a defined
+ * granularity (number of steps it takes to walk across current view)
+ * @private
+ */
+function axisPanStep(axis, direction, granularity) {
+    var gran = granularity || 3;
+    var extremes = axis.getExtremes();
+    var step = (extremes.max - extremes.min) / gran * direction;
+    var newMax = extremes.max + step;
+    var newMin = extremes.min + step;
+    var size = newMax - newMin;
+    if (direction < 0 && newMin < extremes.dataMin) {
+        newMin = extremes.dataMin;
+        newMax = newMin + size;
+    }
+    else if (direction > 0 && newMax > extremes.dataMax) {
+        newMax = extremes.dataMax;
+        newMin = newMax - size;
+    }
+    axis.setExtremes(newMin, newMax);
+}
 /**
  * @private
  */
 function chartHasMapZoom(chart) {
-    return !!(chart.mapZoom &&
-        chart.mapNavButtons &&
-        chart.mapNavButtons.length);
+    return !!((chart.mapZoom) &&
+        chart.mapNavigation &&
+        chart.mapNavigation.navButtons.length);
 }
 /* *
  *
@@ -81,7 +102,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 +115,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 +152,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)
             }));
         }
     };
@@ -198,7 +222,7 @@ var ZoomComponent = /** @class */ (function (_super) {
         var keys = this.keyCodes, panAxis = (keyCode === keys.up || keyCode === keys.down) ?
             'yAxis' : 'xAxis', stepDirection = (keyCode === keys.left || keyCode === keys.up) ?
             -1 : 1;
-        this.chart[panAxis][0].panStep(stepDirection);
+        axisPanStep(this.chart[panAxis][0], stepDirection);
         return keyboardNavigationHandler.response.success;
     };
     /**
@@ -214,14 +238,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 +265,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;
@@ -306,67 +330,6 @@ var ZoomComponent = /** @class */ (function (_super) {
     };
     return ZoomComponent;
 }(AccessibilityComponent));
-/* *
- *
- *  Class Namespace
- *
- * */
-(function (ZoomComponent) {
-    /* *
-     *
-     *  Declarations
-     *
-     * */
-    /* *
-     *
-     *  Constants
-     *
-     * */
-    ZoomComponent.composedClasses = [];
-    /* *
-     *
-     *  Functions
-     *
-     * */
-    /**
-     * @private
-     */
-    function compose(AxisClass) {
-        if (ZoomComponent.composedClasses.indexOf(AxisClass) === -1) {
-            ZoomComponent.composedClasses.push(AxisClass);
-            var axisProto = AxisClass.prototype;
-            axisProto.panStep = axisPanStep;
-        }
-    }
-    ZoomComponent.compose = compose;
-    /**
-     * Pan along axis in a direction (1 or -1), optionally with a defined
-     * granularity (number of steps it takes to walk across current view)
-     *
-     * @private
-     * @function Highcharts.Axis#panStep
-     *
-     * @param {number} direction
-     * @param {number} [granularity]
-     */
-    function axisPanStep(direction, granularity) {
-        var gran = granularity || 3;
-        var extremes = this.getExtremes();
-        var step = (extremes.max - extremes.min) / gran * direction;
-        var newMax = extremes.max + step;
-        var newMin = extremes.min + step;
-        var size = newMax - newMin;
-        if (direction < 0 && newMin < extremes.dataMin) {
-            newMin = extremes.dataMin;
-            newMax = newMin + size;
-        }
-        else if (direction > 0 && newMax > extremes.dataMax) {
-            newMax = extremes.dataMax;
-            newMin = newMax - size;
-        }
-        this.setExtremes(newMin, newMax);
-    }
-})(ZoomComponent || (ZoomComponent = {}));
 /* *
  *
  *  Default Export

package/es-modules/Accessibility/FocusBorder.js

@@ -151,12 +151,13 @@ var FocusBorderComposition;
             this.removeFocusBorder();
         }
         // Add the border rect
-        var bb = this.getBBox(), pad = pick(margin, 3);
+        var bb = this.getBBox(), pad = pick(margin, 3), parent = this.parentGroup, scaleX = this.scaleX || parent && parent.scaleX, scaleY = this.scaleY || parent && parent.scaleY, oneDefined = scaleX ? !scaleY : scaleY, scaleBoth = oneDefined ? Math.abs(scaleX || scaleY || 1) :
+            (Math.abs(scaleX || 1) + Math.abs(scaleY || 1)) / 2;
         bb.x += this.translateX ? this.translateX : 0;
         bb.y += this.translateY ? this.translateY : 0;
         var borderPosX = bb.x - pad, borderPosY = bb.y - pad, borderWidth = bb.width + 2 * pad, borderHeight = bb.height + 2 * pad;
-        // For text elements, apply x and y offset, #11397.
         /**
+         * For text elements, apply x and y offset, #11397.
          * @private
          */
         function getTextAnchorCorrection(text) {
@@ -203,16 +204,16 @@ var FocusBorderComposition;
                 }
             }
         }
-        this.focusBorder = this.renderer.rect(borderPosX, borderPosY, borderWidth, borderHeight, parseInt((attribs && attribs.r || 0).toString(), 10))
+        this.focusBorder = this.renderer.rect(borderPosX, borderPosY, borderWidth, borderHeight, parseInt((attribs && attribs.r || 0).toString(), 10) / scaleBoth)
             .addClass('highcharts-focus-border')
             .attr({
             zIndex: 99
         })
-            .add(this.parentGroup);
+            .add(parent);
         if (!this.renderer.styledMode) {
             this.focusBorder.attr({
                 stroke: attribs && attribs.stroke,
-                'stroke-width': attribs && attribs.strokeWidth
+                'stroke-width': (attribs && attribs.strokeWidth || 0) / scaleBoth
             });
         }
         avgElementAddUpdateFocusBorderHooks(this, margin, attribs);

package/es-modules/Accessibility/HighContrastMode.js

@@ -35,15 +35,15 @@ function isHighContrastModeActive() {
         var testDiv = doc.createElement('div');
         var imageSrc = 'data:image/gif;base64,' +
             'R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
-        testDiv.style.backgroundImage = "url(" + imageSrc + ")"; // #13071
+        testDiv.style.backgroundImage = "url(".concat(imageSrc, ")"); // #13071
         doc.body.appendChild(testDiv);
         var bi = (testDiv.currentStyle ||
             win.getComputedStyle(testDiv)).backgroundImage;
         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-".concat(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 && 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) {