highcharts 9.2.2 → 9.3.3

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

@@ -10,119 +10,43 @@
  *
  * */
 'use strict';
+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]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
 import Chart from '../../Core/Chart/Chart.js';
 import U from '../../Core/Utilities.js';
-var extend = U.extend;
+var attr = U.attr;
 import AccessibilityComponent from '../AccessibilityComponent.js';
 import KeyboardNavigationHandler from '../KeyboardNavigationHandler.js';
 import ChartUtilities from '../Utils/ChartUtilities.js';
 var getChartTitle = ChartUtilities.getChartTitle, unhideChartElementFromAT = ChartUtilities.unhideChartElementFromAT;
 import HTMLUtilities from '../Utils/HTMLUtilities.js';
-var removeElement = HTMLUtilities.removeElement, getFakeMouseEvent = HTMLUtilities.getFakeMouseEvent;
-/* eslint-disable no-invalid-this, valid-jsdoc */
+var getFakeMouseEvent = HTMLUtilities.getFakeMouseEvent;
+/* *
+ *
+ *  Functions
+ *
+ * */
+/* eslint-disable valid-jsdoc */
 /**
  * Get the wrapped export button element of a chart.
- *
  * @private
- * @param {Highcharts.Chart} chart
- * @returns {Highcharts.SVGElement}
  */
 function getExportMenuButtonElement(chart) {
     return chart.exportSVGElements && chart.exportSVGElements[0];
 }
 /**
- * Show the export menu and focus the first item (if exists).
- *
- * @private
- * @function Highcharts.Chart#showExportMenu
- */
-Chart.prototype.showExportMenu = function () {
-    var exportButton = getExportMenuButtonElement(this);
-    if (exportButton) {
-        var el = exportButton.element;
-        if (el.onclick) {
-            el.onclick(getFakeMouseEvent('click'));
-        }
-    }
-};
-/**
- * @private
- * @function Highcharts.Chart#hideExportMenu
- */
-Chart.prototype.hideExportMenu = function () {
-    var chart = this, exportList = chart.exportDivElements;
-    if (exportList && chart.exportContextMenu) {
-        // Reset hover states etc.
-        exportList.forEach(function (el) {
-            if (el &&
-                el.className === 'highcharts-menu-item' &&
-                el.onmouseout) {
-                el.onmouseout(getFakeMouseEvent('mouseout'));
-            }
-        });
-        chart.highlightedExportItemIx = 0;
-        // Hide the menu div
-        chart.exportContextMenu.hideMenu();
-        // Make sure the chart has focus and can capture keyboard events
-        chart.container.focus();
-    }
-};
-/**
- * Highlight export menu item by index.
- *
- * @private
- * @function Highcharts.Chart#highlightExportItem
- *
- * @param {number} ix
- *
- * @return {boolean}
- */
-Chart.prototype.highlightExportItem = function (ix) {
-    var listItem = this.exportDivElements && this.exportDivElements[ix], curHighlighted = this.exportDivElements &&
-        this.exportDivElements[this.highlightedExportItemIx], hasSVGFocusSupport;
-    if (listItem &&
-        listItem.tagName === 'LI' &&
-        !(listItem.children && listItem.children.length)) {
-        // Test if we have focus support for SVG elements
-        hasSVGFocusSupport = !!(this.renderTo.getElementsByTagName('g')[0] || {}).focus;
-        // Only focus if we can set focus back to the elements after
-        // destroying the menu (#7422)
-        if (listItem.focus && hasSVGFocusSupport) {
-            listItem.focus();
-        }
-        if (curHighlighted && curHighlighted.onmouseout) {
-            curHighlighted.onmouseout(getFakeMouseEvent('mouseout'));
-        }
-        if (listItem.onmouseover) {
-            listItem.onmouseover(getFakeMouseEvent('mouseover'));
-        }
-        this.highlightedExportItemIx = ix;
-        return true;
-    }
-    return false;
-};
-/**
- * Try to highlight the last valid export menu item.
- *
  * @private
- * @function Highcharts.Chart#highlightLastExportItem
- * @return {boolean}
- */
-Chart.prototype.highlightLastExportItem = function () {
-    var chart = this, i;
-    if (chart.exportDivElements) {
-        i = chart.exportDivElements.length;
-        while (i--) {
-            if (chart.highlightExportItem(i)) {
-                return true;
-            }
-        }
-    }
-    return false;
-};
-/**
- * @private
- * @param {Highcharts.Chart} chart
  */
 function exportingShouldHaveA11y(chart) {
     var exportingOpts = chart.options.exporting, exportButton = getExportMenuButtonElement(chart);
@@ -133,6 +57,11 @@ function exportingShouldHaveA11y(chart) {
         exportButton &&
         exportButton.element);
 }
+/* *
+ *
+ *  Class
+ *
+ * */
 /**
  * The MenuComponent class
  *
@@ -140,13 +69,21 @@ function exportingShouldHaveA11y(chart) {
  * @class
  * @name Highcharts.MenuComponent
  */
-var MenuComponent = function () { };
-MenuComponent.prototype = new AccessibilityComponent();
-extend(MenuComponent.prototype, /** @lends Highcharts.MenuComponent */ {
+var MenuComponent = /** @class */ (function (_super) {
+    __extends(MenuComponent, _super);
+    function MenuComponent() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    /* *
+     *
+     *  Functions
+     *
+     * */
+    /* eslint-disable valid-jsdoc */
     /**
      * Init the component
      */
-    init: function () {
+    MenuComponent.prototype.init = function () {
         var chart = this.chart, component = this;
         this.addEvent(chart, 'exportMenuShown', function () {
             component.onMenuShown();
@@ -154,22 +91,23 @@ extend(MenuComponent.prototype, /** @lends Highcharts.MenuComponent */ {
         this.addEvent(chart, 'exportMenuHidden', function () {
             component.onMenuHidden();
         });
-    },
+        this.createProxyGroup();
+    };
     /**
      * @private
      */
-    onMenuHidden: function () {
+    MenuComponent.prototype.onMenuHidden = function () {
         var menu = this.chart.exportContextMenu;
         if (menu) {
             menu.setAttribute('aria-hidden', 'true');
         }
         this.isExportMenuShown = false;
         this.setExportButtonExpandedState('false');
-    },
+    };
     /**
      * @private
      */
-    onMenuShown: function () {
+    MenuComponent.prototype.onMenuShown = function () {
         var chart = this.chart, menu = chart.exportContextMenu;
         if (menu) {
             this.addAccessibleContextMenuAttribs();
@@ -177,45 +115,65 @@ extend(MenuComponent.prototype, /** @lends Highcharts.MenuComponent */ {
         }
         this.isExportMenuShown = true;
         this.setExportButtonExpandedState('true');
-    },
+    };
     /**
      * @private
      * @param {string} stateStr
      */
-    setExportButtonExpandedState: function (stateStr) {
-        var button = this.exportButtonProxy;
-        if (button) {
-            button.setAttribute('aria-expanded', stateStr);
+    MenuComponent.prototype.setExportButtonExpandedState = function (stateStr) {
+        if (this.exportButtonProxy) {
+            this.exportButtonProxy.buttonElement.setAttribute('aria-expanded', stateStr);
         }
-    },
+    };
     /**
      * Called on each render of the chart. We need to update positioning of the
      * proxy overlay.
      */
-    onChartRender: function () {
-        var chart = this.chart, a11yOptions = chart.options.accessibility;
-        // Always start with a clean slate
-        removeElement(this.exportProxyGroup);
-        // Set screen reader properties on export menu
-        if (exportingShouldHaveA11y(chart)) {
-            // Proxy button and group
-            this.exportProxyGroup = this.addProxyGroup(
-            // Wrap in a region div if verbosity is high
-            a11yOptions.landmarkVerbosity === 'all' ? {
-                'aria-label': chart.langFormat('accessibility.exporting.exportRegionLabel', { chart: chart, chartTitle: getChartTitle(chart) }),
-                'role': 'region'
-            } : {});
-            var button = getExportMenuButtonElement(this.chart);
-            this.exportButtonProxy = this.createProxyButton(button, this.exportProxyGroup, {
-                'aria-label': chart.langFormat('accessibility.exporting.menuButtonLabel', { chart: chart }),
+    MenuComponent.prototype.onChartRender = function () {
+        var chart = this.chart, focusEl = chart.focusElement, a11y = chart.accessibility;
+        this.proxyProvider.clearGroup('chartMenu');
+        this.proxyMenuButton();
+        if (this.exportButtonProxy &&
+            focusEl &&
+            focusEl === chart.exportingGroup) {
+            if (focusEl.focusBorder) {
+                chart.setFocusToElement(focusEl, this.exportButtonProxy.buttonElement);
+            }
+            else if (a11y) {
+                a11y.keyboardNavigation.tabindexContainer.focus();
+            }
+        }
+    };
+    /**
+     * @private
+     */
+    MenuComponent.prototype.proxyMenuButton = function () {
+        var chart = this.chart;
+        var proxyProvider = this.proxyProvider;
+        var buttonEl = getExportMenuButtonElement(chart);
+        if (exportingShouldHaveA11y(chart) && buttonEl) {
+            this.exportButtonProxy = proxyProvider.addProxyElement('chartMenu', { click: buttonEl }, {
+                'aria-label': chart.langFormat('accessibility.exporting.menuButtonLabel', {
+                    chart: chart,
+                    chartTitle: getChartTitle(chart)
+                }),
                 'aria-expanded': false
             });
         }
-    },
+    };
+    /**
+     * @private
+     */
+    MenuComponent.prototype.createProxyGroup = function () {
+        var chart = this.chart;
+        if (chart && this.proxyProvider) {
+            this.proxyProvider.addGroup('chartMenu', 'div');
+        }
+    };
     /**
      * @private
      */
-    addAccessibleContextMenuAttribs: function () {
+    MenuComponent.prototype.addAccessibleContextMenuAttribs = function () {
         var chart = this.chart, exportList = chart.exportDivElements;
         if (exportList && exportList.length) {
             // Set tabindex on the menu items to allow focusing by script
@@ -234,16 +192,19 @@ extend(MenuComponent.prototype, /** @lends Highcharts.MenuComponent */ {
             // Set accessibility properties on parent div
             var parentDiv = (exportList[0] && exportList[0].parentNode);
             if (parentDiv) {
-                parentDiv.removeAttribute('aria-hidden');
-                parentDiv.setAttribute('aria-label', chart.langFormat('accessibility.exporting.chartMenuLabel', { chart: chart }));
+                attr(parentDiv, {
+                    'aria-hidden': void 0,
+                    'aria-label': chart.langFormat('accessibility.exporting.chartMenuLabel', { chart: chart }),
+                    role: 'list' // Needed for webkit/VO
+                });
             }
         }
-    },
+    };
     /**
      * Get keyboard navigation handler for this component.
-     * @return {Highcharts.KeyboardNavigationHandler}
+     * @private
      */
-    getKeyboardNavigation: function () {
+    MenuComponent.prototype.getKeyboardNavigation = function () {
         var keys = this.keyCodes, chart = this.chart, component = this;
         return new KeyboardNavigationHandler(chart, {
             keyCodeMap: [
@@ -279,9 +240,10 @@ extend(MenuComponent.prototype, /** @lends Highcharts.MenuComponent */ {
             },
             // Focus export menu button
             init: function () {
-                var exportBtn = component.exportButtonProxy, exportGroup = chart.exportingGroup;
-                if (exportGroup && exportBtn) {
-                    chart.setFocusToElement(exportGroup, exportBtn);
+                var proxy = component.exportButtonProxy;
+                var svgEl = component.chart.exportingGroup;
+                if (proxy && svgEl) {
+                    chart.setFocusToElement(svgEl, proxy.buttonElement);
                 }
             },
             // Hide the menu
@@ -289,17 +251,19 @@ extend(MenuComponent.prototype, /** @lends Highcharts.MenuComponent */ {
                 chart.hideExportMenu();
             }
         });
-    },
+    };
     /**
      * @private
      * @param {Highcharts.KeyboardNavigationHandler} keyboardNavigationHandler
-     * @return {number}
-     * Response code
+     * @return {number} Response code
      */
-    onKbdPrevious: function (keyboardNavigationHandler) {
-        var chart = this.chart, a11yOptions = chart.options.accessibility, response = keyboardNavigationHandler.response, i = chart.highlightedExportItemIx || 0;
+    MenuComponent.prototype.onKbdPrevious = function (keyboardNavigationHandler) {
+        var chart = this.chart;
+        var a11yOptions = chart.options.accessibility;
+        var response = keyboardNavigationHandler.response;
         // Try to highlight prev item in list. Highlighting e.g.
         // separators will fail.
+        var i = chart.highlightedExportItemIx || 0;
         while (i--) {
             if (chart.highlightExportItem(i)) {
                 return response.success;
@@ -311,18 +275,19 @@ extend(MenuComponent.prototype, /** @lends Highcharts.MenuComponent */ {
             return response.success;
         }
         return response.prev;
-    },
+    };
     /**
      * @private
      * @param {Highcharts.KeyboardNavigationHandler} keyboardNavigationHandler
-     * @return {number}
-     * Response code
+     * @return {number} Response code
      */
-    onKbdNext: function (keyboardNavigationHandler) {
-        var chart = this.chart, a11yOptions = chart.options.accessibility, response = keyboardNavigationHandler.response, i = (chart.highlightedExportItemIx || 0) + 1;
+    MenuComponent.prototype.onKbdNext = function (keyboardNavigationHandler) {
+        var chart = this.chart;
+        var a11yOptions = chart.options.accessibility;
+        var response = keyboardNavigationHandler.response;
         // Try to highlight next item in list. Highlighting e.g.
         // separators will fail.
-        for (; i < chart.exportDivElements.length; ++i) {
+        for (var i = (chart.highlightedExportItemIx || 0) + 1; i < chart.exportDivElements.length; ++i) {
             if (chart.highlightExportItem(i)) {
                 return response.success;
             }
@@ -333,15 +298,16 @@ extend(MenuComponent.prototype, /** @lends Highcharts.MenuComponent */ {
             return response.success;
         }
         return response.next;
-    },
+    };
     /**
      * @private
      * @param {Highcharts.KeyboardNavigationHandler} keyboardNavigationHandler
-     * @return {number}
-     * Response code
+     * @return {number} Response code
      */
-    onKbdClick: function (keyboardNavigationHandler) {
-        var chart = this.chart, curHighlightedItem = chart.exportDivElements[chart.highlightedExportItemIx], exportButtonElement = getExportMenuButtonElement(chart).element;
+    MenuComponent.prototype.onKbdClick = function (keyboardNavigationHandler) {
+        var chart = this.chart;
+        var curHighlightedItem = chart.exportDivElements[chart.highlightedExportItemIx];
+        var exportButtonElement = getExportMenuButtonElement(chart).element;
         if (this.isExportMenuShown) {
             this.fakeClickEvent(curHighlightedItem);
         }
@@ -350,6 +316,136 @@ extend(MenuComponent.prototype, /** @lends Highcharts.MenuComponent */ {
             chart.highlightExportItem(0);
         }
         return keyboardNavigationHandler.response.success;
+    };
+    return MenuComponent;
+}(AccessibilityComponent));
+/* *
+ *
+ *  Class Namespace
+ *
+ * */
+(function (MenuComponent) {
+    /* *
+     *
+     *  Declarations
+     *
+     * */
+    /* *
+     *
+     *  Constants
+     *
+     * */
+    var composedClasses = [];
+    /* *
+     *
+     *  Functions
+     *
+     * */
+    /* eslint-disable valid-jsdoc */
+    /**
+     * @private
+     */
+    function compose(ChartClass) {
+        if (composedClasses.indexOf(ChartClass) === -1) {
+            composedClasses.push(ChartClass);
+            var chartProto = Chart.prototype;
+            chartProto.hideExportMenu = chartHideExportMenu;
+            chartProto.highlightExportItem = chartHighlightExportItem;
+            chartProto.highlightLastExportItem = chartHighlightLastExportItem;
+            chartProto.showExportMenu = chartShowExportMenu;
+        }
+    }
+    MenuComponent.compose = compose;
+    /**
+     * Show the export menu and focus the first item (if exists).
+     *
+     * @private
+     * @function Highcharts.Chart#showExportMenu
+     */
+    function chartShowExportMenu() {
+        var exportButton = getExportMenuButtonElement(this);
+        if (exportButton) {
+            var el = exportButton.element;
+            if (el.onclick) {
+                el.onclick(getFakeMouseEvent('click'));
+            }
+        }
+    }
+    /**
+     * @private
+     * @function Highcharts.Chart#hideExportMenu
+     */
+    function chartHideExportMenu() {
+        var chart = this, exportList = chart.exportDivElements;
+        if (exportList && chart.exportContextMenu) {
+            // Reset hover states etc.
+            exportList.forEach(function (el) {
+                if (el &&
+                    el.className === 'highcharts-menu-item' &&
+                    el.onmouseout) {
+                    el.onmouseout(getFakeMouseEvent('mouseout'));
+                }
+            });
+            chart.highlightedExportItemIx = 0;
+            // Hide the menu div
+            chart.exportContextMenu.hideMenu();
+            // Make sure the chart has focus and can capture keyboard events
+            chart.container.focus();
+        }
+    }
+    /**
+     * Highlight export menu item by index.
+     *
+     * @private
+     * @function Highcharts.Chart#highlightExportItem
+     */
+    function chartHighlightExportItem(ix) {
+        var listItem = this.exportDivElements && this.exportDivElements[ix];
+        var curHighlighted = this.exportDivElements &&
+            this.exportDivElements[this.highlightedExportItemIx];
+        if (listItem &&
+            listItem.tagName === 'LI' &&
+            !(listItem.children && listItem.children.length)) {
+            // Test if we have focus support for SVG elements
+            var hasSVGFocusSupport = !!(this.renderTo.getElementsByTagName('g')[0] || {}).focus;
+            // Only focus if we can set focus back to the elements after
+            // destroying the menu (#7422)
+            if (listItem.focus && hasSVGFocusSupport) {
+                listItem.focus();
+            }
+            if (curHighlighted && curHighlighted.onmouseout) {
+                curHighlighted.onmouseout(getFakeMouseEvent('mouseout'));
+            }
+            if (listItem.onmouseover) {
+                listItem.onmouseover(getFakeMouseEvent('mouseover'));
+            }
+            this.highlightedExportItemIx = ix;
+            return true;
+        }
+        return false;
     }
-});
+    /**
+     * Try to highlight the last valid export menu item.
+     *
+     * @private
+     * @function Highcharts.Chart#highlightLastExportItem
+     */
+    function chartHighlightLastExportItem() {
+        var chart = this;
+        if (chart.exportDivElements) {
+            var i = chart.exportDivElements.length;
+            while (i--) {
+                if (chart.highlightExportItem(i)) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+})(MenuComponent || (MenuComponent = {}));
+/* *
+ *
+ *  Default Export
+ *
+ * */
 export default MenuComponent;