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 c08c272)

Author: alexandrevryghem

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>

src/app/shared/menu/menu-section/menu-section.component.ts

@@ -102,10 +102,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);
   }