From 8f9236f06dd1ba94b60a197ac5163a560a5454ca Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Fri, 5 Jul 2024 11:01:38 +0200
Subject: [PATCH] 116404: Don't navigate in the expandable navbar section with
 tab

Had to move the @slide animation to prevent focus being lost when tabbing in the expandable section

(cherry picked from commit c08c2721ac2d14f4ba6adf1baf39e8c46cc9401d)
---
 .../expandable-navbar-section.component.html          | 11 +++++++----
 .../menu/menu-section/menu-section.component.ts       |  8 ++++++--
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html
index 5119cec689..f37fc222d5 100644
--- a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html
+++ b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html
@@ -9,6 +9,7 @@
        (keyup.space)="toggleSection($event)"
        (click)="toggleSection($event)"
        (keydown.space)="$event.preventDefault()"
+       (keydown.tab)="deactivateSection($event, false)"
        aria-haspopup="menu"
        data-test="navbar-section-toggler"
        [attr.aria-expanded]="(active$ | async).valueOf()"
@@ -21,13 +22,15 @@
       </span>
       <i class="fas fa-caret-down fa-xs toggle-menu-icon" aria-hidden="true"></i>
     </a>
-    <div @slide *ngIf="(active$ | async).valueOf() === true" (click)="deactivateSection($event)"
+    <div *ngIf="(active$ | async).valueOf() === true" (click)="deactivateSection($event)"
         [id]="expandableNavbarSectionId(section.id)"
         role="menu"
         class="dropdown-menu show nav-dropdown-menu m-0 shadow-none border-top-0 px-3 px-md-0 pt-0 pt-md-1">
+      <div @slide role="presentation">
         <div *ngFor="let subSection of (subSections$ | async)" class="text-nowrap" role="presentation">
-            <ng-container
-                    *ngComponentOutlet="(sectionMap$ | async).get(subSection.id).component; injector: (sectionMap$ | async).get(subSection.id).injector;"></ng-container>
-        </div>
+              <ng-container
+                      *ngComponentOutlet="(sectionMap$ | async).get(subSection.id).component; injector: (sectionMap$ | async).get(subSection.id).injector;"></ng-container>
+          </div>
+      </div>
     </div>
 </div>
diff --git a/src/app/shared/menu/menu-section/menu-section.component.ts b/src/app/shared/menu/menu-section/menu-section.component.ts
index 2611935dfa..e0464a769f 100644
--- a/src/app/shared/menu/menu-section/menu-section.component.ts
+++ b/src/app/shared/menu/menu-section/menu-section.component.ts
@@ -85,10 +85,14 @@ export class MenuSectionComponent implements OnInit, OnDestroy {
 
   /**
    * Deactivate this section
+   *
    * @param {Event} event The user event that triggered this method
+   * @param skipEvent Weather the event should still be triggered after deactivating the section or not
    */
-  deactivateSection(event: Event) {
-    event.preventDefault();
+  deactivateSection(event: Event, skipEvent = true): void {
+    if (skipEvent) {
+      event.preventDefault();
+    }
     this.menuService.deactivateSection(this.menuID, this.section.id);
   }