fix: (CXSPA-6857) - Footer tabbing fix (#18777)

Co-authored-by: Piotr Bartkowiak <pbartkowiak@divante.pl>
SAP · May 15, 2024 · 4c58e70 · 4c58e70
1 parent d5553f7
commit 4c58e70
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 1 deletion.
diff --git a/projects/storefrontlib/cms-components/navigation/navigation/navigation-ui.component.html b/projects/storefrontlib/cms-components/navigation/navigation/navigation-ui.component.html
@@ -46,7 +46,7 @@
         [style]="node.styleAttributes"
         [class]="node.styleClasses"
         (click)="closeIfClickedTheSameLink(node)"
-        [tabindex]="depth > 0 && !node.children ? -1 : 0"
+        [tabindex]="getTabIndex(node, depth)"
         (focus)="depth || reinitializeMenu()"
         (keydown.space)="toggleOpen($any($event))"
       >

diff --git a/projects/storefrontlib/cms-components/navigation/navigation/navigation-ui.component.spec.ts b/projects/storefrontlib/cms-components/navigation/navigation/navigation-ui.component.spec.ts
@@ -385,5 +385,17 @@ describe('Navigation UI Component', () => {
       navigationComponent['arrowControls'].next(arrowUpEvent);
       expect(document.activeElement).toEqual(firstChild.nativeElement);
     });
+
+    it('should restore default tabbing order for non flyout navigation', () => {
+      const childNode = {
+        title: 'Child',
+        url: '/child',
+      };
+      navigationComponent.flyout = true;
+      expect(navigationComponent.getTabIndex(childNode, 1)).toEqual(-1);
+
+      navigationComponent.flyout = false;
+      expect(navigationComponent.getTabIndex(childNode, 1)).toEqual(0);
+    });
   });
 });
diff --git a/projects/storefrontlib/cms-components/navigation/navigation/navigation-ui.component.ts b/projects/storefrontlib/cms-components/navigation/navigation/navigation-ui.component.ts
@@ -355,4 +355,14 @@ export class NavigationUIComponent implements OnInit, OnDestroy {
 
     this.isOpen = this.openNodes.length > 0;
   }
+
+  /**
+   * Resores default tabbing order for non flyout navigation.
+   */
+  getTabIndex(node: NavigationNode, depth: number): 0 | -1 {
+    if (!this.flyout) {
+      return 0;
+    }
+    return depth > 0 && !node?.children ? -1 : 0;
+  }
 }