highcharts 9.2.2 → 9.3.0

package/es-modules/Accessibility/KeyboardNavigation.js

@@ -15,35 +15,14 @@ import H from '../Core/Globals.js';
 var doc = H.doc, win = H.win;
 import U from '../Core/Utilities.js';
 var addEvent = U.addEvent, fireEvent = U.fireEvent;
+import EventProvider from './Utils/EventProvider.js';
 import HTMLUtilities from './Utils/HTMLUtilities.js';
 var getElement = HTMLUtilities.getElement;
-import EventProvider from './Utils/EventProvider.js';
-/* eslint-disable valid-jsdoc */
-// Add event listener to document to detect ESC key press and dismiss
-// hover/popup content.
-addEvent(doc, 'keydown', function (e) {
-    var keycode = e.which || e.keyCode;
-    var esc = 27;
-    if (keycode === esc && H.charts) {
-        H.charts.forEach(function (chart) {
-            if (chart && chart.dismissPopupContent) {
-                chart.dismissPopupContent();
-            }
-        });
-    }
-});
-/**
- * Dismiss popup content in chart, including export menu and tooltip.
- */
-Chart.prototype.dismissPopupContent = function () {
-    var chart = this;
-    fireEvent(this, 'dismissPopupContent', {}, function () {
-        if (chart.tooltip) {
-            chart.tooltip.hide(0);
-        }
-        chart.hideExportMenu();
-    });
-};
+/* *
+ *
+ *  Class
+ *
+ * */
 /**
  * The KeyboardNavigation class, containing the overall keyboard navigation
  * logic for the chart.
@@ -58,10 +37,33 @@ Chart.prototype.dismissPopupContent = function () {
  *        Map of component names to AccessibilityComponent objects.
  * @name Highcharts.KeyboardNavigation
  */
-function KeyboardNavigation(chart, components) {
-    this.init(chart, components);
-}
-KeyboardNavigation.prototype = {
+var KeyboardNavigation = /** @class */ (function () {
+    /* *
+     *
+     *  Constructor
+     *
+     * */
+    function KeyboardNavigation(chart, components) {
+        /* *
+         *
+         *  Properties
+         *
+         * */
+        this.chart = void 0;
+        this.components = void 0;
+        this.currentModuleIx = NaN;
+        this.eventProvider = void 0;
+        this.exitAnchor = void 0;
+        this.modules = [];
+        this.tabindexContainer = void 0;
+        this.init(chart, components);
+    }
+    /* *
+     *
+     *  Functions
+     *
+     * */
+    /* eslint-disable valid-jsdoc */
     /**
      * Initialize the class
      * @private
@@ -70,14 +72,13 @@ KeyboardNavigation.prototype = {
      * @param {object} components
      *        Map of component names to AccessibilityComponent objects.
      */
-    init: function (chart, components) {
+    KeyboardNavigation.prototype.init = function (chart, components) {
         var _this = this;
         var ep = this.eventProvider = new EventProvider();
         this.chart = chart;
         this.components = components;
         this.modules = [];
         this.currentModuleIx = 0;
-        // Run an update to get all modules
         this.update();
         ep.addEvent(this.tabindexContainer, 'keydown', function (e) { return _this.onKeydown(e); });
         ep.addEvent(this.tabindexContainer, 'focus', function (e) { return _this.onFocus(e); });
@@ -95,17 +96,13 @@ KeyboardNavigation.prototype = {
         ep.addEvent(chart.renderTo, 'mouseout', function () {
             _this.pointerIsOverChart = false;
         });
-        // Init first module
-        if (this.modules.length) {
-            this.modules[0].init(1);
-        }
-    },
+    };
     /**
      * Update the modules for the keyboard navigation.
      * @param {Array<string>} [order]
      *        Array specifying the tab order of the components.
      */
-    update: function (order) {
+    KeyboardNavigation.prototype.update = function (order) {
         var a11yOptions = this.chart.options.accessibility, keyboardOptions = a11yOptions && a11yOptions.keyboardNavigation, components = this.components;
         this.updateContainerTabindex();
         if (keyboardOptions &&
@@ -124,13 +121,13 @@ KeyboardNavigation.prototype = {
             this.currentModuleIx = 0;
             this.removeExitAnchor();
         }
-    },
+    };
     /**
      * Function to run on container focus
      * @private
      * @param {global.FocusEvent} e Browser focus event.
      */
-    onFocus: function (e) {
+    KeyboardNavigation.prototype.onFocus = function (e) {
         var chart = this.chart;
         var focusComesFromChart = (e.relatedTarget &&
             chart.container.contains(e.relatedTarget));
@@ -143,13 +140,13 @@ KeyboardNavigation.prototype = {
             this.modules[0].init(1);
         }
         this.exiting = false;
-    },
+    };
     /**
      * Reset chart navigation state if we click outside the chart and it's
      * not already reset.
      * @private
      */
-    onMouseUp: function () {
+    KeyboardNavigation.prototype.onMouseUp = function () {
         delete this.isClickingChart;
         if (!this.keyboardReset && !this.pointerIsOverChart) {
             var chart = this.chart, curMod = this.modules &&
@@ -163,15 +160,17 @@ KeyboardNavigation.prototype = {
             this.currentModuleIx = 0;
             this.keyboardReset = true;
         }
-    },
+    };
     /**
      * Function to run on keydown
      * @private
      * @param {global.KeyboardEvent} ev Browser keydown event.
      */
-    onKeydown: function (ev) {
-        var e = ev || win.event, preventDefault, curNavModule = this.modules && this.modules.length &&
-            this.modules[this.currentModuleIx];
+    KeyboardNavigation.prototype.onKeydown = function (ev) {
+        var e = ev || win.event, curNavModule = (this.modules &&
+            this.modules.length &&
+            this.modules[this.currentModuleIx]);
+        var preventDefault;
         // Used for resetting nav state when clicking outside chart
         this.keyboardReset = false;
         // Used for sending focus out of the chart by the modules.
@@ -194,21 +193,21 @@ KeyboardNavigation.prototype = {
                 e.stopPropagation();
             }
         }
-    },
+    };
     /**
      * Go to previous module.
      * @private
      */
-    prev: function () {
+    KeyboardNavigation.prototype.prev = function () {
         return this.move(-1);
-    },
+    };
     /**
      * Go to next module.
      * @private
      */
-    next: function () {
+    KeyboardNavigation.prototype.next = function () {
         return this.move(1);
-    },
+    };
     /**
      * Move to prev/next module.
      * @private
@@ -217,7 +216,7 @@ KeyboardNavigation.prototype = {
      * @return {boolean}
      * True if there was a valid module in direction.
      */
-    move: function (direction) {
+    KeyboardNavigation.prototype.move = function (direction) {
         var curModule = this.modules && this.modules[this.currentModuleIx];
         if (curModule && curModule.terminate) {
             curModule.terminate(direction);
@@ -248,7 +247,7 @@ KeyboardNavigation.prototype = {
             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
@@ -256,7 +255,7 @@ KeyboardNavigation.prototype = {
      * order to navigate from the end of the chart.
      * @private
      */
-    updateExitAnchor: function () {
+    KeyboardNavigation.prototype.updateExitAnchor = function () {
         var endMarkerId = 'highcharts-end-of-chart-marker-' + this.chart.index, endMarker = getElement(endMarkerId);
         this.removeExitAnchor();
         if (endMarker) {
@@ -266,12 +265,12 @@ KeyboardNavigation.prototype = {
         else {
             this.createExitAnchor();
         }
-    },
+    };
     /**
      * Chart container should have tabindex if navigation is enabled.
      * @private
      */
-    updateContainerTabindex: function () {
+    KeyboardNavigation.prototype.updateContainerTabindex = function () {
         var a11yOptions = this.chart.options.accessibility, keyboardOptions = a11yOptions && a11yOptions.keyboardNavigation, shouldHaveTabindex = !(keyboardOptions && keyboardOptions.enabled === false), chart = this.chart, container = chart.container;
         var tabindexContainer;
         if (chart.renderTo.hasAttribute('tabindex')) {
@@ -289,45 +288,45 @@ KeyboardNavigation.prototype = {
         else if (!shouldHaveTabindex) {
             chart.container.removeAttribute('tabindex');
         }
-    },
+    };
     /**
      * @private
      */
-    makeElementAnExitAnchor: function (el) {
+    KeyboardNavigation.prototype.makeElementAnExitAnchor = function (el) {
         var chartTabindex = this.tabindexContainer.getAttribute('tabindex') || 0;
         el.setAttribute('class', 'highcharts-exit-anchor');
         el.setAttribute('tabindex', chartTabindex);
         el.setAttribute('aria-hidden', false);
         // Handle focus
         this.addExitAnchorEventsToEl(el);
-    },
+    };
     /**
      * Add new exit anchor to the chart.
      *
      * @private
      */
-    createExitAnchor: function () {
+    KeyboardNavigation.prototype.createExitAnchor = function () {
         var chart = this.chart, exitAnchor = this.exitAnchor = doc.createElement('div');
         chart.renderTo.appendChild(exitAnchor);
         this.makeElementAnExitAnchor(exitAnchor);
-    },
+    };
     /**
      * @private
      */
-    removeExitAnchor: function () {
+    KeyboardNavigation.prototype.removeExitAnchor = function () {
         if (this.exitAnchor && this.exitAnchor.parentNode) {
             this.exitAnchor.parentNode
                 .removeChild(this.exitAnchor);
             delete this.exitAnchor;
         }
-    },
+    };
     /**
      * @private
      */
-    addExitAnchorEventsToEl: function (element) {
+    KeyboardNavigation.prototype.addExitAnchorEventsToEl = function (element) {
         var chart = this.chart, keyboardNavigation = this;
         this.eventProvider.addEvent(element, 'focus', function (ev) {
-            var e = ev || win.event, curModule, focusComesFromChart = (e.relatedTarget &&
+            var e = ev || win.event, focusComesFromChart = (e.relatedTarget &&
                 chart.container.contains(e.relatedTarget)), comingInBackwards = !(focusComesFromChart || keyboardNavigation.exiting);
             if (comingInBackwards) {
                 // Focus the container instead
@@ -341,7 +340,7 @@ KeyboardNavigation.prototype = {
                     keyboardNavigation.modules.length) {
                     keyboardNavigation.currentModuleIx =
                         keyboardNavigation.modules.length - 1;
-                    curModule = keyboardNavigation.modules[keyboardNavigation.currentModuleIx];
+                    var curModule = keyboardNavigation.modules[keyboardNavigation.currentModuleIx];
                     // Validate the module
                     if (curModule &&
                         curModule.validate && !curModule.validate()) {
@@ -359,15 +358,90 @@ KeyboardNavigation.prototype = {
                 keyboardNavigation.exiting = false;
             }
         });
-    },
+    };
     /**
      * Remove all traces of keyboard navigation.
      * @private
      */
-    destroy: function () {
+    KeyboardNavigation.prototype.destroy = function () {
         this.removeExitAnchor();
         this.eventProvider.removeAddedEvents();
         this.chart.container.removeAttribute('tabindex');
+    };
+    return KeyboardNavigation;
+}());
+/* *
+ *
+ *  Class Namespace
+ *
+ * */
+(function (KeyboardNavigation) {
+    /* *
+     *
+     *  Declarations
+     *
+     * */
+    /* *
+     *
+     *  Construction
+     *
+     * */
+    var composedItems = [];
+    /* *
+     *
+     *  Functions
+     *
+     * */
+    /* eslint-disable valid-jsdoc */
+    /**
+     * @private
+     */
+    function compose(ChartClass) {
+        if (composedItems.indexOf(ChartClass) === -1) {
+            composedItems.push(ChartClass);
+            var chartProto = ChartClass.prototype;
+            chartProto.dismissPopupContent = chartDismissPopupContent;
+        }
+        if (composedItems.indexOf(doc) === -1) {
+            composedItems.push(doc);
+            addEvent(doc, 'keydown', documentOnKeydown);
+        }
+        return ChartClass;
+    }
+    KeyboardNavigation.compose = compose;
+    /**
+     * Dismiss popup content in chart, including export menu and tooltip.
+     * @private
+     */
+    function chartDismissPopupContent() {
+        var chart = this;
+        fireEvent(this, 'dismissPopupContent', {}, function () {
+            if (chart.tooltip) {
+                chart.tooltip.hide(0);
+            }
+            chart.hideExportMenu();
+        });
     }
-};
+    /**
+     * Add event listener to document to detect ESC key press and dismiss
+     * hover/popup content.
+     * @private
+     */
+    function documentOnKeydown(e) {
+        var keycode = e.which || e.keyCode;
+        var esc = 27;
+        if (keycode === esc && H.charts) {
+            H.charts.forEach(function (chart) {
+                if (chart && chart.dismissPopupContent) {
+                    chart.dismissPopupContent();
+                }
+            });
+        }
+    }
+})(KeyboardNavigation || (KeyboardNavigation = {}));
+/* *
+ *
+ *  Default Export
+ *
+ * */
 export default KeyboardNavigation;

package/es-modules/Accessibility/KeyboardNavigationHandler.js

@@ -12,32 +12,11 @@
 'use strict';
 import U from '../Core/Utilities.js';
 var find = U.find;
-/**
- * Options for the keyboard navigation handler.
+/* *
  *
- * @interface Highcharts.KeyboardNavigationHandlerOptionsObject
- */ /**
-* An array containing pairs of an array of keycodes, mapped to a handler
-* function. When the keycode is received, the handler is called with the
-* keycode as parameter.
-* @name Highcharts.KeyboardNavigationHandlerOptionsObject#keyCodeMap
-* @type {Array<Array<Array<number>, Function>>}
-*/ /**
-* Function to run on initialization of module.
-* @name Highcharts.KeyboardNavigationHandlerOptionsObject#init
-* @type {Function}
-*/ /**
-* Function to run before moving to next/prev module. Receives moving direction
-* as parameter: +1 for next, -1 for previous.
-* @name Highcharts.KeyboardNavigationHandlerOptionsObject#terminate
-* @type {Function|undefined}
-*/ /**
-* Function to run to validate module. Should return false if module should not
-* run, true otherwise. Receives chart as parameter.
-* @name Highcharts.KeyboardNavigationHandlerOptionsObject#validate
-* @type {Function|undefined}
-*/
-/* eslint-disable no-invalid-this, valid-jsdoc */
+ *  Class
+ *
+ * */
 /**
  * Define a keyboard navigation handler for use with a
  * Highcharts.AccessibilityComponent instance. This functions as an abstraction
@@ -58,22 +37,33 @@ var find = U.find;
  * @param {Highcharts.KeyboardNavigationHandlerOptionsObject} options
  * Options for the keyboard navigation handler.
  */
-function KeyboardNavigationHandler(chart, options) {
-    this.chart = chart;
-    this.keyCodeMap = options.keyCodeMap || [];
-    this.validate = options.validate;
-    this.init = options.init;
-    this.terminate = options.terminate;
-    // Response enum
-    this.response = {
-        success: 1,
-        prev: 2,
-        next: 3,
-        noHandler: 4,
-        fail: 5 // Handler failed
-    };
-}
-KeyboardNavigationHandler.prototype = {
+var KeyboardNavigationHandler = /** @class */ (function () {
+    /* *
+     *
+     *  Constructor
+     *
+     * */
+    function KeyboardNavigationHandler(chart, options) {
+        this.chart = chart;
+        this.keyCodeMap = options.keyCodeMap || [];
+        this.validate = options.validate;
+        this.init = options.init;
+        this.terminate = options.terminate;
+        // Response enum
+        this.response = {
+            success: 1,
+            prev: 2,
+            next: 3,
+            noHandler: 4,
+            fail: 5 // Handler failed
+        };
+    }
+    /* *
+     *
+     *  Functions
+     *
+     * */
+    /* eslint-disable valid-jsdoc */
     /**
      * Find handler function(s) for key code in the keyCodeMap and run it.
      *
@@ -82,7 +72,7 @@ KeyboardNavigationHandler.prototype = {
      * @return {number} Returns a response code indicating whether the run was
      *      a success/fail/unhandled, or if we should move to next/prev module.
      */
-    run: function (e) {
+    KeyboardNavigationHandler.prototype.run = function (e) {
         var keyCode = e.which || e.keyCode;
         var response = this.response.noHandler;
         var handlerCodeSet = find(this.keyCodeMap, function (codeSet) {
@@ -96,6 +86,43 @@ KeyboardNavigationHandler.prototype = {
             response = this.response[e.shiftKey ? 'prev' : 'next'];
         }
         return response;
-    }
-};
+    };
+    return KeyboardNavigationHandler;
+}());
+/* *
+ *
+ *  Default Export
+ *
+ * */
 export default KeyboardNavigationHandler;
+/* *
+ *
+ *  API Declarations
+ *
+ * */
+/**
+ * Options for the keyboard navigation handler.
+ *
+ * @interface Highcharts.KeyboardNavigationHandlerOptionsObject
+ */ /**
+* An array containing pairs of an array of keycodes, mapped to a handler
+* function. When the keycode is received, the handler is called with the
+* keycode as parameter.
+* @name Highcharts.KeyboardNavigationHandlerOptionsObject#keyCodeMap
+* @type {Array<Array<Array<number>, Function>>}
+*/ /**
+* Function to run on initialization of module.
+* @name Highcharts.KeyboardNavigationHandlerOptionsObject#init
+* @type {Function}
+*/ /**
+* Function to run before moving to next/prev module. Receives moving direction
+* as parameter: +1 for next, -1 for previous.
+* @name Highcharts.KeyboardNavigationHandlerOptionsObject#terminate
+* @type {Function|undefined}
+*/ /**
+* Function to run to validate module. Should return false if module should not
+* run, true otherwise. Receives chart as parameter.
+* @name Highcharts.KeyboardNavigationHandlerOptionsObject#validate
+* @type {Function|undefined}
+*/
+(''); // keeps doclets above in JS file

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

@@ -19,6 +19,8 @@
  *  series.exposeElementToA11y -> series.accessibility.exposeAsGroupOnly
  *  series.pointDescriptionFormatter ->
  *      series.accessibility.pointDescriptionFormatter
+ *  series.accessibility.pointDescriptionFormatter ->
+ *      series.accessibility.point.descriptionFormatter
  *  series.skipKeyboardNavigation ->
  *      series.accessibility.keyboardNavigation.enabled
  *  point.description -> point.accessibility.description !!!! WARNING: No longer deprecated and handled, removed for HC8.
@@ -139,10 +141,13 @@ function copyDeprecatedSeriesOptions(chart) {
         description: ['accessibility', 'description'],
         exposeElementToA11y: ['accessibility', 'exposeAsGroupOnly'],
         pointDescriptionFormatter: [
-            'accessibility', 'pointDescriptionFormatter'
+            'accessibility', 'point', 'descriptionFormatter'
         ],
         skipKeyboardNavigation: [
             'accessibility', 'keyboardNavigation', 'enabled'
+        ],
+        'accessibility.pointDescriptionFormatter': [
+            'accessibility', 'point', 'descriptionFormatter'
         ]
     };
     chart.series.forEach(function (series) {
@@ -150,6 +155,11 @@ function copyDeprecatedSeriesOptions(chart) {
         Object.keys(oldToNewSeriesOptions).forEach(function (oldOption) {
             var _a;
             var optionVal = series.options[oldOption];
+            // Special case
+            if (oldOption === 'accessibility.pointDescriptionFormatter') {
+                optionVal = series.options.accessibility &&
+                    series.options.accessibility.pointDescriptionFormatter;
+            }
             if (typeof optionVal !== 'undefined') {
                 // Set the new option
                 traverseSetOption(series.options, oldToNewSeriesOptions[oldOption], 

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

@@ -248,8 +248,7 @@ var langOptions = {
          */
         exporting: {
             chartMenuLabel: 'Chart menu',
-            menuButtonLabel: 'View chart menu',
-            exportRegionLabel: 'Chart menu, {chartTitle}'
+            menuButtonLabel: 'View chart menu, {chartTitle}'
         },
         /**
          * Lang configuration for different series types. For more dynamic

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

@@ -10,7 +10,6 @@
  *
  * */
 'use strict';
-import palette from '../../Core/Color/Palette.js';
 /**
  * Formatter callback for the accessibility announcement.
  *
@@ -149,6 +148,8 @@ var Options = {
              * corresponds to the heading level below the previous heading in
              * the DOM.
              *
+             * Set to empty string to remove the region altogether.
+             *
              * @since 8.0.0
              */
             beforeChartFormat: '<{headingTagName}>{chartTitle}</{headingTagName}>' +
@@ -180,7 +181,7 @@ var Options = {
              * Date format to use to describe range of datetime axes.
              *
              * For an overview of the replacement codes, see
-             * [dateFormat](/class-reference/Highcharts#.dateFormat).
+             * [dateFormat](/class-reference/Highcharts.Time#dateFormat).
              *
              * @see [point.dateFormat](#accessibility.point.dateFormat)
              *
@@ -240,7 +241,7 @@ var Options = {
              * Defaults to the same format as in tooltip.
              *
              * For an overview of the replacement codes, see
-             * [dateFormat](/class-reference/Highcharts#.dateFormat).
+             * [dateFormat](/class-reference/Highcharts.Time#dateFormat).
              *
              * @see [dateFormatter](#accessibility.point.dateFormatter)
              *
@@ -253,7 +254,7 @@ var Options = {
              * points on datetime axes when describing them to screen reader
              * users. Receives one argument, `point`, referring to the point
              * to describe. Should return a date format string compatible with
-             * [dateFormat](/class-reference/Highcharts#.dateFormat).
+             * [dateFormat](/class-reference/Highcharts.Time#dateFormat).
              *
              * @see [dateFormat](#accessibility.point.dateFormat)
              *
@@ -329,7 +330,7 @@ var Options = {
          * landmarks can make navigation with screen readers easier, but can
          * be distracting if there are lots of charts on the page. Three modes
          * are available:
-         *  - `all`: Adds regions for all series, legend, menu, information
+         *  - `all`: Adds regions for all series, legend, information
          *      region.
          *  - `one`: Adds a single landmark per chart.
          *  - `disabled`: No landmarks are added.
@@ -491,7 +492,7 @@ var Options = {
                  */
                 style: {
                     /** @internal */
-                    color: palette.highlightColor80,
+                    color: "#335cad" /* highlightColor80 */,
                     /** @internal */
                     lineWidth: 2,
                     /** @internal */
@@ -675,17 +676,6 @@ var Options = {
      * @since      7.1.0
      * @apioption  plotOptions.series.accessibility.description
      */
-    /**
-     * Formatter function to use instead of the default for point
-     * descriptions. Same as `accessibility.point.descriptionFormatter`, but for
-     * a single series.
-     *
-     * @see [accessibility.point.descriptionFormatter](#accessibility.point.descriptionFormatter)
-     *
-     * @type      {Highcharts.ScreenReaderFormatterCallbackFunction<Highcharts.Point>}
-     * @since     7.1.0
-     * @apioption plotOptions.series.accessibility.pointDescriptionFormatter
-     */
     /**
      * Expose only the series element to screen readers, not its points.
      *
@@ -693,6 +683,31 @@ var Options = {
      * @since      7.1.0
      * @apioption  plotOptions.series.accessibility.exposeAsGroupOnly
      */
+    /**
+     * Point accessibility options for a series.
+     *
+     * @extends    accessibility.point
+     * @since 9.3.0
+     * @requires   modules/accessibility
+     * @apioption  plotOptions.series.accessibility.point
+     */
+    /**
+     * Formatter function to use instead of the default for point
+     * descriptions. Same as `accessibility.point.descriptionFormatter`, but
+     * applies to a series instead of the whole chart.
+     *
+     * Note: Prefer using [accessibility.point.valueDescriptionFormat](#plotOptions.series.accessibility.point.valueDescriptionFormat)
+     * instead if possible, as default functionality such as describing
+     * annotations will be preserved.
+     *
+     * @see [accessibility.point.valueDescriptionFormat](#plotOptions.series.accessibility.point.valueDescriptionFormat)
+     * @see [point.accessibility.description](#series.line.data.accessibility.description)
+     * @see [accessibility.point.descriptionFormatter](#accessibility.point.descriptionFormatter)
+     *
+     * @type      {Highcharts.ScreenReaderFormatterCallbackFunction<Highcharts.Point>}
+     * @since 9.3.0
+     * @apioption plotOptions.series.accessibility.point.descriptionFormatter
+     */
     /**
      * Keyboard navigation for a series
      *