highcharts 9.2.2 → 9.3.0

package/es-modules/Accessibility/Accessibility.js

@@ -10,47 +10,34 @@
  *
  * */
 'use strict';
-import Chart from '../Core/Chart/Chart.js';
-import ChartUtilities from './Utils/ChartUtilities.js';
-import H from '../Core/Globals.js';
-var doc = H.doc;
-import KeyboardNavigationHandler from './KeyboardNavigationHandler.js';
 import D from '../Core/DefaultOptions.js';
 var defaultOptions = D.defaultOptions;
-import Point from '../Core/Series/Point.js';
-import Series from '../Core/Series/Series.js';
+import H from '../Core/Globals.js';
+var doc = H.doc;
 import U from '../Core/Utilities.js';
 var addEvent = U.addEvent, extend = U.extend, fireEvent = U.fireEvent, merge = U.merge;
-import AccessibilityComponent from './AccessibilityComponent.js';
+import A11yI18n from './A11yI18n.js';
+import ContainerComponent from './Components/ContainerComponent.js';
+import FocusBorder from './FocusBorder.js';
+import InfoRegionsComponent from './Components/InfoRegionsComponent.js';
 import KeyboardNavigation from './KeyboardNavigation.js';
 import LegendComponent from './Components/LegendComponent.js';
 import MenuComponent from './Components/MenuComponent.js';
+import NewDataAnnouncer from './Components/SeriesComponent/NewDataAnnouncer.js';
+import ProxyProvider from './ProxyProvider.js';
+import RangeSelectorComponent from './Components/RangeSelectorComponent.js';
 import SeriesComponent from './Components/SeriesComponent/SeriesComponent.js';
 import ZoomComponent from './Components/ZoomComponent.js';
-import RangeSelectorComponent from './Components/RangeSelectorComponent.js';
-import InfoRegionsComponent from './Components/InfoRegionsComponent.js';
-import ContainerComponent from './Components/ContainerComponent.js';
 import whcm from './HighContrastMode.js';
 import highContrastTheme from './HighContrastTheme.js';
 import defaultOptionsA11Y from './Options/Options.js';
 import defaultLangOptions from './Options/LangOptions.js';
 import copyDeprecatedOptions from './Options/DeprecatedOptions.js';
-import HTMLUtilities from './Utils/HTMLUtilities.js';
-import './A11yI18n.js';
-import './FocusBorder.js';
-// Add default options
-merge(true, defaultOptions, defaultOptionsA11Y, {
-    accessibility: {
-        highContrastTheme: highContrastTheme
-    },
-    lang: defaultLangOptions
-});
-// Expose functionality on Highcharts namespace
-H.A11yChartUtilities = ChartUtilities;
-H.A11yHTMLUtilities = HTMLUtilities;
-H.KeyboardNavigationHandler = KeyboardNavigationHandler;
-H.AccessibilityComponent = AccessibilityComponent;
-/* eslint-disable no-invalid-this, valid-jsdoc */
+/* *
+ *
+ *  Class
+ *
+ * */
 /**
  * The Accessibility class
  *
@@ -61,37 +48,62 @@ H.AccessibilityComponent = AccessibilityComponent;
  * @name Highcharts.Accessibility
  *
  * @param {Highcharts.Chart} chart
- *        Chart object
+ * Chart object
  */
-function Accessibility(chart) {
-    this.init(chart);
-}
-Accessibility.prototype = {
+var Accessibility = /** @class */ (function () {
+    /* *
+     *
+     *  Constructor
+     *
+     * */
+    function Accessibility(chart) {
+        /* *
+         *
+         *  Properties
+         *
+         * */
+        this.chart = void 0;
+        this.components = void 0;
+        this.keyboardNavigation = void 0;
+        this.proxyProvider = void 0;
+        this.init(chart);
+    }
+    /* *
+     *
+     *  Functions
+     *
+     * */
+    /* eslint-disable valid-jsdoc */
     /**
      * Initialize the accessibility class
      * @private
      * @param {Highcharts.Chart} chart
      *        Chart object
      */
-    init: function (chart) {
+    Accessibility.prototype.init = function (chart) {
         this.chart = chart;
         // Abort on old browsers
         if (!doc.addEventListener || !chart.renderer.isSVG) {
+            this.zombie = true;
+            this.components = {};
             chart.renderTo.setAttribute('aria-hidden', true);
             return;
         }
         // Copy over any deprecated options that are used. We could do this on
         // every update, but it is probably not needed.
         copyDeprecatedOptions(chart);
+        this.proxyProvider = new ProxyProvider(this.chart);
         this.initComponents();
         this.keyboardNavigation = new KeyboardNavigation(chart, this.components);
         this.update();
-    },
+    };
     /**
      * @private
      */
-    initComponents: function () {
-        var chart = this.chart, a11yOptions = chart.options.accessibility;
+    Accessibility.prototype.initComponents = function () {
+        var chart = this.chart;
+        var proxyProvider = this.proxyProvider;
+        var a11yOptions = chart.options.accessibility;
         this.components = {
             container: new ContainerComponent(),
             infoRegions: new InfoRegionsComponent(),
@@ -106,15 +118,15 @@ Accessibility.prototype = {
         }
         var components = this.components;
         this.getComponentOrder().forEach(function (componentName) {
-            components[componentName].initBase(chart);
+            components[componentName].initBase(chart, proxyProvider);
             components[componentName].init();
         });
-    },
+    };
     /**
      * Get order to update components in.
      * @private
      */
-    getComponentOrder: function () {
+    Accessibility.prototype.getComponentOrder = function () {
         if (!this.components) {
             return []; // For zombie accessibility object on old browsers
         }
@@ -126,15 +138,19 @@ Accessibility.prototype = {
         // Update series first, so that other components can read accessibility
         // info on points.
         return ['series'].concat(componentsExceptSeries);
-    },
+    };
     /**
      * Update all components.
      */
-    update: function () {
+    Accessibility.prototype.update = function () {
         var components = this.components, chart = this.chart, a11yOptions = chart.options.accessibility;
         fireEvent(chart, 'beforeA11yUpdate');
         // Update the chart type list as this is used by multiple modules
         chart.types = this.getChartTypes();
+        // Update proxies. We don't update proxy positions since most likely we
+        // need to recreate the proxies on update.
+        var kbdNavOrder = a11yOptions.keyboardNavigation.order;
+        this.proxyProvider.updateGroupOrder(kbdNavOrder);
         // Update markup
         this.getComponentOrder().forEach(function (componentName) {
             components[componentName].onChartUpdate();
@@ -144,7 +160,7 @@ Accessibility.prototype = {
             });
         });
         // Update keyboard navigation
-        this.keyboardNavigation.update(a11yOptions.keyboardNavigation.order);
+        this.keyboardNavigation.update(kbdNavOrder);
         // Handle high contrast mode
         if (!chart.highContrastModeActive && // Only do this once
             whcm.isHighContrastModeActive()) {
@@ -153,11 +169,11 @@ Accessibility.prototype = {
         fireEvent(chart, 'afterA11yUpdate', {
             accessibility: this
         });
-    },
+    };
     /**
      * Destroy all elements.
      */
-    destroy: function () {
+    Accessibility.prototype.destroy = function () {
         var chart = this.chart || {};
         // Destroy components
         var components = this.components;
@@ -165,6 +181,10 @@ Accessibility.prototype = {
             components[componentName].destroy();
             components[componentName].destroyBase();
         });
+        // Destroy proxy provider
+        if (this.proxyProvider) {
+            this.proxyProvider.destroy();
+        }
         // Kill keyboard nav
         if (this.keyboardNavigation) {
             this.keyboardNavigation.destroy();
@@ -177,110 +197,195 @@ Accessibility.prototype = {
         if (chart.focusElement) {
             chart.focusElement.removeFocusBorder();
         }
-    },
+    };
     /**
      * Return a list of the types of series we have in the chart.
      * @private
      */
-    getChartTypes: function () {
+    Accessibility.prototype.getChartTypes = function () {
         var types = {};
         this.chart.series.forEach(function (series) {
             types[series.type] = 1;
         });
         return Object.keys(types);
+    };
+    return Accessibility;
+}());
+/* *
+ *
+ *  Class Namespace
+ *
+ * */
+(function (Accessibility) {
+    /* *
+     *
+     *  Declarations
+     *
+     * */
+    /* *
+     *
+     *  Constants
+     *
+     * */
+    var composedClasses = [];
+    Accessibility.i18nFormat = A11yI18n.i18nFormat;
+    /* *
+     *
+     *  Functions
+     *
+     * */
+    /* eslint-disable valid-jsdoc */
+    /**
+     * Destroy with chart.
+     * @private
+     */
+    function chartOnDestroy() {
+        if (this.accessibility) {
+            this.accessibility.destroy();
+        }
     }
-};
-/**
- * @private
- */
-Chart.prototype.updateA11yEnabled = function () {
-    var a11y = this.accessibility, accessibilityOptions = this.options.accessibility;
-    if (accessibilityOptions && accessibilityOptions.enabled) {
-        if (a11y) {
-            a11y.update();
+    /**
+     * Handle updates to the module and send render updates to components.
+     * @private
+     */
+    function chartOnRender() {
+        // Update/destroy
+        if (this.a11yDirty && this.renderTo) {
+            delete this.a11yDirty;
+            this.updateA11yEnabled();
         }
-        else {
-            this.accessibility = a11y = new Accessibility(this);
+        var a11y = this.accessibility;
+        if (a11y && !a11y.zombie) {
+            a11y.proxyProvider.updateProxyElementPositions();
+            a11y.getComponentOrder().forEach(function (componentName) {
+                a11y.components[componentName].onChartRender();
+            });
         }
     }
-    else if (a11y) {
-        // Destroy if after update we have a11y and it is disabled
-        if (a11y.destroy) {
-            a11y.destroy();
+    /**
+     * Update with chart/series/point updates.
+     * @private
+     */
+    function chartOnUpdate(e) {
+        // Merge new options
+        var newOptions = e.options.accessibility;
+        if (newOptions) {
+            // Handle custom component updating specifically
+            if (newOptions.customComponents) {
+                this.options.accessibility.customComponents =
+                    newOptions.customComponents;
+                delete newOptions.customComponents;
+            }
+            merge(true, this.options.accessibility, newOptions);
+            // Recreate from scratch
+            if (this.accessibility && this.accessibility.destroy) {
+                this.accessibility.destroy();
+                delete this.accessibility;
+            }
         }
-        delete this.accessibility;
-    }
-    else {
-        // Just hide container
-        this.renderTo.setAttribute('aria-hidden', true);
-    }
-};
-// Handle updates to the module and send render updates to components
-addEvent(Chart, 'render', function (e) {
-    // Update/destroy
-    if (this.a11yDirty && this.renderTo) {
-        delete this.a11yDirty;
-        this.updateA11yEnabled();
-    }
-    var a11y = this.accessibility;
-    if (a11y) {
-        a11y.getComponentOrder().forEach(function (componentName) {
-            a11y.components[componentName].onChartRender();
-        });
+        // Mark dirty for update
+        this.a11yDirty = true;
     }
-});
-// Update with chart/series/point updates
-addEvent(Chart, 'update', function (e) {
-    // Merge new options
-    var newOptions = e.options.accessibility;
-    if (newOptions) {
-        // Handle custom component updating specifically
-        if (newOptions.customComponents) {
-            this.options.accessibility.customComponents =
-                newOptions.customComponents;
-            delete newOptions.customComponents;
+    /**
+     * @private
+     */
+    function chartUpdateA11yEnabled() {
+        var a11y = this.accessibility;
+        var accessibilityOptions = this.options.accessibility;
+        if (accessibilityOptions && accessibilityOptions.enabled) {
+            if (a11y && !a11y.zombie) {
+                a11y.update();
+            }
+            else {
+                this.accessibility = a11y = new Accessibility(this);
+            }
         }
-        merge(true, this.options.accessibility, newOptions);
-        // Recreate from scratch
-        if (this.accessibility && this.accessibility.destroy) {
-            this.accessibility.destroy();
+        else if (a11y) {
+            // Destroy if after update we have a11y and it is disabled
+            if (a11y.destroy) {
+                a11y.destroy();
+            }
             delete this.accessibility;
         }
+        else {
+            // Just hide container
+            this.renderTo.setAttribute('aria-hidden', true);
+        }
     }
-    // Mark dirty for update
-    this.a11yDirty = true;
-});
-// Mark dirty for update
-addEvent(Point, 'update', function () {
-    if (this.series.chart.accessibility) {
-        this.series.chart.a11yDirty = true;
-    }
-});
-['addSeries', 'init'].forEach(function (event) {
-    addEvent(Chart, event, function () {
-        this.a11yDirty = true;
-    });
-});
-['update', 'updatedData', 'remove'].forEach(function (event) {
-    addEvent(Series, event, function () {
-        if (this.chart.accessibility) {
-            this.chart.a11yDirty = true;
+    /**
+     * @private
+     */
+    function compose(ChartClass, PointClass, SeriesClass, SVGElementClass) {
+        A11yI18n.compose(ChartClass);
+        FocusBorder.compose(ChartClass, SVGElementClass);
+        KeyboardNavigation.compose(ChartClass);
+        NewDataAnnouncer.compose(SeriesClass);
+        SeriesComponent.compose(ChartClass, PointClass, SeriesClass);
+        if (composedClasses.indexOf(ChartClass) === -1) {
+            composedClasses.push(ChartClass);
+            var chartProto = ChartClass.prototype;
+            chartProto.updateA11yEnabled = chartUpdateA11yEnabled;
+            addEvent(ChartClass, 'destroy', chartOnDestroy);
+            addEvent(ChartClass, 'render', chartOnRender);
+            addEvent(ChartClass, 'update', chartOnUpdate);
+            // Mark dirty for update
+            ['addSeries', 'init'].forEach(function (event) {
+                addEvent(ChartClass, event, function () {
+                    this.a11yDirty = true;
+                });
+            });
+            // Direct updates (events happen after render)
+            ['afterDrilldown', 'drillupall'].forEach(function (event) {
+                addEvent(ChartClass, event, function chartOnAfterDrilldown() {
+                    var a11y = this.accessibility;
+                    if (a11y && !a11y.zombie) {
+                        a11y.update();
+                    }
+                });
+            });
         }
-    });
-});
-// Direct updates (events happen after render)
-[
-    'afterDrilldown', 'drillupall'
-].forEach(function (event) {
-    addEvent(Chart, event, function () {
-        if (this.accessibility) {
-            this.accessibility.update();
+        if (composedClasses.indexOf(PointClass) === -1) {
+            composedClasses.push(PointClass);
+            addEvent(PointClass, 'update', pointOnUpdate);
+        }
+        if (composedClasses.indexOf(SeriesClass) === -1) {
+            composedClasses.push(SeriesClass);
+            // Mark dirty for update
+            ['update', 'updatedData', 'remove'].forEach(function (event) {
+                addEvent(SeriesClass, event, function () {
+                    if (this.chart.accessibility) {
+                        this.chart.a11yDirty = true;
+                    }
+                });
+            });
+        }
+    }
+    Accessibility.compose = compose;
+    /**
+     * Mark dirty for update.
+     * @private
+     */
+    function pointOnUpdate() {
+        if (this.series.chart.accessibility) {
+            this.series.chart.a11yDirty = true;
         }
-    });
-});
-// Destroy with chart
-addEvent(Chart, 'destroy', function () {
-    if (this.accessibility) {
-        this.accessibility.destroy();
     }
+})(Accessibility || (Accessibility = {}));
+/* *
+ *
+ *  Registry
+ *
+ * */
+// Add default options
+merge(true, defaultOptions, defaultOptionsA11Y, {
+    accessibility: {
+        highContrastTheme: highContrastTheme
+    },
+    lang: defaultLangOptions
 });
+/* *
+ *
+ *  Default Export
+ *
+ * */
+export default Accessibility;