highcharts 9.2.2 → 9.3.3

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
      *

package/es-modules/Accessibility/ProxyElement.js

@@ -0,0 +1,218 @@
+/* *
+ *
+ *  (c) 2009-2021 Øystein Moseng
+ *
+ *  Proxy elements are used to shadow SVG elements in HTML for assistive
+ *  technology, such as screen readers or voice input software.
+ *
+ *  The ProxyElement class represents such an element, and deals with
+ *  overlay positioning and mirroring events for the target.
+ *
+ *  License: www.highcharts.com/license
+ *
+ *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
+ *
+ * */
+'use strict';
+import H from '../Core/Globals.js';
+var doc = H.doc;
+import U from '../Core/Utilities.js';
+var attr = U.attr, css = U.css, merge = U.merge;
+import EventProvider from './Utils/EventProvider.js';
+import ChartUtilities from './Utils/ChartUtilities.js';
+var fireEventOnWrappedOrUnwrappedElement = ChartUtilities.fireEventOnWrappedOrUnwrappedElement;
+import HTMLUtilities from './Utils/HTMLUtilities.js';
+var cloneMouseEvent = HTMLUtilities.cloneMouseEvent, cloneTouchEvent = HTMLUtilities.cloneTouchEvent, getFakeMouseEvent = HTMLUtilities.getFakeMouseEvent, removeElement = HTMLUtilities.removeElement;
+/* *
+ *
+ *  Class
+ *
+ * */
+/**
+ * Represents a proxy element that overlays a target and relays events
+ * to its target.
+ *
+ * @private
+ * @class
+ */
+var ProxyElement = /** @class */ (function () {
+    /* *
+     *
+     *  Constructor
+     *
+     * */
+    function ProxyElement(chart, target, groupType, attributes) {
+        this.chart = chart;
+        this.target = target;
+        this.groupType = groupType;
+        var isListItem = groupType === 'ul';
+        this.eventProvider = new EventProvider();
+        var wrapperEl = isListItem ? doc.createElement('li') : null;
+        var btnEl = this.buttonElement = doc.createElement('button');
+        if (!chart.styledMode) {
+            this.hideButtonVisually(btnEl);
+        }
+        if (wrapperEl) {
+            if (isListItem && !chart.styledMode) {
+                wrapperEl.style.listStyle = 'none';
+            }
+            wrapperEl.appendChild(btnEl);
+            this.element = wrapperEl;
+        }
+        else {
+            this.element = btnEl;
+        }
+        this.updateTarget(target, attributes);
+    }
+    /* *
+     *
+     *  Functions
+     *
+     * */
+    /* eslint-disable valid-jsdoc */
+    /**
+     * Fake a click event on the target.
+     */
+    ProxyElement.prototype.click = function () {
+        var pos = this.getTargetPosition();
+        pos.x += pos.width / 2;
+        pos.y += pos.height / 2;
+        var fakeEventObject = getFakeMouseEvent('click', pos);
+        fireEventOnWrappedOrUnwrappedElement(this.target.click, fakeEventObject);
+    };
+    /**
+     * Update the target to be proxied. The position and events are updated to
+     * match the new target.
+     * @param target The new target definition
+     * @param attributes New HTML attributes to apply to the button. Set an
+     * attribute to null to remove.
+     */
+    ProxyElement.prototype.updateTarget = function (target, attributes) {
+        this.target = target;
+        this.updateCSSClassName();
+        attr(this.buttonElement, merge({
+            'aria-label': this.getTargetAttr(target.click, 'aria-label')
+        }, attributes));
+        this.eventProvider.removeAddedEvents();
+        this.addProxyEventsToButton(this.buttonElement, target.click);
+        this.refreshPosition();
+    };
+    /**
+     * Refresh the position of the proxy element to match the current target
+     */
+    ProxyElement.prototype.refreshPosition = function () {
+        var bBox = this.getTargetPosition();
+        css(this.buttonElement, {
+            width: (bBox.width || 1) + 'px',
+            height: (bBox.height || 1) + 'px',
+            left: (Math.round(bBox.x) || 0) + 'px',
+            top: (Math.round(bBox.y) || 0) + 'px'
+        });
+    };
+    /**
+     * Remove button from DOM, and clear events.
+     */
+    ProxyElement.prototype.remove = function () {
+        this.eventProvider.removeAddedEvents();
+        removeElement(this.element);
+    };
+    // -------------------------- private ------------------------------------
+    /**
+     * Update the CSS class name to match target
+     */
+    ProxyElement.prototype.updateCSSClassName = function () {
+        var stringHasNoTooltip = function (s) { return (s.indexOf('highcharts-no-tooltip') > -1); };
+        var legend = this.chart.legend;
+        var groupDiv = legend.group && legend.group.div;
+        var noTooltipOnGroup = stringHasNoTooltip(groupDiv && groupDiv.className || '');
+        var targetClassName = this.getTargetAttr(this.target.click, 'class') || '';
+        var noTooltipOnTarget = stringHasNoTooltip(targetClassName);
+        this.buttonElement.className = noTooltipOnGroup || noTooltipOnTarget ?
+            'highcharts-a11y-proxy-button highcharts-no-tooltip' :
+            'highcharts-a11y-proxy-button';
+    };
+    /**
+     * Mirror events for a proxy button to a target
+     */
+    ProxyElement.prototype.addProxyEventsToButton = function (button, target) {
+        var _this = this;
+        [
+            'click', 'touchstart', 'touchend', 'touchcancel', 'touchmove',
+            'mouseover', 'mouseenter', 'mouseleave', 'mouseout'
+        ].forEach(function (evtType) {
+            var isTouchEvent = evtType.indexOf('touch') === 0;
+            _this.eventProvider.addEvent(button, evtType, function (e) {
+                var clonedEvent = isTouchEvent ?
+                    cloneTouchEvent(e) :
+                    cloneMouseEvent(e);
+                if (target) {
+                    fireEventOnWrappedOrUnwrappedElement(target, clonedEvent);
+                }
+                e.stopPropagation();
+                // #9682, #15318: Touch scrolling didnt work when touching
+                // proxy
+                if (!isTouchEvent) {
+                    e.preventDefault();
+                }
+            }, { passive: false });
+        });
+    };
+    /**
+     * Set visually hidden style on a proxy button
+     */
+    ProxyElement.prototype.hideButtonVisually = function (button) {
+        css(button, {
+            borderWidth: 0,
+            backgroundColor: 'transparent',
+            cursor: 'pointer',
+            outline: 'none',
+            opacity: 0.001,
+            filter: 'alpha(opacity=1)',
+            zIndex: 999,
+            overflow: 'hidden',
+            padding: 0,
+            margin: 0,
+            display: 'block',
+            position: 'absolute',
+            '-ms-filter': 'progid:DXImageTransform.Microsoft.Alpha(Opacity=1)'
+        });
+    };
+    /**
+     * Get the position relative to chart container for the target
+     */
+    ProxyElement.prototype.getTargetPosition = function () {
+        var clickTarget = this.target.click;
+        // We accept both DOM elements and wrapped elements as click targets.
+        var clickTargetElement = clickTarget.element ?
+            clickTarget.element :
+            clickTarget;
+        var posElement = this.target.visual || clickTargetElement;
+        var chartDiv = this.chart.renderTo;
+        if (chartDiv && posElement && posElement.getBoundingClientRect) {
+            var rectEl = posElement.getBoundingClientRect(), rectDiv = chartDiv.getBoundingClientRect();
+            return {
+                x: rectEl.left - rectDiv.left,
+                y: rectEl.top - rectDiv.top,
+                width: rectEl.right - rectEl.left,
+                height: rectEl.bottom - rectEl.top
+            };
+        }
+        return { x: 0, y: 0, width: 1, height: 1 };
+    };
+    /**
+     * Get an attribute value of a target
+     */
+    ProxyElement.prototype.getTargetAttr = function (target, key) {
+        if (target.element) {
+            return target.element.getAttribute(key);
+        }
+        return target.getAttribute(key);
+    };
+    return ProxyElement;
+}());
+/* *
+ *
+ *  Default Export
+ *
+ * */
+export default ProxyElement;

package/es-modules/Accessibility/ProxyProvider.js

@@ -0,0 +1,302 @@
+/* *
+ *
+ *  (c) 2009-2021 Øystein Moseng
+ *
+ *  Proxy elements are used to shadow SVG elements in HTML for assistive
+ *  technology, such as screen readers or voice input software.
+ *
+ *  The ProxyProvider keeps track of all proxy elements of the a11y module,
+ *  and updating their order and positioning.
+ *
+ *  License: www.highcharts.com/license
+ *
+ *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
+ *
+ * */
+'use strict';
+import H from '../Core/Globals.js';
+var doc = H.doc;
+import U from '../Core/Utilities.js';
+var attr = U.attr, css = U.css;
+import CU from './Utils/ChartUtilities.js';
+var unhideChartElementFromAT = CU.unhideChartElementFromAT;
+import DOMElementProvider from './Utils/DOMElementProvider.js';
+import HU from './Utils/HTMLUtilities.js';
+var removeElement = HU.removeElement, removeChildNodes = HU.removeChildNodes;
+import ProxyElement from './ProxyElement.js';
+/* *
+ *
+ *  Class
+ *
+ * */
+/**
+ * Keeps track of all proxy elements and proxy groups.
+ *
+ * @private
+ * @class
+ */
+var ProxyProvider = /** @class */ (function () {
+    /* *
+     *
+     *  Constructor
+     *
+     * */
+    function ProxyProvider(chart) {
+        this.chart = chart;
+        this.domElementProvider = new DOMElementProvider();
+        this.groups = {};
+        this.groupOrder = [];
+        this.beforeChartProxyPosContainer = this.createProxyPosContainer('before');
+        this.afterChartProxyPosContainer = this.createProxyPosContainer('after');
+        this.update();
+    }
+    /* *
+     *
+     *  Functions
+     *
+     * */
+    /* eslint-disable */
+    /**
+     * Add a new proxy element to a group, proxying a target control.
+     */
+    ProxyProvider.prototype.addProxyElement = function (groupKey, target, attributes) {
+        var group = this.groups[groupKey];
+        if (!group) {
+            throw new Error('ProxyProvider.addProxyElement: Invalid group key ' + groupKey);
+        }
+        var proxy = new ProxyElement(this.chart, target, group.type, attributes);
+        group.proxyContainerElement.appendChild(proxy.element);
+        group.proxyElements.push(proxy);
+        return proxy;
+    };
+    /**
+     * Create a group that will contain proxy elements. The group order is
+     * automatically updated according to the last group order keys.
+     */
+    ProxyProvider.prototype.addGroup = function (groupKey, groupType, attributes) {
+        if (this.groups[groupKey]) {
+            return;
+        }
+        var proxyContainer = this.domElementProvider.createElement(groupType);
+        // If we want to add a role to the group, and still use e.g.
+        // a list group, we need a wrapper div.
+        var groupElement;
+        if (attributes && attributes.role && groupType !== 'div') {
+            groupElement = this.domElementProvider.createElement('div');
+            groupElement.appendChild(proxyContainer);
+        }
+        else {
+            groupElement = proxyContainer;
+        }
+        groupElement.className = 'highcharts-a11y-proxy-group highcharts-a11y-proxy-group-' +
+            groupKey.replace(/\W/g, '-');
+        this.groups[groupKey] = {
+            proxyContainerElement: proxyContainer,
+            groupElement: groupElement,
+            type: groupType,
+            proxyElements: []
+        };
+        attr(groupElement, attributes || {});
+        if (groupType === 'ul') {
+            proxyContainer.setAttribute('role', 'list'); // Needed for webkit
+        }
+        // Add the group to the end by default, and perhaps then we
+        // won't have to reorder the whole set of groups.
+        this.afterChartProxyPosContainer.appendChild(groupElement);
+        this.updateGroupOrder(this.groupOrder);
+    };
+    /**
+     * Update HTML attributes of a group.
+     */
+    ProxyProvider.prototype.updateGroupAttrs = function (groupKey, attributes) {
+        var group = this.groups[groupKey];
+        if (!group) {
+            throw new Error('ProxyProvider.updateGroupAttrs: Invalid group key ' + groupKey);
+        }
+        attr(group.groupElement, attributes);
+    };
+    /**
+     * Reorder the proxy groups.
+     *
+     * The group key "series" refers to the chart's data points / <svg> element.
+     * This is so that the keyboardNavigation.order option can be used to
+     * determine the proxy group order.
+     */
+    ProxyProvider.prototype.updateGroupOrder = function (groupKeys) {
+        var _this = this;
+        // Store so that we can update order when a new group is created
+        this.groupOrder = groupKeys.slice();
+        // Don't unnecessarily reorder, because keyboard focus is lost
+        if (this.isDOMOrderGroupOrder()) {
+            return;
+        }
+        var seriesIx = groupKeys.indexOf('series');
+        var beforeKeys = seriesIx > -1 ? groupKeys.slice(0, seriesIx) : groupKeys;
+        var afterKeys = seriesIx > -1 ? groupKeys.slice(seriesIx + 1) : [];
+        // Store focused element since it will be lost when reordering
+        var activeElement = doc.activeElement;
+        // Add groups to correct container
+        ['before', 'after'].forEach(function (pos) {
+            var posContainer = _this[pos === 'before' ?
+                'beforeChartProxyPosContainer' :
+                'afterChartProxyPosContainer'];
+            var keys = pos === 'before' ? beforeKeys : afterKeys;
+            removeChildNodes(posContainer);
+            keys.forEach(function (groupKey) {
+                var group = _this.groups[groupKey];
+                if (group) {
+                    posContainer.appendChild(group.groupElement);
+                }
+            });
+        });
+        // Attempt to restore focus after reordering, but note that this may
+        // cause screen readers re-announcing the button.
+        if ((this.beforeChartProxyPosContainer.contains(activeElement) ||
+            this.afterChartProxyPosContainer.contains(activeElement)) &&
+            activeElement && activeElement.focus) {
+            activeElement.focus();
+        }
+    };
+    /**
+     * Remove all proxy elements in a group
+     */
+    ProxyProvider.prototype.clearGroup = function (groupKey) {
+        var group = this.groups[groupKey];
+        if (!group) {
+            throw new Error('ProxyProvider.clearGroup: Invalid group key ' + groupKey);
+        }
+        removeChildNodes(group.proxyContainerElement);
+    };
+    /**
+     * Remove a group from the DOM and from the proxy provider's group list.
+     * All child elements are removed.
+     * If the group does not exist, nothing happens.
+     */
+    ProxyProvider.prototype.removeGroup = function (groupKey) {
+        var group = this.groups[groupKey];
+        if (group) {
+            removeElement(group.groupElement);
+            delete this.groups[groupKey];
+        }
+    };
+    /**
+     * Update the position and order of all proxy groups and elements
+     */
+    ProxyProvider.prototype.update = function () {
+        this.updatePosContainerPositions();
+        this.updateGroupOrder(this.groupOrder);
+        this.updateProxyElementPositions();
+    };
+    /**
+     * Update all proxy element positions
+     */
+    ProxyProvider.prototype.updateProxyElementPositions = function () {
+        Object.keys(this.groups).forEach(this.updateGroupProxyElementPositions.bind(this));
+    };
+    /**
+     * Update a group's proxy elements' positions.
+     * If the group does not exist, nothing happens.
+     */
+    ProxyProvider.prototype.updateGroupProxyElementPositions = function (groupKey) {
+        var group = this.groups[groupKey];
+        if (group) {
+            group.proxyElements.forEach(function (el) { return el.refreshPosition(); });
+        }
+    };
+    /**
+     * Remove all added elements
+     */
+    ProxyProvider.prototype.destroy = function () {
+        this.domElementProvider.destroyCreatedElements();
+    };
+    // -------------------------- private ------------------------------------
+    /**
+     * Create and return a pos container element (the overall containers for
+     * the proxy groups).
+     */
+    ProxyProvider.prototype.createProxyPosContainer = function (classNamePostfix) {
+        var el = this.domElementProvider.createElement('div');
+        el.setAttribute('aria-hidden', 'false');
+        el.className = 'highcharts-a11y-proxy-container' + (classNamePostfix ? '-' + classNamePostfix : '');
+        css(el, {
+            top: '0',
+            left: '0'
+        });
+        if (!this.chart.styledMode) {
+            el.style.whiteSpace = 'nowrap';
+            el.style.position = 'absolute';
+        }
+        return el;
+    };
+    /**
+     * Get an array of group keys that corresponds to the current group order
+     * in the DOM.
+     */
+    ProxyProvider.prototype.getCurrentGroupOrderInDOM = function () {
+        var _this = this;
+        var getGroupKeyFromElement = function (el) {
+            var allGroups = Object.keys(_this.groups);
+            var i = allGroups.length;
+            while (i--) {
+                var groupKey = allGroups[i];
+                var group = _this.groups[groupKey];
+                if (group && el === group.groupElement) {
+                    return groupKey;
+                }
+            }
+        };
+        var getChildrenGroupOrder = function (el) {
+            var childrenOrder = [];
+            var children = el.children;
+            for (var i = 0; i < children.length; ++i) {
+                var groupKey = getGroupKeyFromElement(children[i]);
+                if (groupKey) {
+                    childrenOrder.push(groupKey);
+                }
+            }
+            return childrenOrder;
+        };
+        var before = getChildrenGroupOrder(this.beforeChartProxyPosContainer);
+        var after = getChildrenGroupOrder(this.afterChartProxyPosContainer);
+        before.push('series');
+        return before.concat(after);
+    };
+    /**
+     * Check if the current DOM order matches the current group order, so that
+     * a reordering/update is unnecessary.
+     */
+    ProxyProvider.prototype.isDOMOrderGroupOrder = function () {
+        var _this = this;
+        var domOrder = this.getCurrentGroupOrderInDOM();
+        var groupOrderWithGroups = this.groupOrder.filter(function (x) { return x === 'series' || !!_this.groups[x]; });
+        var i = domOrder.length;
+        if (i !== groupOrderWithGroups.length) {
+            return false;
+        }
+        while (i--) {
+            if (domOrder[i] !== groupOrderWithGroups[i]) {
+                return false;
+            }
+        }
+        return true;
+    };
+    /**
+     * Update the DOM positions of the before/after proxy
+     * positioning containers for the groups.
+     */
+    ProxyProvider.prototype.updatePosContainerPositions = function () {
+        var chart = this.chart;
+        var rendererSVGEl = chart.renderer.box;
+        chart.container.insertBefore(this.afterChartProxyPosContainer, rendererSVGEl.nextSibling);
+        chart.container.insertBefore(this.beforeChartProxyPosContainer, rendererSVGEl);
+        unhideChartElementFromAT(this.chart, this.afterChartProxyPosContainer);
+        unhideChartElementFromAT(this.chart, this.beforeChartProxyPosContainer);
+    };
+    return ProxyProvider;
+}());
+/* *
+ *
+ *  Export Default
+ *
+ * */
+export default ProxyProvider;

package/es-modules/Accessibility/Utils/Announcer.js

@@ -10,12 +10,14 @@
  *
  * */
 'use strict';
-import H from '../../Core/Globals.js';
 import AST from '../../Core/Renderer/HTML/AST.js';
-var doc = H.doc;
 import DOMElementProvider from './DOMElementProvider.js';
-import HTMLUtilities from './HTMLUtilities.js';
-var setElAttrs = HTMLUtilities.setElAttrs, visuallyHideElement = HTMLUtilities.visuallyHideElement;
+import H from '../../Core/Globals.js';
+var doc = H.doc;
+import HU from './HTMLUtilities.js';
+var addClass = HU.addClass, visuallyHideElement = HU.visuallyHideElement;
+import U from '../../Core/Utilities.js';
+var attr = U.attr;
 /* *
  *
  *  Class
@@ -49,27 +51,32 @@ var Announcer = /** @class */ (function () {
             clearTimeout(this.clearAnnouncementRegionTimer);
         }
         this.clearAnnouncementRegionTimer = setTimeout(function () {
-            _this.announceRegion.innerHTML = '';
+            _this.announceRegion.innerHTML = AST.emptyHTML;
             delete _this.clearAnnouncementRegionTimer;
         }, 1000);
     };
     Announcer.prototype.addAnnounceRegion = function (type) {
-        var chartContainer = this.chart.announcerContainer || this.createAnnouncerContainer(), div = this.domElementProvider.createElement('div');
-        setElAttrs(div, {
+        var chartContainer = (this.chart.announcerContainer || this.createAnnouncerContainer()), div = this.domElementProvider.createElement('div');
+        attr(div, {
             'aria-hidden': false,
             'aria-live': type
         });
-        visuallyHideElement(div);
+        if (this.chart.styledMode) {
+            addClass(div, 'highcharts-visually-hidden');
+        }
+        else {
+            visuallyHideElement(div);
+        }
         chartContainer.appendChild(div);
         return div;
     };
     Announcer.prototype.createAnnouncerContainer = function () {
         var chart = this.chart, container = doc.createElement('div');
-        setElAttrs(container, {
+        attr(container, {
             'aria-hidden': false,
-            style: 'position:relative',
             'class': 'highcharts-announcer-container'
         });
+        container.style.position = 'relative';
         chart.renderTo.insertBefore(container, chart.renderTo.firstChild);
         chart.announcerContainer = container;
         return container;