highcharts 9.3.0 → 9.3.1

package/modules/accessibility.src.js

@@ -1,5 +1,5 @@
 /**
- * @license Highcharts JS v9.3.0 (2021-10-21)
+ * @license Highcharts JS v9.3.1 (2021-11-05)
  *
  * Accessibility module
  *
@@ -2112,7 +2112,7 @@
 
         return AnnotationsA11y;
     });
-    _registerModule(_modules, 'Accessibility/Components/InfoRegionsComponent.js', [_modules['Core/Renderer/HTML/AST.js'], _modules['Core/Chart/Chart.js'], _modules['Core/FormatUtilities.js'], _modules['Core/Globals.js'], _modules['Core/Utilities.js'], _modules['Accessibility/A11yI18n.js'], _modules['Accessibility/AccessibilityComponent.js'], _modules['Accessibility/Utils/Announcer.js'], _modules['Accessibility/Components/AnnotationsA11y.js'], _modules['Accessibility/Utils/ChartUtilities.js'], _modules['Accessibility/Utils/HTMLUtilities.js']], function (AST, Chart, F, H, U, A11yI18n, AccessibilityComponent, Announcer, AnnotationsA11y, ChartUtilities, HTMLUtilities) {
+    _registerModule(_modules, 'Accessibility/Components/InfoRegionsComponent.js', [_modules['Accessibility/A11yI18n.js'], _modules['Accessibility/AccessibilityComponent.js'], _modules['Accessibility/Utils/Announcer.js'], _modules['Accessibility/Components/AnnotationsA11y.js'], _modules['Core/Renderer/HTML/AST.js'], _modules['Accessibility/Utils/ChartUtilities.js'], _modules['Core/FormatUtilities.js'], _modules['Core/Globals.js'], _modules['Accessibility/Utils/HTMLUtilities.js'], _modules['Core/Utilities.js']], function (A11yI18n, AccessibilityComponent, Announcer, AnnotationsA11y, AST, CU, F, H, HU, U) {
         /* *
          *
          *  (c) 2009-2021 Øystein Moseng
@@ -2124,27 +2124,47 @@
          *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
          *
          * */
+        var __extends = (this && this.__extends) || (function () {
+                var extendStatics = function (d,
+            b) {
+                    extendStatics = Object.setPrototypeOf ||
+                        ({ __proto__: [] } instanceof Array && function (d,
+            b) { d.__proto__ = b; }) ||
+                        function (d,
+            b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+                return extendStatics(d, b);
+            };
+            return function (d, b) {
+                extendStatics(d, b);
+                function __() { this.constructor = d; }
+                d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+            };
+        })();
+        var getAnnotationsInfoHTML = AnnotationsA11y.getAnnotationsInfoHTML;
+        var getAxisDescription = CU.getAxisDescription,
+            getAxisRangeDescription = CU.getAxisRangeDescription,
+            getChartTitle = CU.getChartTitle,
+            unhideChartElementFromAT = CU.unhideChartElementFromAT;
         var format = F.format;
         var doc = H.doc;
+        var addClass = HU.addClass,
+            getElement = HU.getElement,
+            getHeadingTagNameForElement = HU.getHeadingTagNameForElement,
+            stripHTMLTagsFromString = HU.stripHTMLTagsFromString,
+            visuallyHideElement = HU.visuallyHideElement;
         var attr = U.attr,
-            extend = U.extend,
             pick = U.pick;
-        var getAnnotationsInfoHTML = AnnotationsA11y.getAnnotationsInfoHTML;
-        var getAxisDescription = ChartUtilities.getAxisDescription,
-            getAxisRangeDescription = ChartUtilities.getAxisRangeDescription,
-            getChartTitle = ChartUtilities.getChartTitle,
-            unhideChartElementFromAT = ChartUtilities.unhideChartElementFromAT;
-        var addClass = HTMLUtilities.addClass,
-            getElement = HTMLUtilities.getElement,
-            getHeadingTagNameForElement = HTMLUtilities.getHeadingTagNameForElement,
-            stripHTMLTagsFromString = HTMLUtilities.stripHTMLTagsFromString,
-            visuallyHideElement = HTMLUtilities.visuallyHideElement;
-        /* eslint-disable no-invalid-this, valid-jsdoc */
+        /* *
+         *
+         *  Functions
+         *
+         * */
+        /* eslint-disable valid-jsdoc */
         /**
          * @private
          */
-        function stripEmptyHTMLTags(str) {
-            return str.replace(/<(\w+)[^>]*?>\s*<\/\1>/g, '');
+        function getTableSummary(chart) {
+            return chart.langFormat('accessibility.table.tableSummary', { chart: chart });
         }
         /**
          * @private
@@ -2175,40 +2195,46 @@
                 chart.langFormat('accessibility.chartTypes.default' + multi, context)) + (typeExplaination ? ' ' + typeExplaination : '');
         }
         /**
-         * @private
-         */
-        function getTableSummary(chart) {
-            return chart.langFormat('accessibility.table.tableSummary', { chart: chart });
-        }
-        /**
-         * Return simplified explaination of chart type. Some types will not be familiar
-         * to most users, but in those cases we try to add an explaination of the type.
+         * Return simplified explaination of chart type. Some types will not be
+         * familiar to most users, but in those cases we try to add an explaination
+         * of the type.
          *
          * @private
          * @function Highcharts.Chart#getTypeDescription
          * @param {Array<string>} types The series types in this chart.
          * @return {string} The text description of the chart type.
          */
-        Chart.prototype.getTypeDescription = function (types) {
+        function getTypeDescription(chart, types) {
             var firstType = types[0],
-                firstSeries = this.series && this.series[0] || {},
+                firstSeries = chart.series && chart.series[0] || {},
                 formatContext = {
-                    numSeries: this.series.length,
+                    numSeries: chart.series.length,
                     numPoints: firstSeries.points && firstSeries.points.length,
-                    chart: this,
+                    chart: chart,
                     mapTitle: firstSeries.mapTitle
                 };
             if (!firstType) {
-                return getTypeDescForEmptyChart(this, formatContext);
+                return getTypeDescForEmptyChart(chart, formatContext);
             }
             if (firstType === 'map') {
-                return getTypeDescForMapChart(this, formatContext);
+                return getTypeDescForMapChart(chart, formatContext);
             }
-            if (this.types.length > 1) {
-                return getTypeDescForCombinationChart(this, formatContext);
+            if (chart.types.length > 1) {
+                return getTypeDescForCombinationChart(chart, formatContext);
             }
-            return buildTypeDescriptionFromSeries(this, types, formatContext);
-        };
+            return buildTypeDescriptionFromSeries(chart, types, formatContext);
+        }
+        /**
+         * @private
+         */
+        function stripEmptyHTMLTags(str) {
+            return str.replace(/<(\w+)[^>]*?>\s*<\/\1>/g, '');
+        }
+        /* *
+         *
+         *  Class
+         *
+         * */
         /**
          * The InfoRegionsComponent class
          *
@@ -2216,14 +2242,31 @@
          * @class
          * @name Highcharts.InfoRegionsComponent
          */
-        var InfoRegionsComponent = function () { };
-        InfoRegionsComponent.prototype = new AccessibilityComponent();
-        extend(InfoRegionsComponent.prototype, /** @lends Highcharts.InfoRegionsComponent */ {
+        var InfoRegionsComponent = /** @class */ (function (_super) {
+                __extends(InfoRegionsComponent, _super);
+            function InfoRegionsComponent() {
+                /* *
+                 *
+                 *  Properties
+                 *
+                 * */
+                var _this = _super !== null && _super.apply(this,
+                    arguments) || this;
+                _this.announcer = void 0;
+                _this.screenReaderSections = {};
+                return _this;
+            }
+            /* *
+             *
+             *  Functions
+             *
+             * */
+            /* eslint-disable valid-jsdoc */
             /**
              * Init the component
              * @private
              */
-            init: function () {
+            InfoRegionsComponent.prototype.init = function () {
                 var chart = this.chart;
                 var component = this;
                 this.initRegionsDefinitions();
@@ -2238,11 +2281,11 @@
                     }, 300);
                 });
                 this.announcer = new Announcer(chart, 'assertive');
-            },
+            };
             /**
              * @private
              */
-            initRegionsDefinitions: function () {
+            InfoRegionsComponent.prototype.initRegionsDefinitions = function () {
                 var component = this;
                 this.screenReaderSections = {
                     before: {
@@ -2284,23 +2327,23 @@
                         }
                     }
                 };
-            },
+            };
             /**
              * Called on chart render. Have to update the sections on render, in order
              * to get a11y info from series.
              */
-            onChartRender: function () {
+            InfoRegionsComponent.prototype.onChartRender = function () {
                 var component = this;
                 this.linkedDescriptionElement = this.getLinkedDescriptionElement();
                 this.setLinkedDescriptionAttrs();
                 Object.keys(this.screenReaderSections).forEach(function (regionKey) {
                     component.updateScreenReaderSection(regionKey);
                 });
-            },
+            };
             /**
              * @private
              */
-            getLinkedDescriptionElement: function () {
+            InfoRegionsComponent.prototype.getLinkedDescriptionElement = function () {
                 var chartOptions = this.chart.options,
                     linkedDescOption = chartOptions.accessibility.linkedDescription;
                 if (!linkedDescOption) {
@@ -2315,22 +2358,23 @@
                 if (queryMatch.length === 1) {
                     return queryMatch[0];
                 }
-            },
+            };
             /**
              * @private
              */
-            setLinkedDescriptionAttrs: function () {
+            InfoRegionsComponent.prototype.setLinkedDescriptionAttrs = function () {
                 var el = this.linkedDescriptionElement;
                 if (el) {
                     el.setAttribute('aria-hidden', 'true');
                     addClass(el, 'highcharts-linked-description');
                 }
-            },
+            };
             /**
              * @private
-             * @param {string} regionKey The name/key of the region to update
+             * @param {string} regionKey
+             * The name/key of the region to update
              */
-            updateScreenReaderSection: function (regionKey) {
+            InfoRegionsComponent.prototype.updateScreenReaderSection = function (regionKey) {
                 var chart = this.chart;
                 var region = this.screenReaderSections[regionKey];
                 var content = region.buildContent(chart);
@@ -2358,13 +2402,13 @@
                     }
                     delete region.element;
                 }
-            },
+            };
             /**
              * @private
              * @param {Highcharts.HTMLDOMElement} sectionDiv The section element
              * @param {string} regionKey Name/key of the region we are setting attrs for
              */
-            setScreenReaderSectionAttribs: function (sectionDiv, regionKey) {
+            InfoRegionsComponent.prototype.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;
                 attr(sectionDiv, {
@@ -2378,12 +2422,12 @@
                     labelText) {
                     sectionDiv.setAttribute('role', 'region');
                 }
-            },
+            };
             /**
              * @private
              * @return {string}
              */
-            defaultBeforeChartFormatter: function () {
+            InfoRegionsComponent.prototype.defaultBeforeChartFormatter = function () {
                 var chart = this.chart;
                 var format = chart.options.accessibility.screenReaderSection.beforeChartFormat;
                 if (!format) {
@@ -2420,12 +2464,12 @@
                 this.dataTableButtonId = dataTableButtonId;
                 this.sonifyButtonId = sonifyButtonId;
                 return stripEmptyHTMLTags(formattedString);
-            },
+            };
             /**
              * @private
              * @return {string}
              */
-            defaultAfterChartFormatter: function () {
+            InfoRegionsComponent.prototype.defaultAfterChartFormatter = function () {
                 var chart = this.chart;
                 var format = chart.options.accessibility.screenReaderSection.afterChartFormat;
                 if (!format) {
@@ -2436,21 +2480,21 @@
                     context,
                     chart);
                 return stripEmptyHTMLTags(formattedString);
-            },
+            };
             /**
              * @private
              * @return {string}
              */
-            getLinkedDescription: function () {
+            InfoRegionsComponent.prototype.getLinkedDescription = function () {
                 var el = this.linkedDescriptionElement,
                     content = el && el.innerHTML || '';
                 return stripHTMLTagsFromString(content);
-            },
+            };
             /**
              * @private
              * @return {string}
              */
-            getLongdescText: function () {
+            InfoRegionsComponent.prototype.getLongdescText = function () {
                 var chartOptions = this.chart.options,
                     captionOptions = chartOptions.caption,
                     captionText = captionOptions && captionOptions.text,
@@ -2459,34 +2503,34 @@
                     linkedDescription ||
                     captionText ||
                     '');
-            },
+            };
             /**
              * @private
              * @return {string}
              */
-            getTypeDescriptionText: function () {
+            InfoRegionsComponent.prototype.getTypeDescriptionText = function () {
                 var chart = this.chart;
                 return chart.types ?
                     chart.options.accessibility.typeDescription ||
-                        chart.getTypeDescription(chart.types) : '';
-            },
+                        getTypeDescription(chart, chart.types) : '';
+            };
             /**
              * @private
              * @param {string} buttonId
              * @return {string}
              */
-            getDataTableButtonText: function (buttonId) {
+            InfoRegionsComponent.prototype.getDataTableButtonText = function (buttonId) {
                 var chart = this.chart,
                     buttonText = chart.langFormat('accessibility.table.viewAsDataTableButtonText', { chart: chart,
                     chartTitle: getChartTitle(chart) });
                 return '<button id="' + buttonId + '">' + buttonText + '</button>';
-            },
+            };
             /**
              * @private
              * @param {string} buttonId
              * @return {string}
              */
-            getSonifyButtonText: function (buttonId) {
+            InfoRegionsComponent.prototype.getSonifyButtonText = function (buttonId) {
                 var chart = this.chart;
                 if (chart.options.sonification &&
                     chart.options.sonification.enabled === false) {
@@ -2495,28 +2539,28 @@
                 var buttonText = chart.langFormat('accessibility.sonification.playAsSoundButtonText', { chart: chart,
                     chartTitle: getChartTitle(chart) });
                 return '<button id="' + buttonId + '">' + buttonText + '</button>';
-            },
+            };
             /**
              * @private
              * @return {string}
              */
-            getSubtitleText: function () {
+            InfoRegionsComponent.prototype.getSubtitleText = function () {
                 var subtitle = (this.chart.options.subtitle);
                 return stripHTMLTagsFromString(subtitle && subtitle.text || '');
-            },
+            };
             /**
              * @private
              * @return {string}
              */
-            getEndOfChartMarkerText: function () {
+            InfoRegionsComponent.prototype.getEndOfChartMarkerText = function () {
                 var chart = this.chart, markerText = chart.langFormat('accessibility.screenReaderSection.endOfChartMarker', { chart: chart }), id = 'highcharts-end-of-chart-marker-' + chart.index;
                 return '<div id="' + id + '">' + markerText + '</div>';
-            },
+            };
             /**
              * @private
              * @param {Highcharts.Dictionary<string>} e
              */
-            onDataTableCreated: function (e) {
+            InfoRegionsComponent.prototype.onDataTableCreated = function (e) {
                 var chart = this.chart;
                 if (chart.options.accessibility.enabled) {
                     if (this.viewDataTableButton) {
@@ -2527,22 +2571,22 @@
                     attributes.summary = getTableSummary(chart);
                     e.tree.attributes = attributes;
                 }
-            },
+            };
             /**
              * @private
              */
-            focusDataTable: function () {
+            InfoRegionsComponent.prototype.focusDataTable = function () {
                 var tableDiv = this.dataTableDiv,
                     table = tableDiv && tableDiv.getElementsByTagName('table')[0];
                 if (table && table.focus) {
                     table.focus();
                 }
-            },
+            };
             /**
              * @private
              * @param {string} sonifyButtonId
              */
-            initSonifyButton: function (sonifyButtonId) {
+            InfoRegionsComponent.prototype.initSonifyButton = function (sonifyButtonId) {
                 var _this = this;
                 var el = this.sonifyButton = getElement(sonifyButtonId);
                 var chart = this.chart;
@@ -2573,13 +2617,13 @@
                         (onPlayAsSoundClick || defaultHandler).call(this, e, chart);
                     };
                 }
-            },
+            };
             /**
              * Set attribs and handlers for default viewAsDataTable button if exists.
              * @private
              * @param {string} tableButtonId
              */
-            initDataTableButton: function (tableButtonId) {
+            InfoRegionsComponent.prototype.initDataTableButton = function (tableButtonId) {
                 var el = this.viewDataTableButton = getElement(tableButtonId), chart = this.chart, tableId = tableButtonId.replace('hc-linkto-', '');
                 if (el) {
                     attr(el, {
@@ -2592,13 +2636,13 @@
                             chart.viewData();
                         };
                 }
-            },
+            };
             /**
              * Return object with text description of each of the chart's axes.
              * @private
              * @return {Highcharts.Dictionary<string>}
              */
-            getAxesDescription: function () {
+            InfoRegionsComponent.prototype.getAxesDescription = function () {
                 var chart = this.chart,
                     shouldDescribeColl = function (collectionKey,
                     defaultCondition) {
@@ -2614,13 +2658,13 @@
                     desc.yAxis = this.getAxisDescriptionText('yAxis');
                 }
                 return desc;
-            },
+            };
             /**
              * @private
              * @param {string} collectionKey
              * @return {string}
              */
-            getAxisDescriptionText: function (collectionKey) {
+            InfoRegionsComponent.prototype.getAxisDescriptionText = function (collectionKey) {
                 var chart = this.chart;
                 var axes = chart[collectionKey];
                 return chart.langFormat('accessibility.axis.' + collectionKey + 'Description' + (axes.length > 1 ? 'Plural' : 'Singular'), {
@@ -2633,75 +2677,103 @@
                     }),
                     numAxes: axes.length
                 });
-            },
+            };
             /**
              * Remove component traces
              */
-            destroy: function () {
+            InfoRegionsComponent.prototype.destroy = function () {
                 if (this.announcer) {
                     this.announcer.destroy();
                 }
-            }
-        });
+            };
+            return InfoRegionsComponent;
+        }(AccessibilityComponent));
+        /* *
+         *
+         *  Default Export
+         *
+         * */
 
         return InfoRegionsComponent;
     });
-    _registerModule(_modules, 'Accessibility/KeyboardNavigation.js', [_modules['Core/Chart/Chart.js'], _modules['Core/Globals.js'], _modules['Core/Utilities.js'], _modules['Accessibility/Utils/EventProvider.js'], _modules['Accessibility/Utils/HTMLUtilities.js']], function (Chart, H, U, EventProvider, HTMLUtilities) {
+    _registerModule(_modules, 'Accessibility/Components/MenuComponent.js', [_modules['Core/Chart/Chart.js'], _modules['Core/Utilities.js'], _modules['Accessibility/AccessibilityComponent.js'], _modules['Accessibility/KeyboardNavigationHandler.js'], _modules['Accessibility/Utils/ChartUtilities.js'], _modules['Accessibility/Utils/HTMLUtilities.js']], function (Chart, U, AccessibilityComponent, KeyboardNavigationHandler, ChartUtilities, HTMLUtilities) {
         /* *
          *
          *  (c) 2009-2021 Øystein Moseng
          *
-         *  Main keyboard navigation handling.
+         *  Accessibility component for exporting menu.
          *
          *  License: www.highcharts.com/license
          *
          *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
          *
          * */
-        var doc = H.doc,
-            win = H.win;
-        var addEvent = U.addEvent,
-            fireEvent = U.fireEvent;
-        var getElement = HTMLUtilities.getElement;
+        var __extends = (this && this.__extends) || (function () {
+                var extendStatics = function (d,
+            b) {
+                    extendStatics = Object.setPrototypeOf ||
+                        ({ __proto__: [] } instanceof Array && function (d,
+            b) { d.__proto__ = b; }) ||
+                        function (d,
+            b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+                return extendStatics(d, b);
+            };
+            return function (d, b) {
+                extendStatics(d, b);
+                function __() { this.constructor = d; }
+                d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+            };
+        })();
+        var attr = U.attr;
+        var getChartTitle = ChartUtilities.getChartTitle,
+            unhideChartElementFromAT = ChartUtilities.unhideChartElementFromAT;
+        var getFakeMouseEvent = HTMLUtilities.getFakeMouseEvent;
         /* *
          *
-         *  Class
+         *  Functions
          *
          * */
+        /* eslint-disable valid-jsdoc */
         /**
-         * The KeyboardNavigation class, containing the overall keyboard navigation
-         * logic for the chart.
+         * Get the wrapped export button element of a chart.
          *
-         * @requires module:modules/accessibility
+         * @private
+         * @param {Highcharts.Chart} chart
+         * @returns {Highcharts.SVGElement}
+         */
+        function getExportMenuButtonElement(chart) {
+            return chart.exportSVGElements && chart.exportSVGElements[0];
+        }
+        /**
+         * @private
+         * @param {Highcharts.Chart} chart
+         */
+        function exportingShouldHaveA11y(chart) {
+            var exportingOpts = chart.options.exporting,
+                exportButton = getExportMenuButtonElement(chart);
+            return !!(exportingOpts &&
+                exportingOpts.enabled !== false &&
+                exportingOpts.accessibility &&
+                exportingOpts.accessibility.enabled &&
+                exportButton &&
+                exportButton.element);
+        }
+        /* *
+         *
+         *  Class
+         *
+         * */
+        /**
+         * The MenuComponent class
          *
          * @private
          * @class
-         * @param {Highcharts.Chart} chart
-         *        Chart object
-         * @param {object} components
-         *        Map of component names to AccessibilityComponent objects.
-         * @name Highcharts.KeyboardNavigation
+         * @name Highcharts.MenuComponent
          */
-        var KeyboardNavigation = /** @class */ (function () {
-                /* *
-                 *
-                 *  Constructor
-                 *
-                 * */
-                function KeyboardNavigation(chart, components) {
-                    /* *
-                     *
-                     *  Properties
-                     *
-                     * */
-                    this.chart = void 0;
-                this.components = void 0;
-                this.currentModuleIx = NaN;
-                this.eventProvider = void 0;
-                this.exitAnchor = void 0;
-                this.modules = [];
-                this.tabindexContainer = void 0;
-                this.init(chart, components);
+        var MenuComponent = /** @class */ (function (_super) {
+                __extends(MenuComponent, _super);
+            function MenuComponent() {
+                return _super !== null && _super.apply(this, arguments) || this;
             }
             /* *
              *
@@ -2710,330 +2782,244 @@
              * */
             /* eslint-disable valid-jsdoc */
             /**
-             * Initialize the class
-             * @private
-             * @param {Highcharts.Chart} chart
-             *        Chart object
-             * @param {object} components
-             *        Map of component names to AccessibilityComponent objects.
+             * Init the component
              */
-            KeyboardNavigation.prototype.init = function (chart, components) {
-                var _this = this;
-                var ep = this.eventProvider = new EventProvider();
-                this.chart = chart;
-                this.components = components;
-                this.modules = [];
-                this.currentModuleIx = 0;
-                this.update();
-                ep.addEvent(this.tabindexContainer, 'keydown', function (e) { return _this.onKeydown(e); });
-                ep.addEvent(this.tabindexContainer, 'focus', function (e) { return _this.onFocus(e); });
-                ['mouseup', 'touchend'].forEach(function (eventName) {
-                    return ep.addEvent(doc, eventName, function () { return _this.onMouseUp(); });
-                });
-                ['mousedown', 'touchstart'].forEach(function (eventName) {
-                    return ep.addEvent(chart.renderTo, eventName, function () {
-                        _this.isClickingChart = true;
-                    });
-                });
-                ep.addEvent(chart.renderTo, 'mouseover', function () {
-                    _this.pointerIsOverChart = true;
+            MenuComponent.prototype.init = function () {
+                var chart = this.chart,
+                    component = this;
+                this.addEvent(chart, 'exportMenuShown', function () {
+                    component.onMenuShown();
                 });
-                ep.addEvent(chart.renderTo, 'mouseout', function () {
-                    _this.pointerIsOverChart = false;
+                this.addEvent(chart, 'exportMenuHidden', function () {
+                    component.onMenuHidden();
                 });
+                this.createProxyGroup();
             };
             /**
-             * Update the modules for the keyboard navigation.
-             * @param {Array<string>} [order]
-             *        Array specifying the tab order of the components.
+             * @private
              */
-            KeyboardNavigation.prototype.update = function (order) {
-                var a11yOptions = this.chart.options.accessibility,
-                    keyboardOptions = a11yOptions && a11yOptions.keyboardNavigation,
-                    components = this.components;
-                this.updateContainerTabindex();
-                if (keyboardOptions &&
-                    keyboardOptions.enabled &&
-                    order &&
-                    order.length) {
-                    // We (still) have keyboard navigation. Update module list
-                    this.modules = order.reduce(function (modules, componentName) {
-                        var navModules = components[componentName].getKeyboardNavigation();
-                        return modules.concat(navModules);
-                    }, []);
-                    this.updateExitAnchor();
-                }
-                else {
-                    this.modules = [];
-                    this.currentModuleIx = 0;
-                    this.removeExitAnchor();
+            MenuComponent.prototype.onMenuHidden = function () {
+                var menu = this.chart.exportContextMenu;
+                if (menu) {
+                    menu.setAttribute('aria-hidden', 'true');
                 }
+                this.isExportMenuShown = false;
+                this.setExportButtonExpandedState('false');
             };
             /**
-             * Function to run on container focus
              * @private
-             * @param {global.FocusEvent} e Browser focus event.
              */
-            KeyboardNavigation.prototype.onFocus = function (e) {
-                var chart = this.chart;
-                var focusComesFromChart = (e.relatedTarget &&
-                        chart.container.contains(e.relatedTarget));
-                // Init keyboard nav if tabbing into chart
-                if (!this.exiting &&
-                    !this.tabbingInBackwards &&
-                    !this.isClickingChart &&
-                    !focusComesFromChart &&
-                    this.modules[0]) {
-                    this.modules[0].init(1);
+            MenuComponent.prototype.onMenuShown = function () {
+                var chart = this.chart,
+                    menu = chart.exportContextMenu;
+                if (menu) {
+                    this.addAccessibleContextMenuAttribs();
+                    unhideChartElementFromAT(chart, menu);
                 }
-                this.exiting = false;
+                this.isExportMenuShown = true;
+                this.setExportButtonExpandedState('true');
             };
             /**
-             * Reset chart navigation state if we click outside the chart and it's
-             * not already reset.
              * @private
+             * @param {string} stateStr
              */
-            KeyboardNavigation.prototype.onMouseUp = function () {
-                delete this.isClickingChart;
-                if (!this.keyboardReset && !this.pointerIsOverChart) {
-                    var chart = this.chart,
-                        curMod = this.modules &&
-                            this.modules[this.currentModuleIx || 0];
-                    if (curMod && curMod.terminate) {
-                        curMod.terminate();
-                    }
-                    if (chart.focusElement) {
-                        chart.focusElement.removeFocusBorder();
-                    }
-                    this.currentModuleIx = 0;
-                    this.keyboardReset = true;
+            MenuComponent.prototype.setExportButtonExpandedState = function (stateStr) {
+                if (this.exportButtonProxy) {
+                    this.exportButtonProxy.buttonElement.setAttribute('aria-expanded', stateStr);
                 }
             };
             /**
-             * Function to run on keydown
-             * @private
-             * @param {global.KeyboardEvent} ev Browser keydown event.
+             * Called on each render of the chart. We need to update positioning of the
+             * proxy overlay.
              */
-            KeyboardNavigation.prototype.onKeydown = function (ev) {
-                var e = ev || win.event,
-                    curNavModule = (this.modules &&
-                        this.modules.length &&
-                        this.modules[this.currentModuleIx]);
-                var preventDefault;
-                // Used for resetting nav state when clicking outside chart
-                this.keyboardReset = false;
-                // Used for sending focus out of the chart by the modules.
-                this.exiting = false;
-                // If there is a nav module for the current index, run it.
-                // Otherwise, we are outside of the chart in some direction.
-                if (curNavModule) {
-                    var response = curNavModule.run(e);
-                    if (response === curNavModule.response.success) {
-                        preventDefault = true;
-                    }
-                    else if (response === curNavModule.response.prev) {
-                        preventDefault = this.prev();
-                    }
-                    else if (response === curNavModule.response.next) {
-                        preventDefault = this.next();
-                    }
-                    if (preventDefault) {
-                        e.preventDefault();
-                        e.stopPropagation();
-                    }
-                }
+            MenuComponent.prototype.onChartRender = function () {
+                this.proxyProvider.clearGroup('chartMenu');
+                this.proxyMenuButton();
             };
             /**
-             * Go to previous module.
              * @private
              */
-            KeyboardNavigation.prototype.prev = function () {
-                return this.move(-1);
+            MenuComponent.prototype.proxyMenuButton = function () {
+                var chart = this.chart;
+                var proxyProvider = this.proxyProvider;
+                var buttonEl = getExportMenuButtonElement(chart);
+                if (exportingShouldHaveA11y(chart) && buttonEl) {
+                    this.exportButtonProxy = proxyProvider.addProxyElement('chartMenu', { click: buttonEl }, {
+                        'aria-label': chart.langFormat('accessibility.exporting.menuButtonLabel', {
+                            chart: chart,
+                            chartTitle: getChartTitle(chart)
+                        }),
+                        'aria-expanded': false
+                    });
+                }
             };
             /**
-             * Go to next module.
              * @private
              */
-            KeyboardNavigation.prototype.next = function () {
-                return this.move(1);
+            MenuComponent.prototype.createProxyGroup = function () {
+                var chart = this.chart;
+                if (chart && this.proxyProvider) {
+                    this.proxyProvider.addGroup('chartMenu', 'div');
+                }
             };
             /**
-             * Move to prev/next module.
              * @private
-             * @param {number} direction
-             * Direction to move. +1 for next, -1 for prev.
-             * @return {boolean}
-             * True if there was a valid module in direction.
              */
-            KeyboardNavigation.prototype.move = function (direction) {
-                var curModule = this.modules && this.modules[this.currentModuleIx];
-                if (curModule && curModule.terminate) {
-                    curModule.terminate(direction);
-                }
-                // Remove existing focus border if any
-                if (this.chart.focusElement) {
-                    this.chart.focusElement.removeFocusBorder();
-                }
-                this.currentModuleIx += direction;
-                var newModule = this.modules && this.modules[this.currentModuleIx];
-                if (newModule) {
-                    if (newModule.validate && !newModule.validate()) {
-                        return this.move(direction); // Invalid module, recurse
-                    }
-                    if (newModule.init) {
-                        newModule.init(direction); // Valid module, init it
-                        return true;
+            MenuComponent.prototype.addAccessibleContextMenuAttribs = function () {
+                var chart = this.chart,
+                    exportList = chart.exportDivElements;
+                if (exportList && exportList.length) {
+                    // Set tabindex on the menu items to allow focusing by script
+                    // Set role to give screen readers a chance to pick up the contents
+                    exportList.forEach(function (item) {
+                        if (item) {
+                            if (item.tagName === 'LI' &&
+                                !(item.children && item.children.length)) {
+                                item.setAttribute('tabindex', -1);
+                            }
+                            else {
+                                item.setAttribute('aria-hidden', 'true');
+                            }
+                        }
+                    });
+                    // Set accessibility properties on parent div
+                    var parentDiv = (exportList[0] && exportList[0].parentNode);
+                    if (parentDiv) {
+                        attr(parentDiv, {
+                            'aria-hidden': void 0,
+                            'aria-label': chart.langFormat('accessibility.exporting.chartMenuLabel', { chart: chart }),
+                            role: 'list' // Needed for webkit/VO
+                        });
                     }
                 }
-                // No module
-                this.currentModuleIx = 0; // Reset counter
-                // Set focus to chart or exit anchor depending on direction
-                this.exiting = true;
-                if (direction > 0) {
-                    this.exitAnchor.focus();
-                }
-                else {
-                    this.tabindexContainer.focus();
-                }
-                return false;
             };
             /**
-             * We use an exit anchor to move focus out of chart whenever we want, by
-             * setting focus to this div and not preventing the default tab action. We
-             * also use this when users come back into the chart by tabbing back, in
-             * order to navigate from the end of the chart.
-             * @private
+             * Get keyboard navigation handler for this component.
+             * @return {Highcharts.KeyboardNavigationHandler}
              */
-            KeyboardNavigation.prototype.updateExitAnchor = function () {
-                var endMarkerId = 'highcharts-end-of-chart-marker-' + this.chart.index,
-                    endMarker = getElement(endMarkerId);
-                this.removeExitAnchor();
-                if (endMarker) {
-                    this.makeElementAnExitAnchor(endMarker);
-                    this.exitAnchor = endMarker;
-                }
-                else {
-                    this.createExitAnchor();
-                }
+            MenuComponent.prototype.getKeyboardNavigation = function () {
+                var keys = this.keyCodes,
+                    chart = this.chart,
+                    component = this;
+                return new KeyboardNavigationHandler(chart, {
+                    keyCodeMap: [
+                        // Arrow prev handler
+                        [
+                            [keys.left, keys.up],
+                            function () {
+                                return component.onKbdPrevious(this);
+                            }
+                        ],
+                        // Arrow next handler
+                        [
+                            [keys.right, keys.down],
+                            function () {
+                                return component.onKbdNext(this);
+                            }
+                        ],
+                        // Click handler
+                        [
+                            [keys.enter, keys.space],
+                            function () {
+                                return component.onKbdClick(this);
+                            }
+                        ]
+                    ],
+                    // Only run exporting navigation if exporting support exists and is
+                    // enabled on chart
+                    validate: function () {
+                        return !!chart.exporting &&
+                            chart.options.exporting.enabled !== false &&
+                            chart.options.exporting.accessibility.enabled !==
+                                false;
+                    },
+                    // Focus export menu button
+                    init: function () {
+                        var proxy = component.exportButtonProxy;
+                        var svgEl = component.chart.exportingGroup;
+                        if (proxy && svgEl) {
+                            chart.setFocusToElement(svgEl, proxy.buttonElement);
+                        }
+                    },
+                    // Hide the menu
+                    terminate: function () {
+                        chart.hideExportMenu();
+                    }
+                });
             };
             /**
-             * Chart container should have tabindex if navigation is enabled.
              * @private
+             * @param {Highcharts.KeyboardNavigationHandler} keyboardNavigationHandler
+             * @return {number} Response code
              */
-            KeyboardNavigation.prototype.updateContainerTabindex = function () {
-                var a11yOptions = this.chart.options.accessibility,
-                    keyboardOptions = a11yOptions && a11yOptions.keyboardNavigation,
-                    shouldHaveTabindex = !(keyboardOptions && keyboardOptions.enabled === false),
-                    chart = this.chart,
-                    container = chart.container;
-                var tabindexContainer;
-                if (chart.renderTo.hasAttribute('tabindex')) {
-                    container.removeAttribute('tabindex');
-                    tabindexContainer = chart.renderTo;
-                }
-                else {
-                    tabindexContainer = container;
-                }
-                this.tabindexContainer = tabindexContainer;
-                var curTabindex = tabindexContainer.getAttribute('tabindex');
-                if (shouldHaveTabindex && !curTabindex) {
-                    tabindexContainer.setAttribute('tabindex', '0');
-                }
-                else if (!shouldHaveTabindex) {
-                    chart.container.removeAttribute('tabindex');
+            MenuComponent.prototype.onKbdPrevious = function (keyboardNavigationHandler) {
+                var chart = this.chart;
+                var a11yOptions = chart.options.accessibility;
+                var response = keyboardNavigationHandler.response;
+                // Try to highlight prev item in list. Highlighting e.g.
+                // separators will fail.
+                var i = chart.highlightedExportItemIx || 0;
+                while (i--) {
+                    if (chart.highlightExportItem(i)) {
+                        return response.success;
+                    }
                 }
-            };
-            /**
-             * @private
-             */
-            KeyboardNavigation.prototype.makeElementAnExitAnchor = function (el) {
-                var chartTabindex = this.tabindexContainer.getAttribute('tabindex') || 0;
-                el.setAttribute('class', 'highcharts-exit-anchor');
-                el.setAttribute('tabindex', chartTabindex);
-                el.setAttribute('aria-hidden', false);
-                // Handle focus
-                this.addExitAnchorEventsToEl(el);
-            };
-            /**
-             * Add new exit anchor to the chart.
-             *
-             * @private
-             */
-            KeyboardNavigation.prototype.createExitAnchor = function () {
-                var chart = this.chart,
-                    exitAnchor = this.exitAnchor = doc.createElement('div');
-                chart.renderTo.appendChild(exitAnchor);
-                this.makeElementAnExitAnchor(exitAnchor);
-            };
-            /**
-             * @private
-             */
-            KeyboardNavigation.prototype.removeExitAnchor = function () {
-                if (this.exitAnchor && this.exitAnchor.parentNode) {
-                    this.exitAnchor.parentNode
-                        .removeChild(this.exitAnchor);
-                    delete this.exitAnchor;
+                // We failed, so wrap around or move to prev module
+                if (a11yOptions.keyboardNavigation.wrapAround) {
+                    chart.highlightLastExportItem();
+                    return response.success;
                 }
+                return response.prev;
             };
             /**
              * @private
+             * @param {Highcharts.KeyboardNavigationHandler} keyboardNavigationHandler
+             * @return {number} Response code
              */
-            KeyboardNavigation.prototype.addExitAnchorEventsToEl = function (element) {
-                var chart = this.chart,
-                    keyboardNavigation = this;
-                this.eventProvider.addEvent(element, 'focus', function (ev) {
-                    var e = ev || win.event,
-                        focusComesFromChart = (e.relatedTarget &&
-                            chart.container.contains(e.relatedTarget)),
-                        comingInBackwards = !(focusComesFromChart || keyboardNavigation.exiting);
-                    if (comingInBackwards) {
-                        // Focus the container instead
-                        keyboardNavigation.tabbingInBackwards = true;
-                        keyboardNavigation.tabindexContainer.focus();
-                        delete keyboardNavigation.tabbingInBackwards;
-                        e.preventDefault();
-                        // Move to last valid keyboard nav module
-                        // Note the we don't run it, just set the index
-                        if (keyboardNavigation.modules &&
-                            keyboardNavigation.modules.length) {
-                            keyboardNavigation.currentModuleIx =
-                                keyboardNavigation.modules.length - 1;
-                            var curModule = keyboardNavigation.modules[keyboardNavigation.currentModuleIx];
-                            // Validate the module
-                            if (curModule &&
-                                curModule.validate && !curModule.validate()) {
-                                // Invalid. Try moving backwards to find next valid.
-                                keyboardNavigation.prev();
-                            }
-                            else if (curModule) {
-                                // We have a valid module, init it
-                                curModule.init(-1);
-                            }
-                        }
-                    }
-                    else {
-                        // Don't skip the next focus, we only skip once.
-                        keyboardNavigation.exiting = false;
+            MenuComponent.prototype.onKbdNext = function (keyboardNavigationHandler) {
+                var chart = this.chart;
+                var a11yOptions = chart.options.accessibility;
+                var response = keyboardNavigationHandler.response;
+                // Try to highlight next item in list. Highlighting e.g.
+                // separators will fail.
+                for (var i = (chart.highlightedExportItemIx || 0) + 1; i < chart.exportDivElements.length; ++i) {
+                    if (chart.highlightExportItem(i)) {
+                        return response.success;
                     }
-                });
+                }
+                // We failed, so wrap around or move to next module
+                if (a11yOptions.keyboardNavigation.wrapAround) {
+                    chart.highlightExportItem(0);
+                    return response.success;
+                }
+                return response.next;
             };
             /**
-             * Remove all traces of keyboard navigation.
              * @private
+             * @param {Highcharts.KeyboardNavigationHandler} keyboardNavigationHandler
+             * @return {number} Response code
              */
-            KeyboardNavigation.prototype.destroy = function () {
-                this.removeExitAnchor();
-                this.eventProvider.removeAddedEvents();
-                this.chart.container.removeAttribute('tabindex');
+            MenuComponent.prototype.onKbdClick = function (keyboardNavigationHandler) {
+                var chart = this.chart;
+                var curHighlightedItem = chart.exportDivElements[chart.highlightedExportItemIx];
+                var exportButtonElement = getExportMenuButtonElement(chart).element;
+                if (this.isExportMenuShown) {
+                    this.fakeClickEvent(curHighlightedItem);
+                }
+                else {
+                    this.fakeClickEvent(exportButtonElement);
+                    chart.highlightExportItem(0);
+                }
+                return keyboardNavigationHandler.response.success;
             };
-            return KeyboardNavigation;
-        }());
+            return MenuComponent;
+        }(AccessibilityComponent));
         /* *
          *
          *  Class Namespace
          *
          * */
-        (function (KeyboardNavigation) {
+        (function (MenuComponent) {
             /* *
              *
              *  Declarations
@@ -3041,10 +3027,10 @@
              * */
             /* *
              *
-             *  Construction
+             *  Constants
              *
              * */
-            var composedItems = [];
+            var composedClasses = [];
             /* *
              *
              *  Functions
@@ -3055,717 +3041,865 @@
              * @private
              */
             function compose(ChartClass) {
-                if (composedItems.indexOf(ChartClass) === -1) {
-                    composedItems.push(ChartClass);
-                    var chartProto = ChartClass.prototype;
-                    chartProto.dismissPopupContent = chartDismissPopupContent;
-                }
-                if (composedItems.indexOf(doc) === -1) {
-                    composedItems.push(doc);
-                    addEvent(doc, 'keydown', documentOnKeydown);
+                if (composedClasses.indexOf(ChartClass) === -1) {
+                    composedClasses.push(ChartClass);
+                    var chartProto = Chart.prototype;
+                    chartProto.hideExportMenu = chartHideExportMenu;
+                    chartProto.highlightExportItem = chartHighlightExportItem;
+                    chartProto.highlightLastExportItem = chartHighlightLastExportItem;
+                    chartProto.showExportMenu = chartShowExportMenu;
                 }
-                return ChartClass;
             }
-            KeyboardNavigation.compose = compose;
+            MenuComponent.compose = compose;
             /**
-             * Dismiss popup content in chart, including export menu and tooltip.
+             * Show the export menu and focus the first item (if exists).
+             *
              * @private
+             * @function Highcharts.Chart#showExportMenu
              */
-            function chartDismissPopupContent() {
-                var chart = this;
-                fireEvent(this, 'dismissPopupContent', {}, function () {
-                    if (chart.tooltip) {
-                        chart.tooltip.hide(0);
+            function chartShowExportMenu() {
+                var exportButton = getExportMenuButtonElement(this);
+                if (exportButton) {
+                    var el = exportButton.element;
+                    if (el.onclick) {
+                        el.onclick(getFakeMouseEvent('click'));
                     }
-                    chart.hideExportMenu();
-                });
+                }
             }
             /**
-             * Add event listener to document to detect ESC key press and dismiss
-             * hover/popup content.
              * @private
+             * @function Highcharts.Chart#hideExportMenu
              */
-            function documentOnKeydown(e) {
-                var keycode = e.which || e.keyCode;
-                var esc = 27;
-                if (keycode === esc && H.charts) {
-                    H.charts.forEach(function (chart) {
-                        if (chart && chart.dismissPopupContent) {
-                            chart.dismissPopupContent();
+            function chartHideExportMenu() {
+                var chart = this,
+                    exportList = chart.exportDivElements;
+                if (exportList && chart.exportContextMenu) {
+                    // Reset hover states etc.
+                    exportList.forEach(function (el) {
+                        if (el &&
+                            el.className === 'highcharts-menu-item' &&
+                            el.onmouseout) {
+                            el.onmouseout(getFakeMouseEvent('mouseout'));
                         }
                     });
+                    chart.highlightedExportItemIx = 0;
+                    // Hide the menu div
+                    chart.exportContextMenu.hideMenu();
+                    // Make sure the chart has focus and can capture keyboard events
+                    chart.container.focus();
                 }
             }
-        })(KeyboardNavigation || (KeyboardNavigation = {}));
+            /**
+             * Highlight export menu item by index.
+             *
+             * @private
+             * @function Highcharts.Chart#highlightExportItem
+             *
+             * @param {number} ix
+             *
+             * @return {boolean}
+             */
+            function chartHighlightExportItem(ix) {
+                var listItem = this.exportDivElements && this.exportDivElements[ix];
+                var curHighlighted = this.exportDivElements &&
+                        this.exportDivElements[this.highlightedExportItemIx];
+                if (listItem &&
+                    listItem.tagName === 'LI' &&
+                    !(listItem.children && listItem.children.length)) {
+                    // Test if we have focus support for SVG elements
+                    var hasSVGFocusSupport = !!(this.renderTo.getElementsByTagName('g')[0] || {}).focus;
+                    // Only focus if we can set focus back to the elements after
+                    // destroying the menu (#7422)
+                    if (listItem.focus && hasSVGFocusSupport) {
+                        listItem.focus();
+                    }
+                    if (curHighlighted && curHighlighted.onmouseout) {
+                        curHighlighted.onmouseout(getFakeMouseEvent('mouseout'));
+                    }
+                    if (listItem.onmouseover) {
+                        listItem.onmouseover(getFakeMouseEvent('mouseover'));
+                    }
+                    this.highlightedExportItemIx = ix;
+                    return true;
+                }
+                return false;
+            }
+            /**
+             * Try to highlight the last valid export menu item.
+             *
+             * @private
+             * @function Highcharts.Chart#highlightLastExportItem
+             * @return {boolean}
+             */
+            function chartHighlightLastExportItem() {
+                var chart = this;
+                if (chart.exportDivElements) {
+                    var i = chart.exportDivElements.length;
+                    while (i--) {
+                        if (chart.highlightExportItem(i)) {
+                            return true;
+                        }
+                    }
+                }
+                return false;
+            }
+        })(MenuComponent || (MenuComponent = {}));
         /* *
          *
          *  Default Export
          *
          * */
 
-        return KeyboardNavigation;
+        return MenuComponent;
     });
-    _registerModule(_modules, 'Accessibility/Components/LegendComponent.js', [_modules['Core/Animation/AnimationUtilities.js'], _modules['Core/Chart/Chart.js'], _modules['Core/Globals.js'], _modules['Core/Legend/Legend.js'], _modules['Core/Utilities.js'], _modules['Accessibility/AccessibilityComponent.js'], _modules['Accessibility/KeyboardNavigationHandler.js'], _modules['Accessibility/Utils/HTMLUtilities.js'], _modules['Accessibility/Utils/ChartUtilities.js']], function (A, Chart, H, Legend, U, AccessibilityComponent, KeyboardNavigationHandler, HTMLUtilities, ChartUtils) {
+    _registerModule(_modules, 'Accessibility/KeyboardNavigation.js', [_modules['Core/Globals.js'], _modules['Accessibility/Components/MenuComponent.js'], _modules['Core/Utilities.js'], _modules['Accessibility/Utils/EventProvider.js'], _modules['Accessibility/Utils/HTMLUtilities.js']], function (H, MenuComponent, U, EventProvider, HTMLUtilities) {
         /* *
          *
          *  (c) 2009-2021 Øystein Moseng
          *
-         *  Accessibility component for chart legend.
+         *  Main keyboard navigation handling.
          *
          *  License: www.highcharts.com/license
          *
          *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
          *
          * */
-        var animObject = A.animObject;
+        var doc = H.doc,
+            win = H.win;
         var addEvent = U.addEvent,
-            extend = U.extend,
-            fireEvent = U.fireEvent,
-            isNumber = U.isNumber,
-            pick = U.pick,
-            syncTimeout = U.syncTimeout;
-        var stripHTMLTags = HTMLUtilities.stripHTMLTagsFromString,
-            addClass = HTMLUtilities.addClass,
-            removeClass = HTMLUtilities.removeClass;
-        var getChartTitle = ChartUtils.getChartTitle;
-        /* eslint-disable no-invalid-this, valid-jsdoc */
-        /**
-         * @private
-         */
-        function scrollLegendToItem(legend, itemIx) {
-            var itemPage = legend.allItems[itemIx].pageIx,
-                curPage = legend.currentPage;
-            if (typeof itemPage !== 'undefined' && itemPage + 1 !== curPage) {
-                legend.scroll(1 + itemPage - curPage);
-            }
-        }
-        /**
-         * @private
-         */
-        function shouldDoLegendA11y(chart) {
-            var items = chart.legend && chart.legend.allItems,
-                legendA11yOptions = (chart.options.legend.accessibility || {});
-            return !!(items && items.length &&
-                !(chart.colorAxis && chart.colorAxis.length) &&
-                legendA11yOptions.enabled !== false);
-        }
-        /**
-         * Highlight legend item by index.
+            fireEvent = U.fireEvent;
+        var getElement = HTMLUtilities.getElement;
+        /* *
          *
-         * @private
-         * @function Highcharts.Chart#highlightLegendItem
+         *  Class
          *
-         * @param {number} ix
+         * */
+        /**
+         * The KeyboardNavigation class, containing the overall keyboard navigation
+         * logic for the chart.
          *
-         * @return {boolean}
+         * @requires module:modules/accessibility
+         *
+         * @private
+         * @class
+         * @param {Highcharts.Chart} chart
+         *        Chart object
+         * @param {object} components
+         *        Map of component names to AccessibilityComponent objects.
+         * @name Highcharts.KeyboardNavigation
          */
-        Chart.prototype.highlightLegendItem = function (ix) {
-            var items = this.legend.allItems;
-            var oldIx = this.accessibility &&
-                    this.accessibility.components.legend.highlightedLegendItemIx;
-            var itemToHighlight = items[ix];
-            if (itemToHighlight) {
-                if (isNumber(oldIx) && items[oldIx]) {
-                    fireEvent(items[oldIx].legendGroup.element, 'mouseout');
-                }
-                scrollLegendToItem(this.legend, ix);
-                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;
-        };
-        // Keep track of pressed state for legend items
-        addEvent(Legend, 'afterColorizeItem', function (e) {
-            var chart = this.chart,
-                a11yOptions = chart.options.accessibility,
-                legendItem = e.item;
-            if (a11yOptions.enabled && legendItem && legendItem.a11yProxyElement) {
-                legendItem.a11yProxyElement.buttonElement.setAttribute('aria-pressed', e.visible ? 'true' : 'false');
+        var KeyboardNavigation = /** @class */ (function () {
+                /* *
+                 *
+                 *  Constructor
+                 *
+                 * */
+                function KeyboardNavigation(chart, components) {
+                    /* *
+                     *
+                     *  Properties
+                     *
+                     * */
+                    this.chart = void 0;
+                this.components = void 0;
+                this.currentModuleIx = NaN;
+                this.eventProvider = void 0;
+                this.exitAnchor = void 0;
+                this.modules = [];
+                this.tabindexContainer = void 0;
+                this.init(chart, components);
             }
-        });
-        /**
-         * The LegendComponent class
-         *
-         * @private
-         * @class
-         * @name Highcharts.LegendComponent
-         */
-        var LegendComponent = function () { };
-        LegendComponent.prototype = new AccessibilityComponent();
-        extend(LegendComponent.prototype, /** @lends Highcharts.LegendComponent */ {
+            /* *
+             *
+             *  Functions
+             *
+             * */
+            /* eslint-disable valid-jsdoc */
             /**
-             * Init the component
+             * Initialize the class
              * @private
+             * @param {Highcharts.Chart} chart
+             *        Chart object
+             * @param {object} components
+             *        Map of component names to AccessibilityComponent objects.
              */
-            init: function () {
-                var component = this;
-                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.proxyProvider.updateGroupProxyElementPositions('legend');
-                        component.updateLegendItemProxyVisibility();
-                        if (component.highlightedLegendItemIx > -1) {
-                            this.chart.highlightLegendItem(component.highlightedLegendItemIx);
-                        }
-                    }
+            KeyboardNavigation.prototype.init = function (chart, components) {
+                var _this = this;
+                var ep = this.eventProvider = new EventProvider();
+                this.chart = chart;
+                this.components = components;
+                this.modules = [];
+                this.currentModuleIx = 0;
+                this.update();
+                ep.addEvent(this.tabindexContainer, 'keydown', function (e) { return _this.onKeydown(e); });
+                ep.addEvent(this.tabindexContainer, 'focus', function (e) { return _this.onFocus(e); });
+                ['mouseup', 'touchend'].forEach(function (eventName) {
+                    return ep.addEvent(doc, eventName, function () { return _this.onMouseUp(); });
                 });
-                this.addEvent(Legend, 'afterPositionItem', function (e) {
-                    if (this.chart === component.chart && this.chart.renderer) {
-                        component.updateProxyPositionForItem(e.item);
-                    }
+                ['mousedown', 'touchstart'].forEach(function (eventName) {
+                    return ep.addEvent(chart.renderTo, eventName, function () {
+                        _this.isClickingChart = true;
+                    });
                 });
-                this.addEvent(Legend, 'afterRender', function () {
-                    if (this.chart === component.chart &&
-                        this.chart.renderer &&
-                        component.recreateProxies()) {
-                        syncTimeout(function () { return component.proxyProvider.updateGroupProxyElementPositions('legend'); }, animObject(pick(this.chart.renderer.globalAnimation, true)).duration);
-                    }
+                ep.addEvent(chart.renderTo, 'mouseover', function () {
+                    _this.pointerIsOverChart = true;
                 });
-            },
+                ep.addEvent(chart.renderTo, 'mouseout', function () {
+                    _this.pointerIsOverChart = false;
+                });
+            };
             /**
-             * Update visibility of legend items when using paged legend
+             * Update the modules for the keyboard navigation.
+             * @param {Array<string>} [order]
+             *        Array specifying the tab order of the components.
+             */
+            KeyboardNavigation.prototype.update = function (order) {
+                var a11yOptions = this.chart.options.accessibility,
+                    keyboardOptions = a11yOptions && a11yOptions.keyboardNavigation,
+                    components = this.components;
+                this.updateContainerTabindex();
+                if (keyboardOptions &&
+                    keyboardOptions.enabled &&
+                    order &&
+                    order.length) {
+                    // We (still) have keyboard navigation. Update module list
+                    this.modules = order.reduce(function (modules, componentName) {
+                        var navModules = components[componentName].getKeyboardNavigation();
+                        return modules.concat(navModules);
+                    }, []);
+                    this.updateExitAnchor();
+                }
+                else {
+                    this.modules = [];
+                    this.currentModuleIx = 0;
+                    this.removeExitAnchor();
+                }
+            };
+            /**
+             * Function to run on container focus
              * @private
+             * @param {global.FocusEvent} e Browser focus event.
              */
-            updateLegendItemProxyVisibility: function () {
+            KeyboardNavigation.prototype.onFocus = function (e) {
                 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) {
-                    if (item.a11yProxyElement) {
-                        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 = '';
-                        }
-                    }
-                });
-            },
+                var focusComesFromChart = (e.relatedTarget &&
+                        chart.container.contains(e.relatedTarget));
+                // Init keyboard nav if tabbing into chart
+                if (!this.exiting &&
+                    !this.tabbingInBackwards &&
+                    !this.isClickingChart &&
+                    !focusComesFromChart &&
+                    this.modules[0]) {
+                    this.modules[0].init(1);
+                }
+                this.exiting = false;
+            };
             /**
+             * Reset chart navigation state if we click outside the chart and it's
+             * not already reset.
              * @private
              */
-            onChartRender: function () {
-                if (!shouldDoLegendA11y(this.chart)) {
-                    this.removeProxies();
+            KeyboardNavigation.prototype.onMouseUp = function () {
+                delete this.isClickingChart;
+                if (!this.keyboardReset && !this.pointerIsOverChart) {
+                    var chart = this.chart,
+                        curMod = this.modules &&
+                            this.modules[this.currentModuleIx || 0];
+                    if (curMod && curMod.terminate) {
+                        curMod.terminate();
+                    }
+                    if (chart.focusElement) {
+                        chart.focusElement.removeFocusBorder();
+                    }
+                    this.currentModuleIx = 0;
+                    this.keyboardReset = true;
                 }
-            },
+            };
             /**
+             * Function to run on keydown
              * @private
+             * @param {global.KeyboardEvent} ev Browser keydown event.
              */
-            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;
-                        }
+            KeyboardNavigation.prototype.onKeydown = function (ev) {
+                var e = ev || win.event,
+                    curNavModule = (this.modules &&
+                        this.modules.length &&
+                        this.modules[this.currentModuleIx]);
+                var preventDefault;
+                // Used for resetting nav state when clicking outside chart
+                this.keyboardReset = false;
+                // Used for sending focus out of the chart by the modules.
+                this.exiting = false;
+                // If there is a nav module for the current index, run it.
+                // Otherwise, we are outside of the chart in some direction.
+                if (curNavModule) {
+                    var response = curNavModule.run(e);
+                    if (response === curNavModule.response.success) {
+                        preventDefault = true;
+                    }
+                    else if (response === curNavModule.response.prev) {
+                        preventDefault = this.prev();
+                    }
+                    else if (response === curNavModule.response.next) {
+                        preventDefault = this.next();
+                    }
+                    if (preventDefault) {
+                        e.preventDefault();
+                        e.stopPropagation();
                     }
                 }
-            },
+            };
             /**
+             * Go to previous module.
              * @private
              */
-            updateProxyPositionForItem: function (item) {
-                if (item.a11yProxyElement) {
-                    item.a11yProxyElement.refreshPosition();
-                }
-            },
+            KeyboardNavigation.prototype.prev = function () {
+                return this.move(-1);
+            };
             /**
-             * Returns false if legend a11y is disabled and proxies were not created,
-             * true otherwise.
+             * Go to next module.
              * @private
              */
-            recreateProxies: function () {
-                this.removeProxies();
-                if (shouldDoLegendA11y(this.chart)) {
-                    this.addLegendProxyGroup();
-                    this.proxyLegendItems();
-                    this.updateLegendItemProxyVisibility();
-                    this.updateLegendTitle();
-                    return true;
+            KeyboardNavigation.prototype.next = function () {
+                return this.move(1);
+            };
+            /**
+             * Move to prev/next module.
+             * @private
+             * @param {number} direction
+             * Direction to move. +1 for next, -1 for prev.
+             * @return {boolean}
+             * True if there was a valid module in direction.
+             */
+            KeyboardNavigation.prototype.move = function (direction) {
+                var curModule = this.modules && this.modules[this.currentModuleIx];
+                if (curModule && curModule.terminate) {
+                    curModule.terminate(direction);
+                }
+                // Remove existing focus border if any
+                if (this.chart.focusElement) {
+                    this.chart.focusElement.removeFocusBorder();
+                }
+                this.currentModuleIx += direction;
+                var newModule = this.modules && this.modules[this.currentModuleIx];
+                if (newModule) {
+                    if (newModule.validate && !newModule.validate()) {
+                        return this.move(direction); // Invalid module, recurse
+                    }
+                    if (newModule.init) {
+                        newModule.init(direction); // Valid module, init it
+                        return true;
+                    }
+                }
+                // No module
+                this.currentModuleIx = 0; // Reset counter
+                // Set focus to chart or exit anchor depending on direction
+                this.exiting = true;
+                if (direction > 0) {
+                    this.exitAnchor.focus();
+                }
+                else {
+                    this.tabindexContainer.focus();
                 }
                 return false;
-            },
+            };
             /**
+             * We use an exit anchor to move focus out of chart whenever we want, by
+             * setting focus to this div and not preventing the default tab action. We
+             * also use this when users come back into the chart by tabbing back, in
+             * order to navigate from the end of the chart.
              * @private
              */
-            removeProxies: function () {
-                this.proxyProvider.removeGroup('legend');
-            },
+            KeyboardNavigation.prototype.updateExitAnchor = function () {
+                var endMarkerId = 'highcharts-end-of-chart-marker-' + this.chart.index,
+                    endMarker = getElement(endMarkerId);
+                this.removeExitAnchor();
+                if (endMarker) {
+                    this.makeElementAnExitAnchor(endMarker);
+                    this.exitAnchor = endMarker;
+                }
+                else {
+                    this.createExitAnchor();
+                }
+            };
             /**
+             * Chart container should have tabindex if navigation is enabled.
              * @private
              */
-            updateLegendTitle: function () {
-                var chart = this.chart;
-                var legendTitle = stripHTMLTags((chart.legend &&
-                        chart.legend.options.title &&
-                        chart.legend.options.title.text ||
-                        '').replace(/<br ?\/?>/g, ' '));
-                var legendLabel = chart.langFormat('accessibility.legend.legendLabel' + (legendTitle ? '' : 'NoTitle'), {
-                        chart: chart,
-                        legendTitle: legendTitle,
-                        chartTitle: getChartTitle(chart)
-                    });
-                this.proxyProvider.updateGroupAttrs('legend', {
-                    'aria-label': legendLabel
-                });
-            },
+            KeyboardNavigation.prototype.updateContainerTabindex = function () {
+                var a11yOptions = this.chart.options.accessibility,
+                    keyboardOptions = a11yOptions && a11yOptions.keyboardNavigation,
+                    shouldHaveTabindex = !(keyboardOptions && keyboardOptions.enabled === false),
+                    chart = this.chart,
+                    container = chart.container;
+                var tabindexContainer;
+                if (chart.renderTo.hasAttribute('tabindex')) {
+                    container.removeAttribute('tabindex');
+                    tabindexContainer = chart.renderTo;
+                }
+                else {
+                    tabindexContainer = container;
+                }
+                this.tabindexContainer = tabindexContainer;
+                var curTabindex = tabindexContainer.getAttribute('tabindex');
+                if (shouldHaveTabindex && !curTabindex) {
+                    tabindexContainer.setAttribute('tabindex', '0');
+                }
+                else if (!shouldHaveTabindex) {
+                    chart.container.removeAttribute('tabindex');
+                }
+            };
             /**
              * @private
              */
-            addLegendProxyGroup: function () {
-                var a11yOptions = this.chart.options.accessibility;
-                var groupRole = a11yOptions.landmarkVerbosity === 'all' ? 'region' : null;
-                this.proxyProvider.addGroup('legend', 'ul', {
-                    'aria-label': '_placeholder_',
-                    role: groupRole
-                });
-            },
+            KeyboardNavigation.prototype.makeElementAnExitAnchor = function (el) {
+                var chartTabindex = this.tabindexContainer.getAttribute('tabindex') || 0;
+                el.setAttribute('class', 'highcharts-exit-anchor');
+                el.setAttribute('tabindex', chartTabindex);
+                el.setAttribute('aria-hidden', false);
+                // Handle focus
+                this.addExitAnchorEventsToEl(el);
+            };
             /**
+             * Add new exit anchor to the chart.
+             *
              * @private
              */
-            proxyLegendItems: function () {
-                var component = this,
-                    items = (this.chart.legend &&
-                        this.chart.legend.allItems || []);
-                items.forEach(function (item) {
-                    if (item.legendItem && item.legendItem.element) {
-                        component.proxyLegendItem(item);
-                    }
-                });
-            },
+            KeyboardNavigation.prototype.createExitAnchor = function () {
+                var chart = this.chart,
+                    exitAnchor = this.exitAnchor = doc.createElement('div');
+                chart.renderTo.appendChild(exitAnchor);
+                this.makeElementAnExitAnchor(exitAnchor);
+            };
             /**
              * @private
-             * @param {Highcharts.BubbleLegendItem|Point|Highcharts.Series} item
              */
-            proxyLegendItem: function (item) {
-                if (!item.legendItem || !item.legendGroup) {
-                    return;
+            KeyboardNavigation.prototype.removeExitAnchor = function () {
+                if (this.exitAnchor && this.exitAnchor.parentNode) {
+                    this.exitAnchor.parentNode
+                        .removeChild(this.exitAnchor);
+                    delete this.exitAnchor;
                 }
-                var itemLabel = this.chart.langFormat('accessibility.legend.legendItem', {
-                        chart: this.chart,
-                        itemName: stripHTMLTags(item.name),
-                        item: item
-                    });
-                var attribs = {
-                        tabindex: -1,
-                        'aria-pressed': item.visible,
-                        'aria-label': itemLabel
-                    };
-                // Considers useHTML
-                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.
-             * @return {Highcharts.KeyboardNavigationHandler}
+             * @private
              */
-            getKeyboardNavigation: function () {
-                var keys = this.keyCodes,
-                    component = this,
-                    chart = this.chart;
-                return new KeyboardNavigationHandler(chart, {
-                    keyCodeMap: [
-                        [
-                            [keys.left, keys.right, keys.up, keys.down],
-                            function (keyCode) {
-                                return component.onKbdArrowKey(this, keyCode);
-                            }
-                        ],
-                        [
-                            [keys.enter, keys.space],
-                            function (keyCode) {
-                                if (H.isFirefox && keyCode === keys.space) { // #15520
-                                    return this.response.success;
-                                }
-                                return component.onKbdClick(this);
-                            }
-                        ],
-                        [
-                            [keys.pageDown, keys.pageUp],
-                            function (keyCode) {
-                                var direction = keyCode === keys.pageDown ? 1 : -1;
-                                component.highlightAdjacentLegendPage(direction);
-                                return this.response.success;
+            KeyboardNavigation.prototype.addExitAnchorEventsToEl = function (element) {
+                var chart = this.chart,
+                    keyboardNavigation = this;
+                this.eventProvider.addEvent(element, 'focus', function (ev) {
+                    var e = ev || win.event,
+                        focusComesFromChart = (e.relatedTarget &&
+                            chart.container.contains(e.relatedTarget)),
+                        comingInBackwards = !(focusComesFromChart || keyboardNavigation.exiting);
+                    if (comingInBackwards) {
+                        // Focus the container instead
+                        keyboardNavigation.tabbingInBackwards = true;
+                        keyboardNavigation.tabindexContainer.focus();
+                        delete keyboardNavigation.tabbingInBackwards;
+                        e.preventDefault();
+                        // Move to last valid keyboard nav module
+                        // Note the we don't run it, just set the index
+                        if (keyboardNavigation.modules &&
+                            keyboardNavigation.modules.length) {
+                            keyboardNavigation.currentModuleIx =
+                                keyboardNavigation.modules.length - 1;
+                            var curModule = keyboardNavigation.modules[keyboardNavigation.currentModuleIx];
+                            // Validate the module
+                            if (curModule &&
+                                curModule.validate && !curModule.validate()) {
+                                // Invalid. Try moving backwards to find next valid.
+                                keyboardNavigation.prev();
                             }
-                        ]
-                    ],
-                    validate: function () {
-                        return component.shouldHaveLegendNavigation();
-                    },
-                    init: function (direction) {
-                        return component.onKbdNavigationInit(direction);
-                    },
-                    terminate: function () {
-                        component.highlightedLegendItemIx = -1;
-                        chart.legend.allItems.forEach(function (item) { return item.setState('', true); });
+                            else if (curModule) {
+                                // We have a valid module, init it
+                                curModule.init(-1);
+                            }
+                        }
+                    }
+                    else {
+                        // Don't skip the next focus, we only skip once.
+                        keyboardNavigation.exiting = false;
                     }
                 });
-            },
+            };
             /**
+             * Remove all traces of keyboard navigation.
              * @private
-             * @param {Highcharts.KeyboardNavigationHandler} keyboardNavigationHandler
-             * @param {number} keyCode
-             * @return {number}
-             * Response code
              */
-            onKbdArrowKey: function (keyboardNavigationHandler, keyCode) {
-                var keys = this.keyCodes,
-                    response = keyboardNavigationHandler.response,
-                    chart = this.chart,
-                    a11yOptions = chart.options.accessibility,
-                    numItems = chart.legend.allItems.length,
-                    direction = (keyCode === keys.left || keyCode === keys.up) ? -1 : 1;
-                var res = chart.highlightLegendItem(this.highlightedLegendItemIx + direction);
-                if (res) {
-                    this.highlightedLegendItemIx += direction;
-                    return response.success;
-                }
-                if (numItems > 1 &&
-                    a11yOptions.keyboardNavigation.wrapAround) {
-                    keyboardNavigationHandler.init(direction);
-                    return response.success;
-                }
-                // No wrap, move
-                return response[direction > 0 ? 'next' : 'prev'];
-            },
+            KeyboardNavigation.prototype.destroy = function () {
+                this.removeExitAnchor();
+                this.eventProvider.removeAddedEvents();
+                this.chart.container.removeAttribute('tabindex');
+            };
+            return KeyboardNavigation;
+        }());
+        /* *
+         *
+         *  Class Namespace
+         *
+         * */
+        (function (KeyboardNavigation) {
+            /* *
+             *
+             *  Declarations
+             *
+             * */
+            /* *
+             *
+             *  Construction
+             *
+             * */
+            var composedItems = [];
+            /* *
+             *
+             *  Functions
+             *
+             * */
+            /* eslint-disable valid-jsdoc */
             /**
              * @private
-             * @param {Highcharts.KeyboardNavigationHandler} keyboardNavigationHandler
-             * @return {number} Response code
              */
-            onKbdClick: function (keyboardNavigationHandler) {
-                var legendItem = this.chart.legend.allItems[this.highlightedLegendItemIx];
-                if (legendItem && legendItem.a11yProxyElement) {
-                    legendItem.a11yProxyElement.click();
+            function compose(ChartClass) {
+                MenuComponent.compose(ChartClass);
+                if (composedItems.indexOf(ChartClass) === -1) {
+                    composedItems.push(ChartClass);
+                    var chartProto = ChartClass.prototype;
+                    chartProto.dismissPopupContent = chartDismissPopupContent;
                 }
-                return keyboardNavigationHandler.response.success;
-            },
+                if (composedItems.indexOf(doc) === -1) {
+                    composedItems.push(doc);
+                    addEvent(doc, 'keydown', documentOnKeydown);
+                }
+                return ChartClass;
+            }
+            KeyboardNavigation.compose = compose;
             /**
+             * Dismiss popup content in chart, including export menu and tooltip.
              * @private
-             * @return {boolean|undefined}
              */
-            shouldHaveLegendNavigation: function () {
-                var chart = this.chart,
-                    legendOptions = chart.options.legend || {},
-                    hasLegend = chart.legend && chart.legend.allItems,
-                    hasColorAxis = chart.colorAxis && chart.colorAxis.length,
-                    legendA11yOptions = (legendOptions.accessibility || {});
-                return !!(hasLegend &&
-                    chart.legend.display &&
-                    !hasColorAxis &&
-                    legendA11yOptions.enabled &&
-                    legendA11yOptions.keyboardNavigation &&
-                    legendA11yOptions.keyboardNavigation.enabled);
-            },
+            function chartDismissPopupContent() {
+                var chart = this;
+                fireEvent(this, 'dismissPopupContent', {}, function () {
+                    if (chart.tooltip) {
+                        chart.tooltip.hide(0);
+                    }
+                    chart.hideExportMenu();
+                });
+            }
             /**
+             * Add event listener to document to detect ESC key press and dismiss
+             * hover/popup content.
              * @private
-             * @param {number} direction
              */
-            onKbdNavigationInit: function (direction) {
-                var chart = this.chart,
-                    lastIx = chart.legend.allItems.length - 1,
-                    ixToHighlight = direction > 0 ? 0 : lastIx;
-                chart.highlightLegendItem(ixToHighlight);
-                this.highlightedLegendItemIx = ixToHighlight;
+            function documentOnKeydown(e) {
+                var keycode = e.which || e.keyCode;
+                var esc = 27;
+                if (keycode === esc && H.charts) {
+                    H.charts.forEach(function (chart) {
+                        if (chart && chart.dismissPopupContent) {
+                            chart.dismissPopupContent();
+                        }
+                    });
+                }
             }
-        });
+        })(KeyboardNavigation || (KeyboardNavigation = {}));
+        /* *
+         *
+         *  Default Export
+         *
+         * */
 
-        return LegendComponent;
+        return KeyboardNavigation;
     });
-    _registerModule(_modules, 'Accessibility/Components/MenuComponent.js', [_modules['Core/Chart/Chart.js'], _modules['Core/Utilities.js'], _modules['Accessibility/AccessibilityComponent.js'], _modules['Accessibility/KeyboardNavigationHandler.js'], _modules['Accessibility/Utils/ChartUtilities.js'], _modules['Accessibility/Utils/HTMLUtilities.js']], function (Chart, U, AccessibilityComponent, KeyboardNavigationHandler, ChartUtilities, HTMLUtilities) {
+    _registerModule(_modules, 'Accessibility/Components/LegendComponent.js', [_modules['Core/Animation/AnimationUtilities.js'], _modules['Core/Chart/Chart.js'], _modules['Core/Globals.js'], _modules['Core/Legend/Legend.js'], _modules['Core/Utilities.js'], _modules['Accessibility/AccessibilityComponent.js'], _modules['Accessibility/KeyboardNavigationHandler.js'], _modules['Accessibility/Utils/HTMLUtilities.js'], _modules['Accessibility/Utils/ChartUtilities.js']], function (A, Chart, H, Legend, U, AccessibilityComponent, KeyboardNavigationHandler, HTMLUtilities, ChartUtils) {
         /* *
          *
          *  (c) 2009-2021 Øystein Moseng
          *
-         *  Accessibility component for exporting menu.
+         *  Accessibility component for chart legend.
          *
          *  License: www.highcharts.com/license
          *
          *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
          *
          * */
-        var attr = U.attr,
-            extend = U.extend;
-        var getChartTitle = ChartUtilities.getChartTitle,
-            unhideChartElementFromAT = ChartUtilities.unhideChartElementFromAT;
-        var getFakeMouseEvent = HTMLUtilities.getFakeMouseEvent;
+        var animObject = A.animObject;
+        var addEvent = U.addEvent,
+            extend = U.extend,
+            fireEvent = U.fireEvent,
+            isNumber = U.isNumber,
+            pick = U.pick,
+            syncTimeout = U.syncTimeout;
+        var stripHTMLTags = HTMLUtilities.stripHTMLTagsFromString,
+            addClass = HTMLUtilities.addClass,
+            removeClass = HTMLUtilities.removeClass;
+        var getChartTitle = ChartUtils.getChartTitle;
         /* eslint-disable no-invalid-this, valid-jsdoc */
         /**
-         * Get the wrapped export button element of a chart.
-         *
-         * @private
-         * @param {Highcharts.Chart} chart
-         * @returns {Highcharts.SVGElement}
-         */
-        function getExportMenuButtonElement(chart) {
-            return chart.exportSVGElements && chart.exportSVGElements[0];
-        }
-        /**
-         * Show the export menu and focus the first item (if exists).
-         *
          * @private
-         * @function Highcharts.Chart#showExportMenu
          */
-        Chart.prototype.showExportMenu = function () {
-            var exportButton = getExportMenuButtonElement(this);
-            if (exportButton) {
-                var el = exportButton.element;
-                if (el.onclick) {
-                    el.onclick(getFakeMouseEvent('click'));
-                }
+        function scrollLegendToItem(legend, itemIx) {
+            var itemPage = legend.allItems[itemIx].pageIx,
+                curPage = legend.currentPage;
+            if (typeof itemPage !== 'undefined' && itemPage + 1 !== curPage) {
+                legend.scroll(1 + itemPage - curPage);
             }
-        };
+        }
         /**
          * @private
-         * @function Highcharts.Chart#hideExportMenu
          */
-        Chart.prototype.hideExportMenu = function () {
-            var chart = this,
-                exportList = chart.exportDivElements;
-            if (exportList && chart.exportContextMenu) {
-                // Reset hover states etc.
-                exportList.forEach(function (el) {
-                    if (el &&
-                        el.className === 'highcharts-menu-item' &&
-                        el.onmouseout) {
-                        el.onmouseout(getFakeMouseEvent('mouseout'));
-                    }
-                });
-                chart.highlightedExportItemIx = 0;
-                // Hide the menu div
-                chart.exportContextMenu.hideMenu();
-                // Make sure the chart has focus and can capture keyboard events
-                chart.container.focus();
-            }
-        };
+        function shouldDoLegendA11y(chart) {
+            var items = chart.legend && chart.legend.allItems,
+                legendA11yOptions = (chart.options.legend.accessibility || {});
+            return !!(items && items.length &&
+                !(chart.colorAxis && chart.colorAxis.length) &&
+                legendA11yOptions.enabled !== false);
+        }
         /**
-         * Highlight export menu item by index.
+         * Highlight legend item by index.
          *
          * @private
-         * @function Highcharts.Chart#highlightExportItem
+         * @function Highcharts.Chart#highlightLegendItem
          *
          * @param {number} ix
          *
          * @return {boolean}
          */
-        Chart.prototype.highlightExportItem = function (ix) {
-            var listItem = this.exportDivElements && this.exportDivElements[ix];
-            var curHighlighted = this.exportDivElements &&
-                    this.exportDivElements[this.highlightedExportItemIx];
-            if (listItem &&
-                listItem.tagName === 'LI' &&
-                !(listItem.children && listItem.children.length)) {
-                // Test if we have focus support for SVG elements
-                var hasSVGFocusSupport = !!(this.renderTo.getElementsByTagName('g')[0] || {}).focus;
-                // Only focus if we can set focus back to the elements after
-                // destroying the menu (#7422)
-                if (listItem.focus && hasSVGFocusSupport) {
-                    listItem.focus();
-                }
-                if (curHighlighted && curHighlighted.onmouseout) {
-                    curHighlighted.onmouseout(getFakeMouseEvent('mouseout'));
-                }
-                if (listItem.onmouseover) {
-                    listItem.onmouseover(getFakeMouseEvent('mouseover'));
-                }
-                this.highlightedExportItemIx = ix;
+        Chart.prototype.highlightLegendItem = function (ix) {
+            var items = this.legend.allItems;
+            var oldIx = this.accessibility &&
+                    this.accessibility.components.legend.highlightedLegendItemIx;
+            var itemToHighlight = items[ix];
+            if (itemToHighlight) {
+                if (isNumber(oldIx) && items[oldIx]) {
+                    fireEvent(items[oldIx].legendGroup.element, 'mouseout');
+                }
+                scrollLegendToItem(this.legend, ix);
+                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;
         };
-        /**
-         * Try to highlight the last valid export menu item.
-         *
-         * @private
-         * @function Highcharts.Chart#highlightLastExportItem
-         * @return {boolean}
-         */
-        Chart.prototype.highlightLastExportItem = function () {
-            var chart = this;
-            if (chart.exportDivElements) {
-                var i = chart.exportDivElements.length;
-                while (i--) {
-                    if (chart.highlightExportItem(i)) {
-                        return true;
-                    }
-                }
+        // Keep track of pressed state for legend items
+        addEvent(Legend, 'afterColorizeItem', function (e) {
+            var chart = this.chart,
+                a11yOptions = chart.options.accessibility,
+                legendItem = e.item;
+            if (a11yOptions.enabled && legendItem && legendItem.a11yProxyElement) {
+                legendItem.a11yProxyElement.buttonElement.setAttribute('aria-pressed', e.visible ? 'true' : 'false');
             }
-            return false;
-        };
-        /**
-         * @private
-         * @param {Highcharts.Chart} chart
-         */
-        function exportingShouldHaveA11y(chart) {
-            var exportingOpts = chart.options.exporting,
-                exportButton = getExportMenuButtonElement(chart);
-            return !!(exportingOpts &&
-                exportingOpts.enabled !== false &&
-                exportingOpts.accessibility &&
-                exportingOpts.accessibility.enabled &&
-                exportButton &&
-                exportButton.element);
-        }
+        });
         /**
-         * The MenuComponent class
+         * The LegendComponent class
          *
          * @private
          * @class
-         * @name Highcharts.MenuComponent
+         * @name Highcharts.LegendComponent
          */
-        var MenuComponent = function () { };
-        MenuComponent.prototype = new AccessibilityComponent();
-        extend(MenuComponent.prototype, /** @lends Highcharts.MenuComponent */ {
+        var LegendComponent = function () { };
+        LegendComponent.prototype = new AccessibilityComponent();
+        extend(LegendComponent.prototype, /** @lends Highcharts.LegendComponent */ {
             /**
              * Init the component
+             * @private
              */
             init: function () {
-                var chart = this.chart,
-                    component = this;
-                this.addEvent(chart, 'exportMenuShown', function () {
-                    component.onMenuShown();
+                var component = this;
+                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.proxyProvider.updateGroupProxyElementPositions('legend');
+                        component.updateLegendItemProxyVisibility();
+                        if (component.highlightedLegendItemIx > -1) {
+                            this.chart.highlightLegendItem(component.highlightedLegendItemIx);
+                        }
+                    }
                 });
-                this.addEvent(chart, 'exportMenuHidden', function () {
-                    component.onMenuHidden();
+                this.addEvent(Legend, 'afterPositionItem', function (e) {
+                    if (this.chart === component.chart && this.chart.renderer) {
+                        component.updateProxyPositionForItem(e.item);
+                    }
+                });
+                this.addEvent(Legend, 'afterRender', function () {
+                    if (this.chart === component.chart &&
+                        this.chart.renderer &&
+                        component.recreateProxies()) {
+                        syncTimeout(function () { return component.proxyProvider.updateGroupProxyElementPositions('legend'); }, animObject(pick(this.chart.renderer.globalAnimation, true)).duration);
+                    }
                 });
-                this.createProxyGroup();
             },
             /**
+             * Update visibility of legend items when using paged legend
              * @private
              */
-            onMenuHidden: function () {
-                var menu = this.chart.exportContextMenu;
-                if (menu) {
-                    menu.setAttribute('aria-hidden', 'true');
+            updateLegendItemProxyVisibility: function () {
+                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) {
+                    if (item.a11yProxyElement) {
+                        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 = '';
+                        }
+                    }
+                });
+            },
+            /**
+             * @private
+             */
+            onChartRender: function () {
+                if (!shouldDoLegendA11y(this.chart)) {
+                    this.removeProxies();
                 }
-                this.isExportMenuShown = false;
-                this.setExportButtonExpandedState('false');
             },
             /**
              * @private
              */
-            onMenuShown: function () {
-                var chart = this.chart,
-                    menu = chart.exportContextMenu;
-                if (menu) {
-                    this.addAccessibleContextMenuAttribs();
-                    unhideChartElementFromAT(chart, menu);
+            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;
+                        }
+                    }
                 }
-                this.isExportMenuShown = true;
-                this.setExportButtonExpandedState('true');
             },
             /**
              * @private
-             * @param {string} stateStr
              */
-            setExportButtonExpandedState: function (stateStr) {
-                if (this.exportButtonProxy) {
-                    this.exportButtonProxy.buttonElement.setAttribute('aria-expanded', stateStr);
+            updateProxyPositionForItem: function (item) {
+                if (item.a11yProxyElement) {
+                    item.a11yProxyElement.refreshPosition();
                 }
             },
             /**
-             * Called on each render of the chart. We need to update positioning of the
-             * proxy overlay.
+             * Returns false if legend a11y is disabled and proxies were not created,
+             * true otherwise.
+             * @private
              */
-            onChartRender: function () {
-                this.proxyProvider.clearGroup('chartMenu');
-                this.proxyMenuButton();
+            recreateProxies: function () {
+                this.removeProxies();
+                if (shouldDoLegendA11y(this.chart)) {
+                    this.addLegendProxyGroup();
+                    this.proxyLegendItems();
+                    this.updateLegendItemProxyVisibility();
+                    this.updateLegendTitle();
+                    return true;
+                }
+                return false;
             },
             /**
              * @private
              */
-            proxyMenuButton: function () {
+            removeProxies: function () {
+                this.proxyProvider.removeGroup('legend');
+            },
+            /**
+             * @private
+             */
+            updateLegendTitle: 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
+                var legendTitle = stripHTMLTags((chart.legend &&
+                        chart.legend.options.title &&
+                        chart.legend.options.title.text ||
+                        '').replace(/<br ?\/?>/g, ' '));
+                var legendLabel = chart.langFormat('accessibility.legend.legendLabel' + (legendTitle ? '' : 'NoTitle'), {
+                        chart: chart,
+                        legendTitle: legendTitle,
+                        chartTitle: getChartTitle(chart)
                     });
-                }
+                this.proxyProvider.updateGroupAttrs('legend', {
+                    'aria-label': legendLabel
+                });
             },
             /**
              * @private
              */
-            createProxyGroup: function () {
-                var chart = this.chart;
-                if (chart && this.proxyProvider) {
-                    this.proxyProvider.addGroup('chartMenu', 'div');
-                }
+            addLegendProxyGroup: function () {
+                var a11yOptions = this.chart.options.accessibility;
+                var groupRole = a11yOptions.landmarkVerbosity === 'all' ? 'region' : null;
+                this.proxyProvider.addGroup('legend', 'ul', {
+                    'aria-label': '_placeholder_',
+                    role: groupRole
+                });
             },
             /**
              * @private
              */
-            addAccessibleContextMenuAttribs: function () {
-                var chart = this.chart,
-                    exportList = chart.exportDivElements;
-                if (exportList && exportList.length) {
-                    // Set tabindex on the menu items to allow focusing by script
-                    // Set role to give screen readers a chance to pick up the contents
-                    exportList.forEach(function (item) {
-                        if (item) {
-                            if (item.tagName === 'LI' &&
-                                !(item.children && item.children.length)) {
-                                item.setAttribute('tabindex', -1);
-                            }
-                            else {
-                                item.setAttribute('aria-hidden', 'true');
-                            }
-                        }
-                    });
-                    // Set accessibility properties on parent div
-                    var parentDiv = (exportList[0] && exportList[0].parentNode);
-                    if (parentDiv) {
-                        attr(parentDiv, {
-                            'aria-hidden': void 0,
-                            'aria-label': chart.langFormat('accessibility.exporting.chartMenuLabel', { chart: chart }),
-                            role: 'list' // Needed for webkit/VO
-                        });
+            proxyLegendItems: function () {
+                var component = this,
+                    items = (this.chart.legend &&
+                        this.chart.legend.allItems || []);
+                items.forEach(function (item) {
+                    if (item.legendItem && item.legendItem.element) {
+                        component.proxyLegendItem(item);
                     }
+                });
+            },
+            /**
+             * @private
+             * @param {Highcharts.BubbleLegendItem|Point|Highcharts.Series} item
+             */
+            proxyLegendItem: function (item) {
+                if (!item.legendItem || !item.legendGroup) {
+                    return;
                 }
+                var itemLabel = this.chart.langFormat('accessibility.legend.legendItem', {
+                        chart: this.chart,
+                        itemName: stripHTMLTags(item.name),
+                        item: item
+                    });
+                var attribs = {
+                        tabindex: -1,
+                        'aria-pressed': item.visible,
+                        'aria-label': itemLabel
+                    };
+                // Considers useHTML
+                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.
@@ -3773,122 +3907,116 @@
              */
             getKeyboardNavigation: function () {
                 var keys = this.keyCodes,
-                    chart = this.chart,
-                    component = this;
+                    component = this,
+                    chart = this.chart;
                 return new KeyboardNavigationHandler(chart, {
                     keyCodeMap: [
-                        // Arrow prev handler
                         [
-                            [keys.left, keys.up],
-                            function () {
-                                return component.onKbdPrevious(this);
+                            [keys.left, keys.right, keys.up, keys.down],
+                            function (keyCode) {
+                                return component.onKbdArrowKey(this, keyCode);
                             }
                         ],
-                        // Arrow next handler
                         [
-                            [keys.right, keys.down],
-                            function () {
-                                return component.onKbdNext(this);
+                            [keys.enter, keys.space],
+                            function (keyCode) {
+                                if (H.isFirefox && keyCode === keys.space) { // #15520
+                                    return this.response.success;
+                                }
+                                return component.onKbdClick(this);
                             }
                         ],
-                        // Click handler
                         [
-                            [keys.enter, keys.space],
-                            function () {
-                                return component.onKbdClick(this);
+                            [keys.pageDown, keys.pageUp],
+                            function (keyCode) {
+                                var direction = keyCode === keys.pageDown ? 1 : -1;
+                                component.highlightAdjacentLegendPage(direction);
+                                return this.response.success;
                             }
                         ]
-                    ],
-                    // Only run exporting navigation if exporting support exists and is
-                    // enabled on chart
+                    ],
                     validate: function () {
-                        return !!chart.exporting &&
-                            chart.options.exporting.enabled !== false &&
-                            chart.options.exporting.accessibility.enabled !==
-                                false;
+                        return component.shouldHaveLegendNavigation();
                     },
-                    // Focus export menu button
-                    init: function () {
-                        var proxy = component.exportButtonProxy;
-                        var svgEl = component.chart.exportingGroup;
-                        if (proxy && svgEl) {
-                            chart.setFocusToElement(svgEl, proxy.buttonElement);
-                        }
+                    init: function (direction) {
+                        return component.onKbdNavigationInit(direction);
                     },
-                    // Hide the menu
                     terminate: function () {
-                        chart.hideExportMenu();
+                        component.highlightedLegendItemIx = -1;
+                        chart.legend.allItems.forEach(function (item) { return item.setState('', true); });
                     }
                 });
             },
             /**
              * @private
              * @param {Highcharts.KeyboardNavigationHandler} keyboardNavigationHandler
-             * @return {number} Response code
+             * @param {number} keyCode
+             * @return {number}
+             * Response code
              */
-            onKbdPrevious: function (keyboardNavigationHandler) {
-                var chart = this.chart;
-                var a11yOptions = chart.options.accessibility;
-                var response = keyboardNavigationHandler.response;
-                // Try to highlight prev item in list. Highlighting e.g.
-                // separators will fail.
-                var i = chart.highlightedExportItemIx || 0;
-                while (i--) {
-                    if (chart.highlightExportItem(i)) {
-                        return response.success;
-                    }
+            onKbdArrowKey: function (keyboardNavigationHandler, keyCode) {
+                var keys = this.keyCodes,
+                    response = keyboardNavigationHandler.response,
+                    chart = this.chart,
+                    a11yOptions = chart.options.accessibility,
+                    numItems = chart.legend.allItems.length,
+                    direction = (keyCode === keys.left || keyCode === keys.up) ? -1 : 1;
+                var res = chart.highlightLegendItem(this.highlightedLegendItemIx + direction);
+                if (res) {
+                    this.highlightedLegendItemIx += direction;
+                    return response.success;
                 }
-                // We failed, so wrap around or move to prev module
-                if (a11yOptions.keyboardNavigation.wrapAround) {
-                    chart.highlightLastExportItem();
+                if (numItems > 1 &&
+                    a11yOptions.keyboardNavigation.wrapAround) {
+                    keyboardNavigationHandler.init(direction);
                     return response.success;
                 }
-                return response.prev;
+                // No wrap, move
+                return response[direction > 0 ? 'next' : 'prev'];
             },
             /**
              * @private
              * @param {Highcharts.KeyboardNavigationHandler} keyboardNavigationHandler
              * @return {number} Response code
              */
-            onKbdNext: function (keyboardNavigationHandler) {
-                var chart = this.chart;
-                var a11yOptions = chart.options.accessibility;
-                var response = keyboardNavigationHandler.response;
-                // Try to highlight next item in list. Highlighting e.g.
-                // separators will fail.
-                for (var i = (chart.highlightedExportItemIx || 0) + 1; i < chart.exportDivElements.length; ++i) {
-                    if (chart.highlightExportItem(i)) {
-                        return response.success;
-                    }
-                }
-                // We failed, so wrap around or move to next module
-                if (a11yOptions.keyboardNavigation.wrapAround) {
-                    chart.highlightExportItem(0);
-                    return response.success;
+            onKbdClick: function (keyboardNavigationHandler) {
+                var legendItem = this.chart.legend.allItems[this.highlightedLegendItemIx];
+                if (legendItem && legendItem.a11yProxyElement) {
+                    legendItem.a11yProxyElement.click();
                 }
-                return response.next;
+                return keyboardNavigationHandler.response.success;
             },
             /**
              * @private
-             * @param {Highcharts.KeyboardNavigationHandler} keyboardNavigationHandler
-             * @return {number} Response code
+             * @return {boolean|undefined}
              */
-            onKbdClick: function (keyboardNavigationHandler) {
-                var chart = this.chart;
-                var curHighlightedItem = chart.exportDivElements[chart.highlightedExportItemIx];
-                var exportButtonElement = getExportMenuButtonElement(chart).element;
-                if (this.isExportMenuShown) {
-                    this.fakeClickEvent(curHighlightedItem);
-                }
-                else {
-                    this.fakeClickEvent(exportButtonElement);
-                    chart.highlightExportItem(0);
-                }
-                return keyboardNavigationHandler.response.success;
+            shouldHaveLegendNavigation: function () {
+                var chart = this.chart,
+                    legendOptions = chart.options.legend || {},
+                    hasLegend = chart.legend && chart.legend.allItems,
+                    hasColorAxis = chart.colorAxis && chart.colorAxis.length,
+                    legendA11yOptions = (legendOptions.accessibility || {});
+                return !!(hasLegend &&
+                    chart.legend.display &&
+                    !hasColorAxis &&
+                    legendA11yOptions.enabled &&
+                    legendA11yOptions.keyboardNavigation &&
+                    legendA11yOptions.keyboardNavigation.enabled);
+            },
+            /**
+             * @private
+             * @param {number} direction
+             */
+            onKbdNavigationInit: function (direction) {
+                var chart = this.chart,
+                    lastIx = chart.legend.allItems.length - 1,
+                    ixToHighlight = direction > 0 ? 0 : lastIx;
+                chart.highlightLegendItem(ixToHighlight);
+                this.highlightedLegendItemIx = ixToHighlight;
             }
         });
 
-        return MenuComponent;
+        return LegendComponent;
     });
     _registerModule(_modules, 'Accessibility/Components/SeriesComponent/SeriesDescriber.js', [_modules['Accessibility/Components/AnnotationsA11y.js'], _modules['Accessibility/Utils/ChartUtilities.js'], _modules['Core/FormatUtilities.js'], _modules['Accessibility/Utils/HTMLUtilities.js'], _modules['Core/Utilities.js']], function (AnnotationsA11y, ChartUtilities, F, HTMLUtilities, U) {
         /* *
@@ -7609,7 +7737,7 @@
 
         return RangeSelector;
     });
-    _registerModule(_modules, 'Accessibility/Components/RangeSelectorComponent.js', [_modules['Extensions/RangeSelector.js'], _modules['Accessibility/AccessibilityComponent.js'], _modules['Accessibility/Utils/ChartUtilities.js'], _modules['Accessibility/Utils/Announcer.js'], _modules['Core/Chart/Chart.js'], _modules['Accessibility/KeyboardNavigationHandler.js'], _modules['Core/Utilities.js']], function (RangeSelector, AccessibilityComponent, ChartUtilities, Announcer, Chart, KeyboardNavigationHandler, U) {
+    _registerModule(_modules, 'Accessibility/Components/RangeSelectorComponent.js', [_modules['Extensions/RangeSelector.js'], _modules['Accessibility/AccessibilityComponent.js'], _modules['Accessibility/Utils/ChartUtilities.js'], _modules['Accessibility/Utils/Announcer.js'], _modules['Accessibility/KeyboardNavigationHandler.js'], _modules['Core/Utilities.js']], function (RangeSelector, AccessibilityComponent, ChartUtilities, Announcer, KeyboardNavigationHandler, U) {
         /* *
          *
          *  (c) 2009-2021 Øystein Moseng
@@ -7621,12 +7749,32 @@
          *  !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
          *
          * */
+        var __extends = (this && this.__extends) || (function () {
+                var extendStatics = function (d,
+            b) {
+                    extendStatics = Object.setPrototypeOf ||
+                        ({ __proto__: [] } instanceof Array && function (d,
+            b) { d.__proto__ = b; }) ||
+                        function (d,
+            b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+                return extendStatics(d, b);
+            };
+            return function (d, b) {
+                extendStatics(d, b);
+                function __() { this.constructor = d; }
+                d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+            };
+        })();
         var unhideChartElementFromAT = ChartUtilities.unhideChartElementFromAT,
             getAxisRangeDescription = ChartUtilities.getAxisRangeDescription;
         var addEvent = U.addEvent,
-            attr = U.attr,
-            extend = U.extend;
-        /* eslint-disable no-invalid-this, valid-jsdoc */
+            attr = U.attr;
+        /* *
+         *
+         *  Functions
+         *
+         * */
+        /* eslint-disable valid-jsdoc */
         /**
          * @private
          */
@@ -7638,49 +7786,11 @@
                 chart.rangeSelector.minInput &&
                 chart.rangeSelector.maxInput);
         }
-        /**
-         * Highlight range selector button by index.
-         *
-         * @private
-         * @function Highcharts.Chart#highlightRangeSelectorButton
+        /* *
          *
-         * @param {number} ix
+         *  Class
          *
-         * @return {boolean}
-         */
-        Chart.prototype.highlightRangeSelectorButton = function (ix) {
-            var buttons = (this.rangeSelector &&
-                    this.rangeSelector.buttons ||
-                    []);
-            var curHighlightedIx = this.highlightedRangeSelectorItemIx;
-            var curSelectedIx = (this.rangeSelector &&
-                    this.rangeSelector.selected);
-            // Deselect old
-            if (typeof curHighlightedIx !== 'undefined' &&
-                buttons[curHighlightedIx] &&
-                curHighlightedIx !== curSelectedIx) {
-                buttons[curHighlightedIx].setState(this.oldRangeSelectorItemState || 0);
-            }
-            // Select new
-            this.highlightedRangeSelectorItemIx = ix;
-            if (buttons[ix]) {
-                this.setFocusToElement(buttons[ix].box, buttons[ix].element);
-                if (ix !== curSelectedIx) {
-                    this.oldRangeSelectorItemState = buttons[ix].state;
-                    buttons[ix].setState(1);
-                }
-                return true;
-            }
-            return false;
-        };
-        // Range selector does not have destroy-setup for class instance events - so
-        // we set it on the class and call the component from here.
-        addEvent(RangeSelector, 'afterBtnClick', function () {
-            if (this.chart.accessibility &&
-                this.chart.accessibility.components.rangeSelector) {
-                return this.chart.accessibility.components.rangeSelector.onAfterBtnClick();
-            }
-        });
+         * */
         /**
          * The RangeSelectorComponent class
          *
@@ -7688,21 +7798,37 @@
          * @class
          * @name Highcharts.RangeSelectorComponent
          */
-        var RangeSelectorComponent = function () { };
-        RangeSelectorComponent.prototype = new AccessibilityComponent();
-        extend(RangeSelectorComponent.prototype, /** @lends Highcharts.RangeSelectorComponent */ {
+        var RangeSelectorComponent = /** @class */ (function (_super) {
+                __extends(RangeSelectorComponent, _super);
+            function RangeSelectorComponent() {
+                /* *
+                 *
+                 *  Properties
+                 *
+                 * */
+                var _this = _super !== null && _super.apply(this,
+                    arguments) || this;
+                _this.announcer = void 0;
+                return _this;
+            }
+            /* *
+             *
+             *  Functions
+             *
+             * */
+            /* eslint-disable valid-jsdoc */
             /**
              * Init the component
              * @private
              */
-            init: function () {
+            RangeSelectorComponent.prototype.init = function () {
                 var chart = this.chart;
                 this.announcer = new Announcer(chart, 'polite');
-            },
+            };
             /**
              * Called on first render/updates to the chart, including options changes.
              */
-            onChartUpdate: function () {
+            RangeSelectorComponent.prototype.onChartUpdate = function () {
                 var chart = this.chart,
                     component = this,
                     rangeSelector = chart.rangeSelector;
@@ -7728,12 +7854,12 @@
                         }
                     });
                 }
-            },
+            };
             /**
              * Hide buttons from AT when showing dropdown, and vice versa.
              * @private
              */
-            updateSelectorVisibility: function () {
+            RangeSelectorComponent.prototype.updateSelectorVisibility = function () {
                 var chart = this.chart;
                 var rangeSelector = chart.rangeSelector;
                 var dropdown = (rangeSelector &&
@@ -7755,12 +7881,12 @@
                     }
                     buttons.forEach(function (btn) { return unhideChartElementFromAT(chart, btn.element); });
                 }
-            },
+            };
             /**
              * Set accessibility related attributes on dropdown element.
              * @private
              */
-            setDropdownAttrs: function () {
+            RangeSelectorComponent.prototype.setDropdownAttrs = function () {
                 var chart = this.chart;
                 var dropdown = (chart.rangeSelector &&
                         chart.rangeSelector.dropdown);
@@ -7769,34 +7895,34 @@
                     dropdown.setAttribute('aria-label', label);
                     dropdown.setAttribute('tabindex', -1);
                 }
-            },
+            };
             /**
              * @private
              * @param {Highcharts.SVGElement} button
              */
-            setRangeButtonAttrs: function (button) {
+            RangeSelectorComponent.prototype.setRangeButtonAttrs = function (button) {
                 attr(button.element, {
                     tabindex: -1,
                     role: 'button'
                 });
-            },
+            };
             /**
              * @private
              */
-            setRangeInputAttrs: function (input, langKey) {
+            RangeSelectorComponent.prototype.setRangeInputAttrs = function (input, langKey) {
                 var chart = this.chart;
                 attr(input, {
                     tabindex: -1,
                     'aria-label': chart.langFormat(langKey, { chart: chart })
                 });
-            },
+            };
             /**
              * @private
              * @param {Highcharts.KeyboardNavigationHandler} keyboardNavigationHandler
              * @param {number} keyCode
              * @return {number} Response code
              */
-            onButtonNavKbdArrowKey: function (keyboardNavigationHandler, keyCode) {
+            RangeSelectorComponent.prototype.onButtonNavKbdArrowKey = function (keyboardNavigationHandler, keyCode) {
                 var response = keyboardNavigationHandler.response,
                     keys = this.keyCodes,
                     chart = this.chart,
@@ -7812,11 +7938,11 @@
                     return response[direction > 0 ? 'next' : 'prev'];
                 }
                 return response.success;
-            },
+            };
             /**
              * @private
              */
-            onButtonNavKbdClick: function (keyboardNavigationHandler) {
+            RangeSelectorComponent.prototype.onButtonNavKbdClick = function (keyboardNavigationHandler) {
                 var response = keyboardNavigationHandler.response,
                     chart = this.chart,
                     wasDisabled = chart.oldRangeSelectorItemState === 3;
@@ -7824,13 +7950,13 @@
                     this.fakeClickEvent(chart.rangeSelector.buttons[chart.highlightedRangeSelectorItemIx].element);
                 }
                 return response.success;
-            },
+            };
             /**
              * Called whenever a range selector button has been clicked, either by
              * mouse, touch, or kbd/voice/other.
              * @private
              */
-            onAfterBtnClick: function () {
+            RangeSelectorComponent.prototype.onAfterBtnClick = function () {
                 var chart = this.chart;
                 var axisRangeDescription = getAxisRangeDescription(chart.xAxis[0]);
                 var announcement = chart.langFormat('accessibility.rangeSelector.clickButtonAnnouncement', { chart: chart,
@@ -7838,11 +7964,11 @@
                 if (announcement) {
                     this.announcer.announce(announcement);
                 }
-            },
+            };
             /**
              * @private
              */
-            onInputKbdMove: function (direction) {
+            RangeSelectorComponent.prototype.onInputKbdMove = function (direction) {
                 var chart = this.chart;
                 var rangeSel = chart.rangeSelector;
                 var newIx = chart.highlightedInputRangeIx = (chart.highlightedInputRangeIx || 0) + direction;
@@ -7860,12 +7986,12 @@
                         chart.setFocusToElement(svgEl, inputEl);
                     }
                 }
-            },
+            };
             /**
              * @private
              * @param {number} direction
              */
-            onInputNavInit: function (direction) {
+            RangeSelectorComponent.prototype.onInputNavInit = function (direction) {
                 var _this = this;
                 var component = this;
                 var chart = this.chart;
@@ -7901,11 +8027,11 @@
                         maxRemover_1();
                     };
                 }
-            },
+            };
             /**
              * @private
              */
-            onInputNavTerminate: function () {
+            RangeSelectorComponent.prototype.onInputNavTerminate = function () {
                 var rangeSel = (this.chart.rangeSelector || {});
                 if (rangeSel.maxInput) {
                     rangeSel.hideInput('max');
@@ -7917,11 +8043,11 @@
                     this.removeInputKeydownHandler();
                     delete this.removeInputKeydownHandler;
                 }
-            },
+            };
             /**
              * @private
              */
-            initDropdownNav: function () {
+            RangeSelectorComponent.prototype.initDropdownNav = function () {
                 var _this = this;
                 var chart = this.chart;
                 var rangeSelector = chart.rangeSelector;
@@ -7945,13 +8071,13 @@
                         }
                     });
                 }
-            },
+            };
             /**
              * Get navigation for the range selector buttons.
              * @private
              * @return {Highcharts.KeyboardNavigationHandler} The module object.
              */
-            getRangeSelectorButtonNavigation: function () {
+            RangeSelectorComponent.prototype.getRangeSelectorButtonNavigation = function () {
                 var chart = this.chart;
                 var keys = this.keyCodes;
                 var component = this;
@@ -7992,14 +8118,14 @@
                         }
                     }
                 });
-            },
+            };
             /**
              * Get navigation for the range selector input boxes.
              * @private
              * @return {Highcharts.KeyboardNavigationHandler}
              *         The module object.
              */
-            getRangeSelectorInputNavigation: function () {
+            RangeSelectorComponent.prototype.getRangeSelectorInputNavigation = function () {
                 var chart = this.chart;
                 var component = this;
                 return new KeyboardNavigationHandler(chart, {
@@ -8014,22 +8140,22 @@
                         component.onInputNavTerminate();
                     }
                 });
-            },
+            };
             /**
              * Get keyboard navigation handlers for this component.
              * @return {Array<Highcharts.KeyboardNavigationHandler>}
              *         List of module objects.
              */
-            getKeyboardNavigation: function () {
+            RangeSelectorComponent.prototype.getKeyboardNavigation = function () {
                 return [
                     this.getRangeSelectorButtonNavigation(),
                     this.getRangeSelectorInputNavigation()
                 ];
-            },
+            };
             /**
              * Remove component traces
              */
-            destroy: function () {
+            RangeSelectorComponent.prototype.destroy = function () {
                 if (this.removeDropdownKeydownHandler) {
                     this.removeDropdownKeydownHandler();
                 }
@@ -8039,8 +8165,99 @@
                 if (this.announcer) {
                     this.announcer.destroy();
                 }
+            };
+            return RangeSelectorComponent;
+        }(AccessibilityComponent));
+        /* *
+         *
+         *  Class Namespace
+         *
+         * */
+        (function (RangeSelectorComponent) {
+            /* *
+             *
+             *  Declarations
+             *
+             * */
+            /* *
+             *
+             *  Constants
+             *
+             * */
+            var composedClasses = [];
+            /* *
+             *
+             *  Functions
+             *
+             * */
+            /* eslint-disable valid-jsdoc */
+            /**
+             * Highlight range selector button by index.
+             *
+             * @private
+             * @function Highcharts.Chart#highlightRangeSelectorButton
+             *
+             * @param {number} ix
+             *
+             * @return {boolean}
+             */
+            function chartHighlightRangeSelectorButton(ix) {
+                var buttons = (this.rangeSelector &&
+                        this.rangeSelector.buttons ||
+                        []);
+                var curHighlightedIx = this.highlightedRangeSelectorItemIx;
+                var curSelectedIx = (this.rangeSelector &&
+                        this.rangeSelector.selected);
+                // Deselect old
+                if (typeof curHighlightedIx !== 'undefined' &&
+                    buttons[curHighlightedIx] &&
+                    curHighlightedIx !== curSelectedIx) {
+                    buttons[curHighlightedIx].setState(this.oldRangeSelectorItemState || 0);
+                }
+                // Select new
+                this.highlightedRangeSelectorItemIx = ix;
+                if (buttons[ix]) {
+                    this.setFocusToElement(buttons[ix].box, buttons[ix].element);
+                    if (ix !== curSelectedIx) {
+                        this.oldRangeSelectorItemState = buttons[ix].state;
+                        buttons[ix].setState(1);
+                    }
+                    return true;
+                }
+                return false;
             }
-        });
+            /**
+             * @private
+             */
+            function compose(ChartClass, RangeSelectorClass) {
+                if (composedClasses.indexOf(ChartClass) === -1) {
+                    composedClasses.push(ChartClass);
+                    var chartProto = ChartClass.prototype;
+                    chartProto.highlightRangeSelectorButton = chartHighlightRangeSelectorButton;
+                }
+                if (composedClasses.indexOf(RangeSelectorClass) === -1) {
+                    composedClasses.push(RangeSelectorClass);
+                    addEvent(RangeSelector, 'afterBtnClick', rangeSelectorAfterBtnClick);
+                }
+            }
+            RangeSelectorComponent.compose = compose;
+            /**
+             * Range selector does not have destroy-setup for class instance events - so
+             * we set it on the class and call the component from here.
+             * @private
+             */
+            function rangeSelectorAfterBtnClick() {
+                if (this.chart.accessibility &&
+                    this.chart.accessibility.components.rangeSelector) {
+                    return this.chart.accessibility.components.rangeSelector.onAfterBtnClick();
+                }
+            }
+        })(RangeSelectorComponent || (RangeSelectorComponent = {}));
+        /* *
+         *
+         *  Export Default
+         *
+         * */
 
         return RangeSelectorComponent;
     });
@@ -11458,12 +11675,16 @@
             /**
              * @private
              */
-            function compose(ChartClass, PointClass, SeriesClass, SVGElementClass) {
+            function compose(ChartClass, PointClass, SeriesClass, SVGElementClass, RangeSelectorClass) {
                 A11yI18n.compose(ChartClass);
                 FocusBorder.compose(ChartClass, SVGElementClass);
                 KeyboardNavigation.compose(ChartClass);
+                MenuComponent.compose(ChartClass);
                 NewDataAnnouncer.compose(SeriesClass);
                 SeriesComponent.compose(ChartClass, PointClass, SeriesClass);
+                if (RangeSelectorClass) {
+                    RangeSelectorComponent.compose(ChartClass, RangeSelectorClass);
+                }
                 if (composedClasses.indexOf(ChartClass) === -1) {
                     composedClasses.push(ChartClass);
                     var chartProto = ChartClass.prototype;
@@ -11543,7 +11764,7 @@
         G.AccessibilityComponent = AccessibilityComponent;
         G.KeyboardNavigationHandler = KeyboardNavigationHandler;
         G.SeriesAccessibilityDescriber = SeriesDescriber;
-        Accessibility.compose(G.Chart, G.Point, G.Series, G.SVGElement);
+        Accessibility.compose(G.Chart, G.Point, G.Series, G.SVGElement, G.RangeSelector);
 
     });
 }));