Fixed legend kbd issues #16520, #16545, #16467.

highcharts · Dec 1, 2021 · d9e250c · d9e250c
1 parent cf81cfa
commit d9e250c
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 11 deletions.
diff --git a/ts/Accessibility/Components/LegendComponent.ts b/ts/Accessibility/Components/LegendComponent.ts
@@ -30,6 +30,7 @@ const {
     animObject
 } = A;
 import H from '../../Core/Globals.js';
+const { doc } = H;
 import Legend from '../../Core/Legend/Legend.js';
 import U from '../../Core/Utilities.js';
 const {
@@ -161,8 +162,8 @@ class LegendComponent extends AccessibilityComponent {
      *
      * */
 
-
     public highlightedLegendItemIx: number = NaN;
+    private proxyGroup: HTMLElement|null = null;
 
 
     /* *
@@ -323,13 +324,22 @@ class LegendComponent extends AccessibilityComponent {
      * @private
      */
     public recreateProxies(): boolean {
+        const focusedElement = doc.activeElement;
+        const proxyGroup = this.proxyGroup;
+        const shouldRestoreFocus = focusedElement && proxyGroup &&
+            proxyGroup.contains(focusedElement);
+
         this.removeProxies();
 
         if (shouldDoLegendA11y(this.chart)) {
             this.addLegendProxyGroup();
             this.proxyLegendItems();
             this.updateLegendItemProxyVisibility();
             this.updateLegendTitle();
+
+            if (shouldRestoreFocus) {
+                (focusedElement as HTMLElement).focus();
+            }
             return true;
         }
         return false;
@@ -380,7 +390,7 @@ class LegendComponent extends AccessibilityComponent {
         const groupRole = a11yOptions.landmarkVerbosity === 'all' ?
             'region' : null;
 
-        this.proxyProvider.addGroup('legend', 'ul', {
+        this.proxyGroup = this.proxyProvider.addGroup('legend', 'ul', {
             // Filled by updateLegendTitle, to keep up to date without
             // recreating group
             'aria-label': '_placeholder_',
@@ -507,11 +517,8 @@ class LegendComponent extends AccessibilityComponent {
 
 
     /**
+     * Arrow key navigation
      * @private
-     * @param {Highcharts.KeyboardNavigationHandler} keyboardNavigationHandler
-     * @param {number} keyCode
-     * @return {number}
-     * Response code
      */
     public onKbdArrowKey(
         keyboardNavigationHandler: KeyboardNavigationHandler,
@@ -540,8 +547,7 @@ class LegendComponent extends AccessibilityComponent {
             return response.success;
         }
 
-        // No wrap, move
-        return response[direction > 0 ? 'next' : 'prev'];
+        return response.success;
     }
 
 

diff --git a/ts/Accessibility/ProxyProvider.ts b/ts/Accessibility/ProxyProvider.ts
@@ -140,14 +140,17 @@ class ProxyProvider {
     /**
      * Create a group that will contain proxy elements. The group order is
      * automatically updated according to the last group order keys.
+     * 
+     * Returns the added group.
      */
     public addGroup(
         groupKey: string,
         groupType: ProxyElement.GroupType,
         attributes?: HTMLAttributes
-    ): void {
-        if (this.groups[groupKey]) {
-            return;
+    ): HTMLElement {
+        const existingGroup = this.groups[groupKey];
+        if (existingGroup) {
+            return existingGroup.groupElement;
         }
 
         const proxyContainer = this.domElementProvider.createElement(groupType);
@@ -183,6 +186,8 @@ class ProxyProvider {
         this.afterChartProxyPosContainer.appendChild(groupElement);
 
         this.updateGroupOrder(this.groupOrder);
+
+        return groupElement;
     }