mobile controls + e2e fix

SAP · Jan 19, 2024 · f740f75 · f740f75
1 parent bf8643d
commit f740f75
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 26 deletions.
diff --git a/projects/storefrontapp-e2e-cypress/cypress/e2e/accessibility/aux-key.e2e.cy.ts b/projects/storefrontapp-e2e-cypress/cypress/e2e/accessibility/aux-key.e2e.cy.ts
@@ -12,7 +12,7 @@ context('Auxiliary Keys', () => {
       loadPageWithComponenents('/');
     });
 
-    it('should open and close menu with space key', () => {
+    it('should open menu with space key', () => {
       cy.get('cx-category-navigation').within(() => {
         cy.get('cx-navigation-ui')
           .find('li:not(.back)')
@@ -37,15 +37,6 @@ context('Auxiliary Keys', () => {
               .should('have.length', 7)
               .first()
               .should('be.visible');
-            cy.focused().trigger('keydown', {
-              key: ' ',
-              code: 'Space',
-              force: true,
-            });
-            cy.get('div.wrapper')
-              .should('have.length', 7)
-              .first()
-              .should('not.be.visible');
           });
       });
     });
@@ -57,7 +48,7 @@ context('Auxiliary Keys', () => {
       loadPageWithComponenents('/');
     });
 
-    it('should open and close menu with space key', () => {
+    it('should open menu with space key', () => {
       cy.get('cx-page-layout[section="header"]').within(() => {
         cy.get('cx-navigation-ui.accNavComponent')
           .should('contain.text', 'My Account')
@@ -77,14 +68,6 @@ context('Auxiliary Keys', () => {
             cy.get('cx-generic-link')
               .contains('Order History')
               .should('be.visible');
-            cy.focused().trigger('keydown', {
-              key: ' ',
-              code: 'Space',
-              force: true,
-            });
-            cy.get('cx-generic-link')
-              .contains('Order History')
-              .should('not.be.visible');
           });
       });
     });

diff --git a/projects/storefrontlib/cms-components/navigation/navigation/navigation-ui.component.ts b/projects/storefrontlib/cms-components/navigation/navigation/navigation-ui.component.ts
@@ -19,7 +19,12 @@ import {
 import { NavigationEnd, Router } from '@angular/router';
 import { WindowRef } from '@spartacus/core';
 import { Subject, Subscription } from 'rxjs';
-import { debounceTime, distinctUntilChanged, filter } from 'rxjs/operators';
+import {
+  debounceTime,
+  distinctUntilChanged,
+  filter,
+  take,
+} from 'rxjs/operators';
 import { ICON_TYPE } from '../../misc/icon/index';
 import { HamburgerMenuService } from './../../../layout/header/hamburger-menu/hamburger-menu.service';
 import { NavigationNode } from './navigation-node.model';
@@ -179,12 +184,25 @@ export class NavigationUIComponent implements OnInit, OnDestroy {
     event.stopPropagation();
   }
 
-  onSpace(event: UIEvent) {
-    if (this.openNodes.length) {
-      event.preventDefault();
-    }
-    this.toggleOpen(event);
+  onSpace(event: UIEvent): void {
+    this.hamburgerMenuService.isExpanded
+      .pipe(take(1))
+      .subscribe((isExpanded) => {
+        if (isExpanded) {
+          this.toggleOpen(event);
+          return;
+        }
+        if (!this.openNodes.length) {
+          this.toggleOpen(event);
+          return;
+        }
+        event.preventDefault();
+      });
     this.focusOnNode(event);
+    this.setupArrowControls();
+  }
+
+  setupArrowControls(): void {
     this.subscriptions.add(
       this.arrowControls.subscribe((e) => {
         e.preventDefault();
@@ -198,7 +216,7 @@ export class NavigationUIComponent implements OnInit, OnDestroy {
     );
   }
 
-  focusOnNode(event: UIEvent) {
+  focusOnNode(event: UIEvent): void {
     const firstFocusableElement =
       (<HTMLElement>event.target).nextElementSibling?.querySelector('button') ||
       (<HTMLElement>event.target).nextElementSibling?.querySelector('a');