highcharts 9.2.2 → 9.3.0

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

@@ -17,7 +17,8 @@ var format = F.format;
 import H from '../../Core/Globals.js';
 var doc = H.doc;
 import U from '../../Core/Utilities.js';
-var extend = U.extend, pick = U.pick;
+var attr = U.attr, extend = U.extend, pick = U.pick;
+import A11yI18n from '../A11yI18n.js';
 import AccessibilityComponent from '../AccessibilityComponent.js';
 import Announcer from '../Utils/Announcer.js';
 import AnnotationsA11y from './AnnotationsA11y.js';
@@ -25,7 +26,7 @@ var getAnnotationsInfoHTML = AnnotationsA11y.getAnnotationsInfoHTML;
 import ChartUtilities from '../Utils/ChartUtilities.js';
 var getAxisDescription = ChartUtilities.getAxisDescription, getAxisRangeDescription = ChartUtilities.getAxisRangeDescription, getChartTitle = ChartUtilities.getChartTitle, unhideChartElementFromAT = ChartUtilities.unhideChartElementFromAT;
 import HTMLUtilities from '../Utils/HTMLUtilities.js';
-var addClass = HTMLUtilities.addClass, getElement = HTMLUtilities.getElement, getHeadingTagNameForElement = HTMLUtilities.getHeadingTagNameForElement, setElAttrs = HTMLUtilities.setElAttrs, stripHTMLTagsFromString = HTMLUtilities.stripHTMLTagsFromString, visuallyHideElement = HTMLUtilities.visuallyHideElement;
+var addClass = HTMLUtilities.addClass, getElement = HTMLUtilities.getElement, getHeadingTagNameForElement = HTMLUtilities.getHeadingTagNameForElement, stripHTMLTagsFromString = HTMLUtilities.stripHTMLTagsFromString, visuallyHideElement = HTMLUtilities.visuallyHideElement;
 /* eslint-disable no-invalid-this, valid-jsdoc */
 /**
  * @private
@@ -213,15 +214,32 @@ extend(InfoRegionsComponent.prototype, /** @lends Highcharts.InfoRegionsComponen
      * @param {string} regionKey The name/key of the region to update
      */
     updateScreenReaderSection: function (regionKey) {
-        var chart = this.chart, region = this.screenReaderSections[regionKey], content = region.buildContent(chart), sectionDiv = region.element = (region.element || this.createElement('div')), hiddenDiv = (sectionDiv.firstChild || this.createElement('div'));
-        this.setScreenReaderSectionAttribs(sectionDiv, regionKey);
-        AST.setElementHTML(hiddenDiv, content);
-        sectionDiv.appendChild(hiddenDiv);
-        region.insertIntoDOM(sectionDiv, chart);
-        visuallyHideElement(hiddenDiv);
-        unhideChartElementFromAT(chart, hiddenDiv);
-        if (region.afterInserted) {
-            region.afterInserted();
+        var chart = this.chart;
+        var region = this.screenReaderSections[regionKey];
+        var content = region.buildContent(chart);
+        var sectionDiv = region.element = (region.element || this.createElement('div'));
+        var hiddenDiv = (sectionDiv.firstChild || this.createElement('div'));
+        if (content) {
+            this.setScreenReaderSectionAttribs(sectionDiv, regionKey);
+            AST.setElementHTML(hiddenDiv, content);
+            sectionDiv.appendChild(hiddenDiv);
+            region.insertIntoDOM(sectionDiv, chart);
+            if (chart.styledMode) {
+                addClass(hiddenDiv, 'highcharts-visually-hidden');
+            }
+            else {
+                visuallyHideElement(hiddenDiv);
+            }
+            unhideChartElementFromAT(chart, hiddenDiv);
+            if (region.afterInserted) {
+                region.afterInserted();
+            }
+        }
+        else {
+            if (sectionDiv.parentNode) {
+                sectionDiv.parentNode.removeChild(sectionDiv);
+            }
+            delete region.element;
         }
     },
     /**
@@ -232,7 +250,7 @@ extend(InfoRegionsComponent.prototype, /** @lends Highcharts.InfoRegionsComponen
     setScreenReaderSectionAttribs: function (sectionDiv, regionKey) {
         var labelLangKey = ('accessibility.screenReaderSection.' + regionKey + 'RegionLabel'), chart = this.chart, labelText = chart.langFormat(labelLangKey, { chart: chart, chartTitle: getChartTitle(chart) }), sectionId = 'highcharts-screen-reader-region-' + regionKey + '-' +
             chart.index;
-        setElAttrs(sectionDiv, {
+        attr(sectionDiv, {
             id: sectionId,
             'aria-label': labelText
         });
@@ -249,8 +267,12 @@ extend(InfoRegionsComponent.prototype, /** @lends Highcharts.InfoRegionsComponen
      * @return {string}
      */
     defaultBeforeChartFormatter: function () {
-        var chart = this.chart, format = chart.options.accessibility
-            .screenReaderSection.beforeChartFormat, axesDesc = this.getAxesDescription(), shouldHaveSonifyBtn = (chart.sonify &&
+        var chart = this.chart;
+        var format = chart.options.accessibility.screenReaderSection.beforeChartFormat;
+        if (!format) {
+            return '';
+        }
+        var axesDesc = this.getAxesDescription(), shouldHaveSonifyBtn = (chart.sonify &&
             chart.options.sonification &&
             chart.options.sonification.enabled), sonifyButtonId = 'highcharts-a11y-sonify-data-btn-' +
             chart.index, dataTableButtonId = 'hc-linkto-highcharts-data-table-' +
@@ -268,7 +290,7 @@ extend(InfoRegionsComponent.prototype, /** @lends Highcharts.InfoRegionsComponen
                 this.getDataTableButtonText(dataTableButtonId) : '',
             annotationsTitle: annotationsList ? annotationsTitleStr : '',
             annotationsList: annotationsList
-        }, formattedString = H.i18nFormat(format, context, chart);
+        }, formattedString = A11yI18n.i18nFormat(format, context, chart);
         this.dataTableButtonId = dataTableButtonId;
         this.sonifyButtonId = sonifyButtonId;
         return stripEmptyHTMLTags(formattedString);
@@ -278,10 +300,13 @@ extend(InfoRegionsComponent.prototype, /** @lends Highcharts.InfoRegionsComponen
      * @return {string}
      */
     defaultAfterChartFormatter: function () {
-        var chart = this.chart, format = chart.options.accessibility
-            .screenReaderSection.afterChartFormat, context = {
-            endOfChartMarker: this.getEndOfChartMarkerText()
-        }, formattedString = H.i18nFormat(format, context, chart);
+        var chart = this.chart;
+        var format = chart.options.accessibility.screenReaderSection.afterChartFormat;
+        if (!format) {
+            return '';
+        }
+        var context = { endOfChartMarker: this.getEndOfChartMarkerText() };
+        var formattedString = A11yI18n.i18nFormat(format, context, chart);
         return stripEmptyHTMLTags(formattedString);
     },
     /**
@@ -405,9 +430,7 @@ extend(InfoRegionsComponent.prototype, /** @lends Highcharts.InfoRegionsComponen
             }, 1000); // Delay to let screen reader speak the button press
         };
         if (el && chart) {
-            setElAttrs(el, {
-                tabindex: -1
-            });
+            el.setAttribute('tabindex', -1);
             el.onclick = function (e) {
                 var onPlayAsSoundClick = (chart.options.accessibility &&
                     chart.options.accessibility.screenReaderSection.onPlayAsSoundClick);
@@ -423,7 +446,7 @@ extend(InfoRegionsComponent.prototype, /** @lends Highcharts.InfoRegionsComponen
     initDataTableButton: function (tableButtonId) {
         var el = this.viewDataTableButton = getElement(tableButtonId), chart = this.chart, tableId = tableButtonId.replace('hc-linkto-', '');
         if (el) {
-            setElAttrs(el, {
+            attr(el, {
                 tabindex: -1,
                 'aria-expanded': !!getElement(tableId)
             });

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

@@ -16,11 +16,11 @@ import Chart from '../../Core/Chart/Chart.js';
 import H from '../../Core/Globals.js';
 import Legend from '../../Core/Legend/Legend.js';
 import U from '../../Core/Utilities.js';
-var addEvent = U.addEvent, extend = U.extend, find = U.find, fireEvent = U.fireEvent, isNumber = U.isNumber, pick = U.pick, syncTimeout = U.syncTimeout;
+var addEvent = U.addEvent, extend = U.extend, fireEvent = U.fireEvent, isNumber = U.isNumber, pick = U.pick, syncTimeout = U.syncTimeout;
 import AccessibilityComponent from '../AccessibilityComponent.js';
 import KeyboardNavigationHandler from '../KeyboardNavigationHandler.js';
 import HTMLUtilities from '../Utils/HTMLUtilities.js';
-var removeElement = HTMLUtilities.removeElement, stripHTMLTags = HTMLUtilities.stripHTMLTagsFromString;
+var stripHTMLTags = HTMLUtilities.stripHTMLTagsFromString, addClass = HTMLUtilities.addClass, removeClass = HTMLUtilities.removeClass;
 import ChartUtils from '../Utils/ChartUtilities.js';
 var getChartTitle = ChartUtils.getChartTitle;
 /* eslint-disable no-invalid-this, valid-jsdoc */
@@ -53,15 +53,23 @@ function shouldDoLegendA11y(chart) {
  * @return {boolean}
  */
 Chart.prototype.highlightLegendItem = function (ix) {
-    var items = this.legend.allItems, oldIx = this.accessibility &&
+    var items = this.legend.allItems;
+    var oldIx = this.accessibility &&
         this.accessibility.components.legend.highlightedLegendItemIx;
-    if (items[ix]) {
+    var itemToHighlight = items[ix];
+    if (itemToHighlight) {
         if (isNumber(oldIx) && items[oldIx]) {
             fireEvent(items[oldIx].legendGroup.element, 'mouseout');
         }
         scrollLegendToItem(this.legend, ix);
-        this.setFocusToElement(items[ix].legendItem, items[ix].a11yProxyElement);
-        fireEvent(items[ix].legendGroup.element, 'mouseover');
+        var legendItemProp = itemToHighlight.legendItem;
+        var proxyBtn = itemToHighlight.a11yProxyElement && itemToHighlight.a11yProxyElement.buttonElement;
+        if (legendItemProp && legendItemProp.element && proxyBtn) {
+            this.setFocusToElement(legendItemProp, proxyBtn);
+        }
+        if (itemToHighlight.legendGroup) {
+            fireEvent(itemToHighlight.legendGroup.element, 'mouseover');
+        }
         return true;
     }
     return false;
@@ -70,7 +78,7 @@ Chart.prototype.highlightLegendItem = function (ix) {
 addEvent(Legend, 'afterColorizeItem', function (e) {
     var chart = this.chart, a11yOptions = chart.options.accessibility, legendItem = e.item;
     if (a11yOptions.enabled && legendItem && legendItem.a11yProxyElement) {
-        legendItem.a11yProxyElement.setAttribute('aria-pressed', e.visible ? 'true' : 'false');
+        legendItem.a11yProxyElement.buttonElement.setAttribute('aria-pressed', e.visible ? 'true' : 'false');
     }
 });
 /**
@@ -89,15 +97,16 @@ extend(LegendComponent.prototype, /** @lends Highcharts.LegendComponent */ {
      */
     init: function () {
         var component = this;
-        this.proxyElementsList = [];
         this.recreateProxies();
         // Note: Chart could create legend dynamically, so events can not be
         // tied to the component's chart's current legend.
         this.addEvent(Legend, 'afterScroll', function () {
             if (this.chart === component.chart) {
-                component.updateProxiesPositions();
+                component.proxyProvider.updateGroupProxyElementPositions('legend');
                 component.updateLegendItemProxyVisibility();
-                this.chart.highlightLegendItem(component.highlightedLegendItemIx);
+                if (component.highlightedLegendItemIx > -1) {
+                    this.chart.highlightLegendItem(component.highlightedLegendItemIx);
+                }
             }
         });
         this.addEvent(Legend, 'afterPositionItem', function (e) {
@@ -109,26 +118,48 @@ extend(LegendComponent.prototype, /** @lends Highcharts.LegendComponent */ {
             if (this.chart === component.chart &&
                 this.chart.renderer &&
                 component.recreateProxies()) {
-                syncTimeout(function () { return component.updateProxiesPositions(); }, animObject(pick(this.chart.renderer.globalAnimation, true)).duration);
+                syncTimeout(function () { return component.proxyProvider.updateGroupProxyElementPositions('legend'); }, animObject(pick(this.chart.renderer.globalAnimation, true)).duration);
             }
         });
     },
     /**
+     * Update visibility of legend items when using paged legend
      * @private
      */
     updateLegendItemProxyVisibility: function () {
-        var legend = this.chart.legend, items = legend.allItems || [], curPage = legend.currentPage || 1, clipHeight = legend.clipHeight || 0;
+        var chart = this.chart;
+        var legend = chart.legend;
+        var items = legend.allItems || [];
+        var curPage = legend.currentPage || 1;
+        var clipHeight = legend.clipHeight || 0;
         items.forEach(function (item) {
-            var itemPage = item.pageIx || 0, y = item._legendItemPos ? item._legendItemPos[1] : 0, h = item.legendItem ? Math.round(item.legendItem.getBBox().height) : 0, hide = y + h - legend.pages[itemPage] > clipHeight || itemPage !== curPage - 1;
             if (item.a11yProxyElement) {
-                item.a11yProxyElement.style.visibility = hide ?
-                    'hidden' : 'visible';
+                var hasPages = legend.pages && legend.pages.length;
+                var proxyEl = item.a11yProxyElement.element;
+                var hide = false;
+                if (hasPages) {
+                    var itemPage = item.pageIx || 0;
+                    var y = item._legendItemPos ? item._legendItemPos[1] : 0;
+                    var h = item.legendItem ? Math.round(item.legendItem.getBBox().height) : 0;
+                    hide = y + h - legend.pages[itemPage] > clipHeight || itemPage !== curPage - 1;
+                }
+                if (hide) {
+                    if (chart.styledMode) {
+                        addClass(proxyEl, 'highcharts-a11y-invisible');
+                    }
+                    else {
+                        proxyEl.style.visibility = 'hidden';
+                    }
+                }
+                else {
+                    removeClass(proxyEl, 'highcharts-a11y-invisible');
+                    proxyEl.style.visibility = '';
+                }
             }
         });
     },
     /**
-     * The legend needs updates on every render, in order to update positioning
-     * of the proxy overlays.
+     * @private
      */
     onChartRender: function () {
         if (!shouldDoLegendA11y(this.chart)) {
@@ -138,37 +169,45 @@ extend(LegendComponent.prototype, /** @lends Highcharts.LegendComponent */ {
     /**
      * @private
      */
-    onChartUpdate: function () {
-        this.updateLegendTitle();
-    },
-    /**
-     * @private
-     */
-    updateProxiesPositions: function () {
-        for (var _i = 0, _a = this.proxyElementsList; _i < _a.length; _i++) {
-            var _b = _a[_i], element = _b.element, posElement = _b.posElement;
-            this.updateProxyButtonPosition(element, posElement);
+    highlightAdjacentLegendPage: function (direction) {
+        var chart = this.chart;
+        var legend = chart.legend;
+        var curPageIx = legend.currentPage || 1;
+        var newPageIx = curPageIx + direction;
+        var pages = legend.pages || [];
+        if (newPageIx > 0 && newPageIx <= pages.length) {
+            var len = legend.allItems.length;
+            for (var i = 0; i < len; ++i) {
+                if (legend.allItems[i].pageIx + 1 === newPageIx) {
+                    var res = chart.highlightLegendItem(i);
+                    if (res) {
+                        this.highlightedLegendItemIx = i;
+                    }
+                    return;
+                }
+            }
         }
     },
     /**
      * @private
      */
     updateProxyPositionForItem: function (item) {
-        var proxyRef = find(this.proxyElementsList, function (ref) { return ref.item === item; });
-        if (proxyRef) {
-            this.updateProxyButtonPosition(proxyRef.element, proxyRef.posElement);
+        if (item.a11yProxyElement) {
+            item.a11yProxyElement.refreshPosition();
         }
     },
     /**
+     * Returns false if legend a11y is disabled and proxies were not created,
+     * true otherwise.
      * @private
      */
     recreateProxies: function () {
         this.removeProxies();
         if (shouldDoLegendA11y(this.chart)) {
             this.addLegendProxyGroup();
-            this.addLegendListContainer();
             this.proxyLegendItems();
             this.updateLegendItemProxyVisibility();
+            this.updateLegendTitle();
             return true;
         }
         return false;
@@ -177,8 +216,7 @@ extend(LegendComponent.prototype, /** @lends Highcharts.LegendComponent */ {
      * @private
      */
     removeProxies: function () {
-        removeElement(this.legendProxyGroup);
-        this.proxyElementsList = [];
+        this.proxyProvider.removeGroup('legend');
     },
     /**
      * @private
@@ -194,31 +232,21 @@ extend(LegendComponent.prototype, /** @lends Highcharts.LegendComponent */ {
             legendTitle: legendTitle,
             chartTitle: getChartTitle(chart)
         });
-        if (this.legendProxyGroup) {
-            this.legendProxyGroup.setAttribute('aria-label', legendLabel);
-        }
+        this.proxyProvider.updateGroupAttrs('legend', {
+            'aria-label': legendLabel
+        });
     },
     /**
      * @private
      */
     addLegendProxyGroup: function () {
-        var a11yOptions = this.chart.options.accessibility, groupRole = a11yOptions.landmarkVerbosity === 'all' ?
-            'region' : null;
-        this.legendProxyGroup = this.addProxyGroup({
+        var a11yOptions = this.chart.options.accessibility;
+        var groupRole = a11yOptions.landmarkVerbosity === 'all' ? 'region' : null;
+        this.proxyProvider.addGroup('legend', 'ul', {
             'aria-label': '_placeholder_',
             role: groupRole
         });
     },
-    /**
-     * @private
-     */
-    addLegendListContainer: function () {
-        if (this.legendProxyGroup) {
-            var container = this.legendListContainer = this.createElement('ul');
-            container.style.listStyle = 'none';
-            this.legendProxyGroup.appendChild(container);
-        }
-    },
     /**
      * @private
      */
@@ -236,29 +264,25 @@ extend(LegendComponent.prototype, /** @lends Highcharts.LegendComponent */ {
      * @param {Highcharts.BubbleLegendItem|Point|Highcharts.Series} item
      */
     proxyLegendItem: function (item) {
-        if (!item.legendItem || !item.legendGroup || !this.legendListContainer) {
+        if (!item.legendItem || !item.legendGroup) {
             return;
         }
         var itemLabel = this.chart.langFormat('accessibility.legend.legendItem', {
             chart: this.chart,
             itemName: stripHTMLTags(item.name),
             item: item
-        }), attribs = {
+        });
+        var attribs = {
             tabindex: -1,
             'aria-pressed': item.visible,
             'aria-label': itemLabel
-        }, 
+        };
         // Considers useHTML
-        proxyPositioningElement = item.legendGroup.div ?
-            item.legendItem : item.legendGroup;
-        var listItem = this.createElement('li');
-        this.legendListContainer.appendChild(listItem);
-        item.a11yProxyElement = this.createProxyButton(item.legendItem, listItem, attribs, proxyPositioningElement);
-        this.proxyElementsList.push({
-            item: item,
-            element: item.a11yProxyElement,
-            posElement: proxyPositioningElement
-        });
+        var proxyPositioningElement = item.legendGroup.div ? item.legendItem : item.legendGroup;
+        item.a11yProxyElement = this.proxyProvider.addProxyElement('legend', {
+            click: item.legendItem,
+            visual: proxyPositioningElement.element
+        }, attribs);
     },
     /**
      * Get keyboard navigation handler for this component.
@@ -282,6 +306,14 @@ extend(LegendComponent.prototype, /** @lends Highcharts.LegendComponent */ {
                         }
                         return component.onKbdClick(this);
                     }
+                ],
+                [
+                    [keys.pageDown, keys.pageUp],
+                    function (keyCode) {
+                        var direction = keyCode === keys.pageDown ? 1 : -1;
+                        component.highlightAdjacentLegendPage(direction);
+                        return this.response.success;
+                    }
                 ]
             ],
             validate: function () {
@@ -291,6 +323,7 @@ extend(LegendComponent.prototype, /** @lends Highcharts.LegendComponent */ {
                 return component.onKbdNavigationInit(direction);
             },
             terminate: function () {
+                component.highlightedLegendItemIx = -1;
                 chart.legend.allItems.forEach(function (item) { return item.setState('', true); });
             }
         });
@@ -320,13 +353,12 @@ extend(LegendComponent.prototype, /** @lends Highcharts.LegendComponent */ {
     /**
      * @private
      * @param {Highcharts.KeyboardNavigationHandler} keyboardNavigationHandler
-     * @return {number}
-     * Response code
+     * @return {number} Response code
      */
     onKbdClick: function (keyboardNavigationHandler) {
         var legendItem = this.chart.legend.allItems[this.highlightedLegendItemIx];
         if (legendItem && legendItem.a11yProxyElement) {
-            fireEvent(legendItem.a11yProxyElement, 'click');
+            legendItem.a11yProxyElement.click();
         }
         return keyboardNavigationHandler.response.success;
     },

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

@@ -12,13 +12,13 @@
 'use strict';
 import Chart from '../../Core/Chart/Chart.js';
 import U from '../../Core/Utilities.js';
-var extend = U.extend;
+var attr = U.attr, extend = U.extend;
 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;
+var getFakeMouseEvent = HTMLUtilities.getFakeMouseEvent;
 /* eslint-disable no-invalid-this, valid-jsdoc */
 /**
  * Get the wrapped export button element of a chart.
@@ -78,13 +78,14 @@ Chart.prototype.hideExportMenu = function () {
  * @return {boolean}
  */
 Chart.prototype.highlightExportItem = function (ix) {
-    var listItem = this.exportDivElements && this.exportDivElements[ix], curHighlighted = this.exportDivElements &&
-        this.exportDivElements[this.highlightedExportItemIx], hasSVGFocusSupport;
+    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
-        hasSVGFocusSupport = !!(this.renderTo.getElementsByTagName('g')[0] || {}).focus;
+        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) {
@@ -109,9 +110,9 @@ Chart.prototype.highlightExportItem = function (ix) {
  * @return {boolean}
  */
 Chart.prototype.highlightLastExportItem = function () {
-    var chart = this, i;
+    var chart = this;
     if (chart.exportDivElements) {
-        i = chart.exportDivElements.length;
+        var i = chart.exportDivElements.length;
         while (i--) {
             if (chart.highlightExportItem(i)) {
                 return true;
@@ -154,6 +155,7 @@ extend(MenuComponent.prototype, /** @lends Highcharts.MenuComponent */ {
         this.addEvent(chart, 'exportMenuHidden', function () {
             component.onMenuHidden();
         });
+        this.createProxyGroup();
     },
     /**
      * @private
@@ -183,9 +185,8 @@ extend(MenuComponent.prototype, /** @lends Highcharts.MenuComponent */ {
      * @param {string} stateStr
      */
     setExportButtonExpandedState: function (stateStr) {
-        var button = this.exportButtonProxy;
-        if (button) {
-            button.setAttribute('aria-expanded', stateStr);
+        if (this.exportButtonProxy) {
+            this.exportButtonProxy.buttonElement.setAttribute('aria-expanded', stateStr);
         }
     },
     /**
@@ -193,25 +194,35 @@ extend(MenuComponent.prototype, /** @lends Highcharts.MenuComponent */ {
      * 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 }),
+        this.proxyProvider.clearGroup('chartMenu');
+        this.proxyMenuButton();
+    },
+    /**
+     * @private
+     */
+    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
+     */
+    createProxyGroup: function () {
+        var chart = this.chart;
+        if (chart && this.proxyProvider) {
+            this.proxyProvider.addGroup('chartMenu', 'div');
+        }
+    },
     /**
      * @private
      */
@@ -234,8 +245,11 @@ 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
+                });
             }
         }
     },
@@ -279,9 +293,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
@@ -293,13 +308,15 @@ extend(MenuComponent.prototype, /** @lends Highcharts.MenuComponent */ {
     /**
      * @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;
+        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;
@@ -315,14 +332,15 @@ extend(MenuComponent.prototype, /** @lends Highcharts.MenuComponent */ {
     /**
      * @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;
+        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;
             }
@@ -337,11 +355,12 @@ extend(MenuComponent.prototype, /** @lends Highcharts.MenuComponent */ {
     /**
      * @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;
+        var chart = this.chart;
+        var curHighlightedItem = chart.exportDivElements[chart.highlightedExportItemIx];
+        var exportButtonElement = getExportMenuButtonElement(chart).element;
         if (this.isExportMenuShown) {
             this.fakeClickEvent(curHighlightedItem);
         }