highcharts 9.2.2 → 9.3.0

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

@@ -15,11 +15,9 @@ import ChartUtilities from '../Utils/ChartUtilities.js';
 var unhideChartElementFromAT = ChartUtilities.unhideChartElementFromAT;
 import H from '../../Core/Globals.js';
 var noop = H.noop;
-import HTMLUtilities from '../Utils/HTMLUtilities.js';
-var removeElement = HTMLUtilities.removeElement, setElAttrs = HTMLUtilities.setElAttrs;
 import KeyboardNavigationHandler from '../KeyboardNavigationHandler.js';
 import U from '../../Core/Utilities.js';
-var extend = U.extend, pick = U.pick;
+var attr = U.attr, extend = U.extend, pick = U.pick;
 /* eslint-disable no-invalid-this, valid-jsdoc */
 /**
  * @private
@@ -40,7 +38,12 @@ function chartHasMapZoom(chart) {
  * @param {number} [granularity]
  */
 H.Axis.prototype.panStep = function (direction, granularity) {
-    var gran = granularity || 3, extremes = this.getExtremes(), step = (extremes.max - extremes.min) / gran * direction, newMax = extremes.max + step, newMin = extremes.min + step, size = newMax - newMin;
+    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;
@@ -66,6 +69,7 @@ extend(ZoomComponent.prototype, /** @lends Highcharts.ZoomComponent */ {
      */
     init: function () {
         var component = this, chart = this.chart;
+        this.proxyProvider.addGroup('zoom', 'div');
         [
             'afterShowResetZoom', 'afterDrilldown', 'drillupall'
         ].forEach(function (eventType) {
@@ -94,7 +98,7 @@ extend(ZoomComponent.prototype, /** @lends Highcharts.ZoomComponent */ {
      */
     setMapNavButtonAttrs: function (button, labelFormatKey) {
         var chart = this.chart, label = chart.langFormat(labelFormatKey, { chart: chart });
-        setElAttrs(button, {
+        attr(button, {
             tabindex: -1,
             role: 'button',
             'aria-label': label
@@ -113,13 +117,12 @@ extend(ZoomComponent.prototype, /** @lends Highcharts.ZoomComponent */ {
     updateProxyOverlays: function () {
         var chart = this.chart;
         // Always start with a clean slate
-        removeElement(this.drillUpProxyGroup);
-        removeElement(this.resetZoomProxyGroup);
+        this.proxyProvider.clearGroup('zoom');
         if (chart.resetZoomButton) {
-            this.recreateProxyButtonAndGroup(chart.resetZoomButton, 'resetZoomProxyButton', 'resetZoomProxyGroup', chart.langFormat('accessibility.zoom.resetZoomButton', { chart: chart }));
+            this.createZoomProxyButton(chart.resetZoomButton, 'resetZoomProxyButton', chart.langFormat('accessibility.zoom.resetZoomButton', { chart: chart }));
         }
         if (chart.drillUpButton) {
-            this.recreateProxyButtonAndGroup(chart.drillUpButton, 'drillUpProxyButton', 'drillUpProxyGroup', chart.langFormat('accessibility.drillUpButton', {
+            this.createZoomProxyButton(chart.drillUpButton, 'drillUpProxyButton', chart.langFormat('accessibility.drillUpButton', {
                 chart: chart,
                 buttonText: chart.getDrilldownBackText()
             }));
@@ -129,13 +132,15 @@ extend(ZoomComponent.prototype, /** @lends Highcharts.ZoomComponent */ {
      * @private
      * @param {Highcharts.SVGElement} buttonEl
      * @param {string} buttonProp
-     * @param {string} groupProp
      * @param {string} label
      */
-    recreateProxyButtonAndGroup: function (buttonEl, buttonProp, groupProp, label) {
-        removeElement(this[groupProp]);
-        this[groupProp] = this.addProxyGroup();
-        this[buttonProp] = this.createProxyButton(buttonEl, this[groupProp], { 'aria-label': label, tabindex: -1 });
+    createZoomProxyButton: function (buttonEl, buttonProp, label) {
+        this[buttonProp] = this.proxyProvider.addProxyElement('zoom', {
+            click: buttonEl
+        }, {
+            'aria-label': label,
+            tabindex: -1
+        });
     },
     /**
      * Get keyboard navigation handler for map zoom.
@@ -193,7 +198,10 @@ extend(ZoomComponent.prototype, /** @lends Highcharts.ZoomComponent */ {
      * @return {number} Response code
      */
     onMapKbdTab: function (keyboardNavigationHandler, event) {
-        var button, chart = this.chart, response = keyboardNavigationHandler.response, isBackwards = event.shiftKey, isMoveOutOfRange = isBackwards && !this.focusedMapNavButtonIx ||
+        var chart = this.chart;
+        var response = keyboardNavigationHandler.response;
+        var isBackwards = event.shiftKey;
+        var isMoveOutOfRange = isBackwards && !this.focusedMapNavButtonIx ||
             !isBackwards && this.focusedMapNavButtonIx;
         // Deselect old
         chart.mapNavButtons[this.focusedMapNavButtonIx].setState(0);
@@ -203,7 +211,7 @@ extend(ZoomComponent.prototype, /** @lends Highcharts.ZoomComponent */ {
         }
         // Select other button
         this.focusedMapNavButtonIx += isBackwards ? -1 : 1;
-        button = chart.mapNavButtons[this.focusedMapNavButtonIx];
+        var button = chart.mapNavButtons[this.focusedMapNavButtonIx];
         chart.setFocusToElement(button.box, button.element);
         button.setState(2);
         return response.success;
@@ -214,8 +222,8 @@ extend(ZoomComponent.prototype, /** @lends Highcharts.ZoomComponent */ {
      * @return {number} Response code
      */
     onMapKbdClick: function (keyboardNavigationHandler) {
-        this.fakeClickEvent(this.chart.mapNavButtons[this.focusedMapNavButtonIx]
-            .element);
+        var el = this.chart.mapNavButtons[this.focusedMapNavButtonIx].element;
+        this.fakeClickEvent(el);
         return keyboardNavigationHandler.response.success;
     },
     /**
@@ -260,11 +268,11 @@ extend(ZoomComponent.prototype, /** @lends Highcharts.ZoomComponent */ {
             validate: function () {
                 var hasButton = (chart[buttonProp] &&
                     chart[buttonProp].box &&
-                    component[proxyProp]);
+                    component[proxyProp].buttonElement);
                 return hasButton;
             },
             init: function () {
-                chart.setFocusToElement(chart[buttonProp].box, component[proxyProp]);
+                chart.setFocusToElement(chart[buttonProp].box, component[proxyProp].buttonElement);
             }
         });
     },

package/es-modules/Accessibility/FocusBorder.js

@@ -10,102 +10,134 @@
  *
  * */
 'use strict';
-import Chart from '../Core/Chart/Chart.js';
-import SVGElement from '../Core/Renderer/SVG/SVGElement.js';
 import SVGLabel from '../Core/Renderer/SVG/SVGLabel.js';
 import U from '../Core/Utilities.js';
-var addEvent = U.addEvent, extend = U.extend, pick = U.pick;
-/* eslint-disable no-invalid-this, valid-jsdoc */
-// Attributes that trigger a focus border update
-var svgElementBorderUpdateTriggers = [
-    'x', 'y', 'transform', 'width', 'height', 'r', 'd', 'stroke-width'
-];
-/**
- * Add hook to destroy focus border if SVG element is destroyed, unless
- * hook already exists.
- * @private
- * @param el Element to add destroy hook to
- */
-function addDestroyFocusBorderHook(el) {
-    if (el.focusBorderDestroyHook) {
-        return;
-    }
-    var origDestroy = el.destroy;
-    el.destroy = function () {
-        if (el.focusBorder && el.focusBorder.destroy) {
-            el.focusBorder.destroy();
+var addEvent = U.addEvent, pick = U.pick;
+/* *
+ *
+ *  Composition
+ *
+ * */
+var FocusBorderComposition;
+(function (FocusBorderComposition) {
+    /* *
+     *
+     *  Declarations
+     *
+     * */
+    /* *
+     *
+     *  Constants
+     *
+     * */
+    var composedClasses = [];
+    // Attributes that trigger a focus border update
+    var svgElementBorderUpdateTriggers = [
+        'x', 'y', 'transform', 'width', 'height', 'r', 'd', 'stroke-width'
+    ];
+    /* *
+     *
+     *  Functions
+     *
+     * */
+    /* eslint-disable valid-jsdoc */
+    /**
+     * @private
+     */
+    function compose(ChartClass, SVGElementClass) {
+        if (composedClasses.indexOf(ChartClass) === -1) {
+            composedClasses.push(ChartClass);
+            var chartProto = ChartClass.prototype;
+            chartProto.renderFocusBorder = chartRenderFocusBorder;
+            chartProto.setFocusToElement = chartSetFocusToElement;
+        }
+        if (composedClasses.indexOf(SVGElementClass) === -1) {
+            composedClasses.push(SVGElementClass);
+            var svgElementProto = SVGElementClass.prototype;
+            svgElementProto.addFocusBorder = svgElementAddFocusBorder;
+            svgElementProto.removeFocusBorder = svgElementRemoveFocusBorder;
         }
-        return origDestroy.apply(el, arguments);
-    };
-    el.focusBorderDestroyHook = origDestroy;
-}
-/**
- * Remove hook from SVG element added by addDestroyFocusBorderHook, if
- * existing.
- * @private
- * @param el Element to remove destroy hook from
- */
-function removeDestroyFocusBorderHook(el) {
-    if (!el.focusBorderDestroyHook) {
-        return;
     }
-    el.destroy = el.focusBorderDestroyHook;
-    delete el.focusBorderDestroyHook;
-}
-/**
- * Add hooks to update the focus border of an element when the element
- * size/position is updated, unless already added.
- * @private
- * @param el Element to add update hooks to
- * @param updateParams Parameters to pass through to addFocusBorder when updating.
- */
-function addUpdateFocusBorderHooks(el) {
-    var updateParams = [];
-    for (var _i = 1; _i < arguments.length; _i++) {
-        updateParams[_i - 1] = arguments[_i];
+    FocusBorderComposition.compose = compose;
+    /**
+     * Redraws the focus border on the currently focused element.
+     *
+     * @private
+     * @function Highcharts.Chart#renderFocusBorder
+     */
+    function chartRenderFocusBorder() {
+        var focusElement = this.focusElement, focusBorderOptions = this.options.accessibility.keyboardNavigation.focusBorder;
+        if (focusElement) {
+            focusElement.removeFocusBorder();
+            if (focusBorderOptions.enabled) {
+                focusElement.addFocusBorder(focusBorderOptions.margin, {
+                    stroke: focusBorderOptions.style.color,
+                    strokeWidth: focusBorderOptions.style.lineWidth,
+                    r: focusBorderOptions.style.borderRadius
+                });
+            }
+        }
     }
-    if (el.focusBorderUpdateHooks) {
-        return;
+    /**
+     * Set chart's focus to an SVGElement. Calls focus() on it, and draws the
+     * focus border. This is used by multiple components.
+     *
+     * @private
+     * @function Highcharts.Chart#setFocusToElement
+     *
+     * @param {Highcharts.SVGElement} svgElement
+     * Element to draw the border around.
+     *
+     * @param {SVGDOMElement|HTMLDOMElement} [focusElement]
+     * If supplied, it draws the border around svgElement and sets the focus to
+     * focusElement.
+     */
+    function chartSetFocusToElement(svgElement, focusElement) {
+        var focusBorderOptions = this.options.accessibility.keyboardNavigation.focusBorder, browserFocusElement = focusElement || svgElement.element;
+        // Set browser focus if possible
+        if (browserFocusElement &&
+            browserFocusElement.focus) {
+            // If there is no focusin-listener, add one to work around Edge
+            // where Narrator is not reading out points despite calling focus().
+            if (!(browserFocusElement.hcEvents &&
+                browserFocusElement.hcEvents.focusin)) {
+                addEvent(browserFocusElement, 'focusin', function () { });
+            }
+            browserFocusElement.focus();
+            // Hide default focus ring
+            if (focusBorderOptions.hideBrowserFocusOutline) {
+                browserFocusElement.style.outline = 'none';
+            }
+        }
+        if (this.focusElement) {
+            this.focusElement.removeFocusBorder();
+        }
+        this.focusElement = svgElement;
+        this.renderFocusBorder();
     }
-    el.focusBorderUpdateHooks = {};
-    svgElementBorderUpdateTriggers.forEach(function (trigger) {
-        var setterKey = trigger + 'Setter';
-        var origSetter = el[setterKey] || el._defaultSetter;
-        el.focusBorderUpdateHooks[setterKey] = origSetter;
-        el[setterKey] = function () {
-            var ret = origSetter.apply(el, arguments);
-            el.addFocusBorder.apply(el, updateParams);
-            return ret;
+    /**
+     * Add hook to destroy focus border if SVG element is destroyed, unless
+     * hook already exists.
+     * @private
+     * @param el Element to add destroy hook to
+     */
+    function svgElementAddDestroyFocusBorderHook(el) {
+        if (el.focusBorderDestroyHook) {
+            return;
+        }
+        var origDestroy = el.destroy;
+        el.destroy = function () {
+            if (el.focusBorder && el.focusBorder.destroy) {
+                el.focusBorder.destroy();
+            }
+            return origDestroy.apply(el, arguments);
         };
-    });
-}
-/**
- * Remove hooks from SVG element added by addUpdateFocusBorderHooks, if
- * existing.
- * @private
- * @param el Element to remove update hooks from
- */
-function removeUpdateFocusBorderHooks(el) {
-    if (!el.focusBorderUpdateHooks) {
-        return;
+        el.focusBorderDestroyHook = origDestroy;
     }
-    Object.keys(el.focusBorderUpdateHooks).forEach(function (setterKey) {
-        var origSetter = el.focusBorderUpdateHooks[setterKey];
-        if (origSetter === el._defaultSetter) {
-            delete el[setterKey];
-        }
-        else {
-            el[setterKey] = origSetter;
-        }
-    });
-    delete el.focusBorderUpdateHooks;
-}
-/*
- * Add focus border functionality to SVGElements. Draws a new rect on top of
- * element around its bounding box. This is used by multiple components.
- */
-extend(SVGElement.prototype, {
     /**
+     * Add focus border functionality to SVGElements. Draws a new rect on top of
+     * element around its bounding box. This is used by multiple components.
+     *
      * @private
      * @function Highcharts.SVGElement#addFocusBorder
      *
@@ -113,7 +145,7 @@ extend(SVGElement.prototype, {
      *
      * @param {SVGAttributes} attribs
      */
-    addFocusBorder: function (margin, attribs) {
+    function svgElementAddFocusBorder(margin, attribs) {
         // Allow updating by just adding new border
         if (this.focusBorder) {
             this.removeFocusBorder();
@@ -188,75 +220,88 @@ extend(SVGElement.prototype, {
                 'stroke-width': attribs && attribs.strokeWidth
             });
         }
-        addUpdateFocusBorderHooks(this, margin, attribs);
-        addDestroyFocusBorderHook(this);
-    },
+        avgElementAddUpdateFocusBorderHooks(this, margin, attribs);
+        svgElementAddDestroyFocusBorderHook(this);
+    }
     /**
+     * Add hooks to update the focus border of an element when the element
+     * size/position is updated, unless already added.
+     * @private
+     * @param el Element to add update hooks to
+     * @param updateParams Parameters to pass through to addFocusBorder when updating.
+     */
+    function avgElementAddUpdateFocusBorderHooks(el) {
+        var updateParams = [];
+        for (var _i = 1; _i < arguments.length; _i++) {
+            updateParams[_i - 1] = arguments[_i];
+        }
+        if (el.focusBorderUpdateHooks) {
+            return;
+        }
+        el.focusBorderUpdateHooks = {};
+        svgElementBorderUpdateTriggers.forEach(function (trigger) {
+            var setterKey = trigger + 'Setter';
+            var origSetter = el[setterKey] || el._defaultSetter;
+            el.focusBorderUpdateHooks[setterKey] = origSetter;
+            el[setterKey] = function () {
+                var ret = origSetter.apply(el, arguments);
+                el.addFocusBorder.apply(el, updateParams);
+                return ret;
+            };
+        });
+    }
+    /**
+     * Remove hook from SVG element added by addDestroyFocusBorderHook, if
+     * existing.
+     * @private
+     * @param el Element to remove destroy hook from
+     */
+    function svgElementRemoveDestroyFocusBorderHook(el) {
+        if (!el.focusBorderDestroyHook) {
+            return;
+        }
+        el.destroy = el.focusBorderDestroyHook;
+        delete el.focusBorderDestroyHook;
+    }
+    /**
+     * Add focus border functionality to SVGElements. Draws a new rect on top of
+     * element around its bounding box. This is used by multiple components.
      * @private
      * @function Highcharts.SVGElement#removeFocusBorder
      */
-    removeFocusBorder: function () {
-        removeUpdateFocusBorderHooks(this);
-        removeDestroyFocusBorderHook(this);
+    function svgElementRemoveFocusBorder() {
+        svgElementRemoveUpdateFocusBorderHooks(this);
+        svgElementRemoveDestroyFocusBorderHook(this);
         if (this.focusBorder) {
             this.focusBorder.destroy();
             delete this.focusBorder;
         }
     }
-});
-/**
- * Redraws the focus border on the currently focused element.
- *
- * @private
- * @function Highcharts.Chart#renderFocusBorder
- */
-Chart.prototype.renderFocusBorder = function () {
-    var focusElement = this.focusElement, focusBorderOptions = this.options.accessibility.keyboardNavigation.focusBorder;
-    if (focusElement) {
-        focusElement.removeFocusBorder();
-        if (focusBorderOptions.enabled) {
-            focusElement.addFocusBorder(focusBorderOptions.margin, {
-                stroke: focusBorderOptions.style.color,
-                strokeWidth: focusBorderOptions.style.lineWidth,
-                r: focusBorderOptions.style.borderRadius
-            });
+    /**
+     * Remove hooks from SVG element added by addUpdateFocusBorderHooks, if
+     * existing.
+     * @private
+     * @param el Element to remove update hooks from
+     */
+    function svgElementRemoveUpdateFocusBorderHooks(el) {
+        if (!el.focusBorderUpdateHooks) {
+            return;
         }
+        Object.keys(el.focusBorderUpdateHooks).forEach(function (setterKey) {
+            var origSetter = el.focusBorderUpdateHooks[setterKey];
+            if (origSetter === el._defaultSetter) {
+                delete el[setterKey];
+            }
+            else {
+                el[setterKey] = origSetter;
+            }
+        });
+        delete el.focusBorderUpdateHooks;
     }
-};
-/**
- * Set chart's focus to an SVGElement. Calls focus() on it, and draws the focus
- * border. This is used by multiple components.
- *
- * @private
- * @function Highcharts.Chart#setFocusToElement
+})(FocusBorderComposition || (FocusBorderComposition = {}));
+/* *
  *
- * @param {Highcharts.SVGElement} svgElement
- *        Element to draw the border around.
+ *  Default Export
  *
- * @param {SVGDOMElement|HTMLDOMElement} [focusElement]
- *        If supplied, it draws the border around svgElement and sets the focus
- *        to focusElement.
- */
-Chart.prototype.setFocusToElement = function (svgElement, focusElement) {
-    var focusBorderOptions = this.options.accessibility.keyboardNavigation.focusBorder, browserFocusElement = focusElement || svgElement.element;
-    // Set browser focus if possible
-    if (browserFocusElement &&
-        browserFocusElement.focus) {
-        // If there is no focusin-listener, add one to work around Edge issue
-        // where Narrator is not reading out points despite calling focus().
-        if (!(browserFocusElement.hcEvents &&
-            browserFocusElement.hcEvents.focusin)) {
-            addEvent(browserFocusElement, 'focusin', function () { });
-        }
-        browserFocusElement.focus();
-        // Hide default focus ring
-        if (focusBorderOptions.hideBrowserFocusOutline) {
-            browserFocusElement.style.outline = 'none';
-        }
-    }
-    if (this.focusElement) {
-        this.focusElement.removeFocusBorder();
-    }
-    this.focusElement = svgElement;
-    this.renderFocusBorder();
-};
+ * */
+export default FocusBorderComposition;

package/es-modules/Accessibility/HighContrastMode.js

@@ -12,72 +12,84 @@
 'use strict';
 import H from '../Core/Globals.js';
 var doc = H.doc, isMS = H.isMS, win = H.win;
-var whcm = {
-    /**
-     * Detect WHCM in the browser.
-     *
-     * @function Highcharts#isHighContrastModeActive
-     * @private
-     * @return {boolean} Returns true if the browser is in High Contrast mode.
-     */
-    isHighContrastModeActive: function () {
-        // Use media query on Edge, but not on IE
-        var isEdge = /(Edg)/.test(win.navigator.userAgent);
-        if (win.matchMedia && isEdge) {
-            return win.matchMedia('(-ms-high-contrast: active)').matches;
-        }
-        // Test BG image for IE
-        if (isMS && win.getComputedStyle) {
-            var testDiv = doc.createElement('div');
-            var imageSrc = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
-            testDiv.style.backgroundImage = "url(" + 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;
-    },
-    /**
-     * Force high contrast theme for the chart. The default theme is defined in
-     * a separate file.
-     *
-     * @function Highcharts#setHighContrastTheme
-     * @private
-     * @param {Highcharts.AccessibilityChart} chart The chart to set the theme of.
-     * @return {void}
-     */
-    setHighContrastTheme: function (chart) {
-        // We might want to add additional functionality here in the future for
-        // storing the old state so that we can reset the theme if HC mode is
-        // disabled. For now, the user will have to reload the page.
-        chart.highContrastModeActive = true;
-        // Apply theme to chart
-        var theme = (chart.options.accessibility.highContrastTheme);
-        chart.update(theme, false);
-        // Force series colors (plotOptions is not enough)
-        chart.series.forEach(function (s) {
-            var plotOpts = theme.plotOptions[s.type] || {};
-            s.update({
-                color: plotOpts.color || 'windowText',
-                colors: [plotOpts.color || 'windowText'],
-                borderColor: plotOpts.borderColor || 'window'
-            });
-            // Force point colors if existing
-            s.points.forEach(function (p) {
-                if (p.options && p.options.color) {
-                    p.update({
-                        color: plotOpts.color || 'windowText',
-                        borderColor: plotOpts.borderColor || 'window'
-                    }, false);
-                }
-            });
-        });
-        // The redraw for each series and after is required for 3D pie
-        // (workaround)
-        chart.redraw();
+/* *
+ *
+ *  Functions
+ *
+ * */
+/**
+ * Detect WHCM in the browser.
+ *
+ * @function Highcharts#isHighContrastModeActive
+ * @private
+ * @return {boolean} Returns true if the browser is in High Contrast mode.
+ */
+function isHighContrastModeActive() {
+    // Use media query on Edge, but not on IE
+    var isEdge = /(Edg)/.test(win.navigator.userAgent);
+    if (win.matchMedia && isEdge) {
+        return win.matchMedia('(-ms-high-contrast: active)').matches;
+    }
+    // Test BG image for IE
+    if (isMS && win.getComputedStyle) {
+        var testDiv = doc.createElement('div');
+        var imageSrc = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
+        testDiv.style.backgroundImage = "url(" + 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;
+}
+/**
+ * Force high contrast theme for the chart. The default theme is defined in
+ * a separate file.
+ *
+ * @function Highcharts#setHighContrastTheme
+ * @private
+ * @param {Highcharts.AccessibilityChart} chart The chart to set the theme of.
+ * @return {void}
+ */
+function setHighContrastTheme(chart) {
+    // We might want to add additional functionality here in the future for
+    // storing the old state so that we can reset the theme if HC mode is
+    // disabled. For now, the user will have to reload the page.
+    chart.highContrastModeActive = true;
+    // Apply theme to chart
+    var theme = (chart.options.accessibility.highContrastTheme);
+    chart.update(theme, false);
+    // Force series colors (plotOptions is not enough)
+    chart.series.forEach(function (s) {
+        var plotOpts = theme.plotOptions[s.type] || {};
+        s.update({
+            color: plotOpts.color || 'windowText',
+            colors: [plotOpts.color || 'windowText'],
+            borderColor: plotOpts.borderColor || 'window'
+        });
+        // Force point colors if existing
+        s.points.forEach(function (p) {
+            if (p.options && p.options.color) {
+                p.update({
+                    color: plotOpts.color || 'windowText',
+                    borderColor: plotOpts.borderColor || 'window'
+                }, false);
+            }
+        });
+    });
+    // The redraw for each series and after is required for 3D pie
+    // (workaround)
+    chart.redraw();
+}
+/* *
+ *
+ *  Default Export
+ *
+ * */
+var whcm = {
+    isHighContrastModeActive: isHighContrastModeActive,
+    setHighContrastTheme: setHighContrastTheme
 };
 export default whcm;

package/es-modules/Accessibility/HighContrastTheme.js

@@ -10,6 +10,11 @@
  *
  * */
 'use strict';
+/* *
+ *
+ *  Theme
+ *
+ * */
 var theme = {
     chart: {
         backgroundColor: 'window'
@@ -208,4 +213,9 @@ var theme = {
         trackBorderColor: 'windowText'
     }
 };
+/* *
+ *
+ *  Default Export
+ *
+ * */
 export default theme;