fix: (CXSPA-8193) -Dropdown refocus on esc key press (#19453)

SAP · Nov 5, 2024 · dff56f8 · dff56f8
1 parent 3289605
commit dff56f8
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 2 deletions.
diff --git a/projects/storefrontapp-e2e-cypress/cypress/e2e/accessibility/focus-management.e2e.cy.ts b/projects/storefrontapp-e2e-cypress/cypress/e2e/accessibility/focus-management.e2e.cy.ts
@@ -51,4 +51,21 @@ describe('Focus managment for a11y', () => {
       cy.contains('Select Store').should('have.focus');
     });
   });
+
+  context('Dropdown tigger, refocus after esc key press', () => {
+    it('Should refocus Sorting ng-select', () => {
+      cy.visit(`Brands/all/c/brands`);
+      cy.get('cx-sorting ng-select').first().as('sorting');
+      cy.get('@sorting').click().type('{esc}');
+      cy.get('@sorting').get('input').should('have.focus');
+    });
+
+    it('Should refocus MyAccount navigation-ui', () => {
+      cy.login('[email protected]', 'pw4all');
+      cy.visit(`/`);
+      cy.get('button').contains('My Account').as('myAccount');
+      cy.get('@myAccount').click().type('{esc}');
+      cy.get('@myAccount').should('have.focus');
+    });
+  });
 });
diff --git a/projects/storefrontlib/cms-components/navigation/navigation/navigation-ui.component.html b/projects/storefrontlib/cms-components/navigation/navigation/navigation-ui.component.html
@@ -68,6 +68,7 @@
         [tabindex]="getTabIndex(node, depth)"
         (focus)="depth || reinitializeMenu()"
         (keydown.space)="toggleOpen($any($event))"
+        (keydown.esc)="back()"
       >
         {{ node.title }}
       </cx-generic-link>

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
@@ -452,7 +452,7 @@ describe('Navigation UI Component', () => {
     it('return focus to node header after navigating back', fakeAsync(() => {
       const mockNode = document.createElement('li');
       const mockHeader = document.createElement('a');
-      mockHeader.setAttribute('tabindex', '0');
+      mockHeader.setAttribute('aria-haspopup', 'true');
       mockNode.appendChild(mockHeader);
       navigationComponent['openNodes'] = [mockNode];
       spyOn(mockHeader, 'focus');

diff --git a/projects/storefrontlib/cms-components/navigation/navigation/navigation-ui.component.ts b/projects/storefrontlib/cms-components/navigation/navigation/navigation-ui.component.ts
@@ -294,7 +294,9 @@ export class NavigationUIComponent implements OnInit, OnDestroy {
       ) {
         const removedNode = this.openNodes.pop();
         setTimeout(() => {
-          (removedNode?.querySelector('[tabindex="0"]') as HTMLElement).focus();
+          (
+            removedNode?.querySelector('[aria-haspopup="true"]') as HTMLElement
+          ).focus();
         }, 0);
       } else {
         this.openNodes.pop();

diff --git a/projects/storefrontlib/shared/components/ng-select-a11y/ng-select-a11y.directive.ts b/projects/storefrontlib/shared/components/ng-select-a11y/ng-select-a11y.directive.ts
@@ -51,6 +51,13 @@ export class NgSelectA11yDirective implements AfterViewInit {
     observer.observe(this.elementRef.nativeElement, { childList: true });
   }
 
+  @HostListener('keydown.escape')
+  onEscape() {
+    setTimeout(() => {
+      this.elementRef.nativeElement.querySelector('input').focus();
+    });
+  }
+
   @Optional() breakpointService = inject(BreakpointService, { optional: true });
 
   @Inject(PLATFORM_ID) protected platformId: Object;