From 470ad807410fbc733dc84c57346e9955757ab8ed Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Fri, 5 Jul 2024 10:34:49 +0200
Subject: [PATCH 1/7] 116404: Fixed expandable navbar section loosing focus on
 expand through keyboard

(cherry picked from commit 2547b1218f36f00e1a62522a47d9c9f59dbc91e9)
---
 .../expandable-admin-sidebar-section.component.ts    |  4 ++--
 .../expandable-navbar-section.component.html         | 12 +++++-------
 .../expandable-navbar-section.component.ts           | 10 ++++------
 .../menu/menu-section/menu-section.component.ts      |  8 +++++---
 4 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.ts b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.ts
index e2995598f8..d25d7c6b40 100644
--- a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.ts
+++ b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.ts
@@ -67,8 +67,8 @@ export class ExpandableAdminSidebarSectionComponent extends AdminSidebarSectionC
     this.sidebarActiveBg$ = this.variableService.getVariable('--ds-admin-sidebar-active-bg');
     this.isSidebarCollapsed$ = this.menuService.isMenuCollapsed(this.menuID);
     this.isSidebarPreviewCollapsed$ = this.menuService.isMenuPreviewCollapsed(this.menuID);
-    this.isExpanded$ = combineLatestObservable([this.active, this.isSidebarCollapsed$, this.isSidebarPreviewCollapsed$]).pipe(
-      map(([active, sidebarCollapsed, sidebarPreviewCollapsed]) => (active && (!sidebarCollapsed || !sidebarPreviewCollapsed)))
+    this.isExpanded$ = combineLatestObservable([this.active$, this.isSidebarCollapsed$, this.isSidebarPreviewCollapsed$]).pipe(
+      map(([active, sidebarCollapsed, sidebarPreviewCollapsed]) => (active && (!sidebarCollapsed || !sidebarPreviewCollapsed))),
     );
   }
 
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 7f9b4a546f..5119cec689 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
@@ -1,9 +1,8 @@
 <div class="ds-menu-item-wrapper text-md-center"
     [id]="'expandable-navbar-section-' + section.id"
-    (mouseenter)="onMouseEnter($event, isActive)"
-    (mouseleave)="onMouseLeave($event, isActive)"
-    data-test="navbar-section-wrapper"
-    *ngVar="(active | async) as isActive">
+    (mouseenter)="onMouseEnter($event)"
+    (mouseleave)="onMouseLeave($event)"
+    data-test="navbar-section-wrapper">
     <a href="javascript:void(0);" routerLinkActive="active"
        role="menuitem"
        (keyup.enter)="toggleSection($event)"
@@ -12,18 +11,17 @@
        (keydown.space)="$event.preventDefault()"
        aria-haspopup="menu"
        data-test="navbar-section-toggler"
-       [attr.aria-expanded]="isActive"
+       [attr.aria-expanded]="(active$ | async).valueOf()"
        [attr.aria-controls]="expandableNavbarSectionId(section.id)"
        class="d-flex flex-row flex-nowrap align-items-center gapx-1 ds-menu-toggler-wrapper"
        [class.disabled]="section.model?.disabled">
       <span class="flex-fill">
         <ng-container
           *ngComponentOutlet="(sectionMap$ | async).get(section.id).component; injector: (sectionMap$ | async).get(section.id).injector;"></ng-container>
-<!--        <span class="sr-only">{{'nav.expandable-navbar-section-suffix' | translate}}</span>-->
       </span>
       <i class="fas fa-caret-down fa-xs toggle-menu-icon" aria-hidden="true"></i>
     </a>
-    <div @slide *ngIf="isActive" (click)="deactivateSection($event)"
+    <div @slide *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">
diff --git a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts
index 030b2b3da4..1921737201 100644
--- a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts
+++ b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts
@@ -67,13 +67,12 @@ export class ExpandableNavbarSectionComponent extends NavbarSectionComponent imp
   /**
    * When the mouse enters the section toggler activate the menu section
    * @param $event
-   * @param isActive
    */
-  onMouseEnter($event: Event, isActive: boolean) {
+  onMouseEnter($event: Event): void {
     this.isMobile$.pipe(
       first()
     ).subscribe((isMobile) => {
-      if (!isMobile && !isActive && !this.mouseEntered) {
+      if (!isMobile && !this.active$.value && !this.mouseEntered) {
         this.activateSection($event);
       }
       this.mouseEntered = true;
@@ -83,13 +82,12 @@ export class ExpandableNavbarSectionComponent extends NavbarSectionComponent imp
   /**
    * When the mouse leaves the section toggler deactivate the menu section
    * @param $event
-   * @param isActive
    */
-  onMouseLeave($event: Event, isActive: boolean) {
+  onMouseLeave($event: Event): void {
     this.isMobile$.pipe(
       first()
     ).subscribe((isMobile) => {
-      if (!isMobile && isActive && this.mouseEntered) {
+      if (!isMobile && this.active$.value && this.mouseEntered) {
         this.deactivateSection($event);
       }
       this.mouseEntered = false;
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 9b5bd499e1..2611935dfa 100644
--- a/src/app/shared/menu/menu-section/menu-section.component.ts
+++ b/src/app/shared/menu/menu-section/menu-section.component.ts
@@ -20,9 +20,9 @@ import { MenuItemType } from '../menu-item-type.model';
 export class MenuSectionComponent implements OnInit, OnDestroy {
 
   /**
-   * Observable that emits whether or not this section is currently active
+   * {@link BehaviorSubject} containing the current state to whether this section is currently active
    */
-  active: Observable<boolean>;
+  active$: BehaviorSubject<boolean> = new BehaviorSubject(false);
 
   /**
    * The ID of the menu this section resides in
@@ -55,7 +55,9 @@ export class MenuSectionComponent implements OnInit, OnDestroy {
    * Set initial values for instance variables
    */
   ngOnInit(): void {
-    this.active = this.menuService.isSectionActive(this.menuID, this.section.id).pipe(distinctUntilChanged());
+    this.menuService.isSectionActive(this.menuID, this.section.id).pipe(distinctUntilChanged()).subscribe((isActive: boolean) => {
+      this.active$.next(isActive);
+    });
     this.initializeInjectorData();
   }
 

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 2/7] 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);
   }
 

From 53186988f58073054c9b269144aab50d98da9755 Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Fri, 5 Jul 2024 13:30:01 +0200
Subject: [PATCH 3/7] 116404: Added navigation with arrow keys in navbar &
 collapsed the expandable menu when hovering outside of it

(cherry picked from commit 05232cdf2b068223c8147ed61afe364fc92986d1)
---
 .../expandable-navbar-section.component.html  | 59 ++++++------
 .../expandable-navbar-section.component.ts    | 92 +++++++++++++++++--
 src/app/navbar/navbar.module.ts               |  7 ++
 .../shared/utils/hover-outside.directive.ts   | 50 ++++++++++
 4 files changed, 169 insertions(+), 39 deletions(-)
 create mode 100644 src/app/shared/utils/hover-outside.directive.ts

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 f37fc222d5..f8facaa82a 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
@@ -1,36 +1,37 @@
-<div class="ds-menu-item-wrapper text-md-center"
-    [id]="'expandable-navbar-section-' + section.id"
-    (mouseenter)="onMouseEnter($event)"
-    (mouseleave)="onMouseLeave($event)"
-    data-test="navbar-section-wrapper">
-    <a href="javascript:void(0);" routerLinkActive="active"
-       role="menuitem"
-       (keyup.enter)="toggleSection($event)"
-       (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()"
-       [attr.aria-controls]="expandableNavbarSectionId(section.id)"
-       class="d-flex flex-row flex-nowrap align-items-center gapx-1 ds-menu-toggler-wrapper"
-       [class.disabled]="section.model?.disabled">
+<div #expandableNavbarSectionContainer class="ds-menu-item-wrapper text-md-center"
+     [id]="'expandable-navbar-section-' + section.id"
+     (mouseenter)="onMouseEnter($event)"
+     (mouseleave)="onMouseLeave($event)"
+     data-test="navbar-section-wrapper">
+  <a href="javascript:void(0);" routerLinkActive="active"
+     role="menuitem"
+     (keyup.enter)="toggleSection($event)"
+     (keyup.space)="toggleSection($event)"
+     (click)="toggleSection($event)"
+     (keydown)="keyDown($event)"
+     aria-haspopup="menu"
+     data-test="navbar-section-toggler"
+     [attr.aria-expanded]="(active$ | async).valueOf()"
+     [attr.aria-controls]="expandableNavbarSectionId()"
+     class="d-flex flex-row flex-nowrap align-items-center gapx-1 ds-menu-toggler-wrapper"
+     [class.disabled]="section.model?.disabled">
       <span class="flex-fill">
         <ng-container
           *ngComponentOutlet="(sectionMap$ | async).get(section.id).component; injector: (sectionMap$ | async).get(section.id).injector;"></ng-container>
       </span>
-      <i class="fas fa-caret-down fa-xs toggle-menu-icon" aria-hidden="true"></i>
-    </a>
-    <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>
+    <i class="fas fa-caret-down fa-xs toggle-menu-icon" aria-hidden="true"></i>
+  </a>
+  <div *ngIf="(active$ | async).valueOf() === true" (click)="deactivateSection($event)"
+       [id]="expandableNavbarSectionId()"
+       [dsHoverOutsideOfElement]="expandableNavbarSection"
+       (dsHoverOutside)="deactivateSection($event, false)"
+       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>
     </div>
+  </div>
 </div>
diff --git a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts
index 1921737201..fb891dbbf3 100644
--- a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts
+++ b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts
@@ -1,4 +1,4 @@
-import { Component, HostListener, Inject, Injector, OnInit } from '@angular/core';
+import { Component, HostListener, Inject, Injector, OnInit, ViewChild, AfterViewChecked, ElementRef } from '@angular/core';
 import { NavbarSectionComponent } from '../navbar-section/navbar-section.component';
 import { MenuService } from '../../shared/menu/menu.service';
 import { slide } from '../../shared/animations/slide';
@@ -6,6 +6,7 @@ import { first } from 'rxjs/operators';
 import { HostWindowService } from '../../shared/host-window.service';
 import { MenuID } from '../../shared/menu/menu-id.model';
 import { Observable } from 'rxjs';
+import { MenuSection } from '../../shared/menu/menu-section.model';
 
 /**
  * Represents an expandable section in the navbar
@@ -16,7 +17,10 @@ import { Observable } from 'rxjs';
   styleUrls: ['./expandable-navbar-section.component.scss'],
   animations: [slide]
 })
-export class ExpandableNavbarSectionComponent extends NavbarSectionComponent implements OnInit {
+export class ExpandableNavbarSectionComponent extends NavbarSectionComponent implements AfterViewChecked, OnInit {
+
+  @ViewChild('expandableNavbarSectionContainer') expandableNavbarSection: ElementRef;
+
   /**
    * This section resides in the Public Navbar
    */
@@ -37,6 +41,13 @@ export class ExpandableNavbarSectionComponent extends NavbarSectionComponent imp
    */
   isMobile$: Observable<boolean>;
 
+  /**
+   * Boolean used to add the event listeners to the items in the expandable menu when expanded. This is done for
+   * performance reasons, there is currently an *ngIf on the menu to prevent the {@link HoverOutsideDirective} to tank
+   * performance when not expanded.
+   */
+  addArrowEventListeners = false;
+
   @HostListener('window:resize', ['$event'])
   onResize() {
     this.isMobile$.pipe(
@@ -51,17 +62,33 @@ export class ExpandableNavbarSectionComponent extends NavbarSectionComponent imp
     });
   }
 
-  constructor(@Inject('sectionDataProvider') menuSection,
-              protected menuService: MenuService,
-              protected injector: Injector,
-              private windowService: HostWindowService
+  constructor(
+    @Inject('sectionDataProvider') public section: MenuSection,
+    protected menuService: MenuService,
+    protected injector: Injector,
+    protected windowService: HostWindowService,
   ) {
-    super(menuSection, menuService, injector);
+    super(section, menuService, injector);
     this.isMobile$ = this.windowService.isMobile();
   }
 
   ngOnInit() {
     super.ngOnInit();
+    this.subs.push(this.active$.subscribe((active: boolean) => {
+      if (active === true) {
+        this.addArrowEventListeners = true;
+      }
+    }));
+  }
+
+  ngAfterViewChecked(): void {
+    if (this.addArrowEventListeners) {
+      const dropdownItems = document.querySelectorAll(`#${this.expandableNavbarSectionId()} *[role="menuitem"]`);
+      dropdownItems.forEach(item => {
+        item.addEventListener('keydown', this.navigateDropdown.bind(this));
+      });
+      this.addArrowEventListeners = false;
+    }
   }
 
   /**
@@ -96,9 +123,54 @@ export class ExpandableNavbarSectionComponent extends NavbarSectionComponent imp
 
   /**
    * returns the ID of the DOM element representing the navbar section
-   * @param sectionId
    */
-  expandableNavbarSectionId(sectionId: string) {
-    return `expandable-navbar-section-${sectionId}-dropdown`;
+  expandableNavbarSectionId(): string {
+    return `expandable-navbar-section-${this.section.id}-dropdown`;
+  }
+
+  /**
+   * Handles the navigation between the menu items
+   *
+   * @param event
+   */
+  navigateDropdown(event: KeyboardEvent): void {
+    if (event.key === 'Tab') {
+      this.deactivateSection(event, false);
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+
+    const items: NodeListOf<Element> = document.querySelectorAll(`#${this.expandableNavbarSectionId()} *[role="menuitem"]`);
+    if (items.length === 0) {
+      return;
+    }
+    const currentIndex: number = Array.from(items).findIndex((item: Element) => item === event.target);
+
+    if (event.key === 'ArrowDown') {
+      (items[(currentIndex + 1) % items.length] as HTMLElement).focus();
+    } else if (event.key === 'ArrowUp') {
+      (items[(currentIndex - 1 + items.length) % items.length] as HTMLElement).focus();
+    }
+  }
+
+  /**
+   * Handles all the keydown events on the dropdown toggle
+   *
+   * @param event
+   */
+  keyDown(event: KeyboardEvent): void {
+    switch (event.code) {
+      // Works for both Tab & Shift Tab
+      case 'Tab':
+        this.deactivateSection(event, false);
+        break;
+      case 'ArrowDown':
+        this.navigateDropdown(event);
+        break;
+      case 'Space':
+        event.preventDefault();
+        break;
+    }
   }
 }
diff --git a/src/app/navbar/navbar.module.ts b/src/app/navbar/navbar.module.ts
index de3244099d..d282c42a07 100644
--- a/src/app/navbar/navbar.module.ts
+++ b/src/app/navbar/navbar.module.ts
@@ -13,6 +13,7 @@ import { MenuModule } from '../shared/menu/menu.module';
 import { SharedModule } from '../shared/shared.module';
 import { FormsModule } from '@angular/forms';
 import { ThemedNavbarComponent } from './themed-navbar.component';
+import { HoverOutsideDirective } from '../shared/utils/hover-outside.directive';
 
 const effects = [
   NavbarEffects
@@ -25,6 +26,10 @@ const ENTRY_COMPONENTS = [
   ThemedExpandableNavbarSectionComponent,
 ];
 
+const DIRECTIVES = [
+  HoverOutsideDirective,
+];
+
 @NgModule({
   imports: [
     CommonModule,
@@ -35,12 +40,14 @@ const ENTRY_COMPONENTS = [
     CoreModule.forRoot()
   ],
   declarations: [
+    ...DIRECTIVES,
     ...ENTRY_COMPONENTS,
     NavbarComponent,
     ThemedNavbarComponent,
   ],
   providers: [],
   exports: [
+    ...DIRECTIVES,
     ThemedNavbarComponent,
     NavbarSectionComponent,
     ThemedExpandableNavbarSectionComponent
diff --git a/src/app/shared/utils/hover-outside.directive.ts b/src/app/shared/utils/hover-outside.directive.ts
new file mode 100644
index 0000000000..7a4bd58540
--- /dev/null
+++ b/src/app/shared/utils/hover-outside.directive.ts
@@ -0,0 +1,50 @@
+import {
+  Directive,
+  ElementRef,
+  EventEmitter,
+  HostListener,
+  Input,
+  Output,
+} from '@angular/core';
+
+/**
+ * Directive to detect when the user hovers outside of the element the directive was put on
+ *
+ * BEWARE: it's probably not good for performance to use this excessively (on {@link ExpandableNavbarSectionComponent}
+ * for example, a workaround for this problem was to add an `*ngIf` to prevent this Directive from always being active)
+ */
+@Directive({
+  selector: '[dsHoverOutside]',
+})
+export class HoverOutsideDirective {
+
+  /**
+   * Emits null when the user hovers outside of the element
+   */
+  @Output()
+  public dsHoverOutside = new EventEmitter();
+
+  /**
+   * The {@link ElementRef} for which this directive should emit when the mouse leaves it. By default this will be the
+   * element the directive was put on.
+   */
+  @Input()
+  public dsHoverOutsideOfElement: ElementRef;
+
+  constructor(
+    private elementRef: ElementRef,
+  ) {
+    this.dsHoverOutsideOfElement = this.elementRef;
+  }
+
+  @HostListener('document:mouseover', ['$event'])
+  public onMouseOver(event: MouseEvent): void {
+    const targetElement: HTMLElement = event.target as HTMLElement;
+    const hoveredInside = this.dsHoverOutsideOfElement.nativeElement.contains(targetElement);
+
+    if (!hoveredInside) {
+      this.dsHoverOutside.emit(null);
+    }
+  }
+
+}

From 73285284ce434a7c8d444ca837a2f008aea2aea5 Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Fri, 5 Jul 2024 16:02:42 +0200
Subject: [PATCH 4/7] 116404: Apply focus on first item

(cherry picked from commit 2152bab717c197f7e67b8a025ea611b6515ef308)
---
 .../expandable-navbar-section.component.ts               | 9 ++++++---
 .../shared/menu/menu-section/menu-section.component.ts   | 7 +++++--
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts
index fb891dbbf3..de4cc46c6c 100644
--- a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts
+++ b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts
@@ -83,10 +83,13 @@ export class ExpandableNavbarSectionComponent extends NavbarSectionComponent imp
 
   ngAfterViewChecked(): void {
     if (this.addArrowEventListeners) {
-      const dropdownItems = document.querySelectorAll(`#${this.expandableNavbarSectionId()} *[role="menuitem"]`);
-      dropdownItems.forEach(item => {
+      const dropdownItems: NodeListOf<HTMLElement> = document.querySelectorAll(`#${this.expandableNavbarSectionId()} *[role="menuitem"]`);
+      dropdownItems.forEach((item: HTMLElement) => {
         item.addEventListener('keydown', this.navigateDropdown.bind(this));
       });
+      if (dropdownItems.length > 0) {
+        dropdownItems.item(0).focus();
+      }
       this.addArrowEventListeners = false;
     }
   }
@@ -166,7 +169,7 @@ export class ExpandableNavbarSectionComponent extends NavbarSectionComponent imp
         this.deactivateSection(event, false);
         break;
       case 'ArrowDown':
-        this.navigateDropdown(event);
+        this.activateSection(event);
         break;
       case 'Space':
         event.preventDefault();
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 e0464a769f..8ee40ee8c6 100644
--- a/src/app/shared/menu/menu-section/menu-section.component.ts
+++ b/src/app/shared/menu/menu-section/menu-section.component.ts
@@ -75,9 +75,12 @@ export class MenuSectionComponent implements OnInit, OnDestroy {
   /**
    * Activate 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
    */
-  activateSection(event: Event) {
-    event.preventDefault();
+  activateSection(event: Event, skipEvent = true): void {
+    if (skipEvent) {
+      event.preventDefault();
+    }
     if (!this.section.model?.disabled) {
       this.menuService.activateSection(this.menuID, this.section.id);
     }

From 0f27ae1125ff457c58a96860f3e35deae7bdf642 Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Fri, 5 Jul 2024 17:57:18 +0200
Subject: [PATCH 5/7] 116404: Close modal on escape

(cherry picked from commit 84df67c00bc46f6346efadb7a6cb7c068d7d36a0)
---
 .../expandable-navbar-section.component.ts                  | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts
index de4cc46c6c..72e33b1f18 100644
--- a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts
+++ b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts
@@ -137,9 +137,13 @@ export class ExpandableNavbarSectionComponent extends NavbarSectionComponent imp
    * @param event
    */
   navigateDropdown(event: KeyboardEvent): void {
-    if (event.key === 'Tab') {
+    if (event.code === 'Tab') {
       this.deactivateSection(event, false);
       return;
+    } else if (event.code === 'Escape') {
+      this.deactivateSection(event, false);
+      (document.querySelector(`a[aria-controls="${this.expandableNavbarSectionId()}"]`) as HTMLElement)?.focus();
+      return;
     }
     event.preventDefault();
     event.stopPropagation();

From 9c6fb1794f1329870092433a78bdcbdd0b5f5729 Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Sun, 27 Oct 2024 14:11:05 +0100
Subject: [PATCH 6/7] 116404: Replaced ViewChild logic with a CSS selector

This change avoids triggering an additional change detection cycle

(cherry picked from commit f7bb83013a7b6c49fee3695668c66129b4078f5c)
---
 .../expandable-navbar-section.component.html  |  4 +-
 ...xpandable-navbar-section.component.spec.ts | 18 +++++----
 .../expandable-navbar-section.component.ts    | 39 +++++++++++++++----
 .../shared/utils/hover-outside.directive.ts   | 18 +++++----
 4 files changed, 54 insertions(+), 25 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 f8facaa82a..0af5c706b7 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
@@ -1,4 +1,4 @@
-<div #expandableNavbarSectionContainer class="ds-menu-item-wrapper text-md-center"
+<div class="ds-menu-item-wrapper text-md-center"
      [id]="'expandable-navbar-section-' + section.id"
      (mouseenter)="onMouseEnter($event)"
      (mouseleave)="onMouseLeave($event)"
@@ -23,7 +23,7 @@
   </a>
   <div *ngIf="(active$ | async).valueOf() === true" (click)="deactivateSection($event)"
        [id]="expandableNavbarSectionId()"
-       [dsHoverOutsideOfElement]="expandableNavbarSection"
+       [dsHoverOutsideOfParentSelector]="'#expandable-navbar-section-' + section.id"
        (dsHoverOutside)="deactivateSection($event, false)"
        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">
diff --git a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.spec.ts b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.spec.ts
index 986dca86eb..2b7c665258 100644
--- a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.spec.ts
+++ b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.spec.ts
@@ -9,7 +9,7 @@ import { HostWindowService } from '../../shared/host-window.service';
 import { MenuService } from '../../shared/menu/menu.service';
 import { HostWindowServiceStub } from '../../shared/testing/host-window-service.stub';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { VarDirective } from '../../shared/utils/var.directive';
+import { HoverOutsideDirective } from '../../shared/utils/hover-outside.directive';
 
 describe('ExpandableNavbarSectionComponent', () => {
   let component: ExpandableNavbarSectionComponent;
@@ -20,7 +20,11 @@ describe('ExpandableNavbarSectionComponent', () => {
     beforeEach(waitForAsync(() => {
       TestBed.configureTestingModule({
         imports: [NoopAnimationsModule],
-        declarations: [ExpandableNavbarSectionComponent, TestComponent, VarDirective],
+        declarations: [
+          ExpandableNavbarSectionComponent,
+          HoverOutsideDirective,
+          TestComponent,
+        ],
         providers: [
           { provide: 'sectionDataProvider', useValue: {} },
           { provide: MenuService, useValue: menuService },
@@ -43,10 +47,6 @@ describe('ExpandableNavbarSectionComponent', () => {
       fixture.detectChanges();
     });
 
-    it('should create', () => {
-      expect(component).toBeTruthy();
-    });
-
     describe('when the mouse enters the section header (while inactive)', () => {
       beforeEach(() => {
         spyOn(component, 'onMouseEnter').and.callThrough();
@@ -187,7 +187,11 @@ describe('ExpandableNavbarSectionComponent', () => {
     beforeEach(waitForAsync(() => {
       TestBed.configureTestingModule({
         imports: [NoopAnimationsModule],
-        declarations: [ExpandableNavbarSectionComponent, TestComponent, VarDirective],
+        declarations: [
+          ExpandableNavbarSectionComponent,
+          HoverOutsideDirective,
+          TestComponent,
+        ],
         providers: [
           { provide: 'sectionDataProvider', useValue: {} },
           { provide: MenuService, useValue: menuService },
diff --git a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts
index 72e33b1f18..063b080c62 100644
--- a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts
+++ b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts
@@ -1,4 +1,4 @@
-import { Component, HostListener, Inject, Injector, OnInit, ViewChild, AfterViewChecked, ElementRef } from '@angular/core';
+import { Component, HostListener, Inject, Injector, OnInit, AfterViewChecked, OnDestroy } from '@angular/core';
 import { NavbarSectionComponent } from '../navbar-section/navbar-section.component';
 import { MenuService } from '../../shared/menu/menu.service';
 import { slide } from '../../shared/animations/slide';
@@ -17,9 +17,7 @@ import { MenuSection } from '../../shared/menu/menu-section.model';
   styleUrls: ['./expandable-navbar-section.component.scss'],
   animations: [slide]
 })
-export class ExpandableNavbarSectionComponent extends NavbarSectionComponent implements AfterViewChecked, OnInit {
-
-  @ViewChild('expandableNavbarSectionContainer') expandableNavbarSection: ElementRef;
+export class ExpandableNavbarSectionComponent extends NavbarSectionComponent implements AfterViewChecked, OnInit, OnDestroy {
 
   /**
    * This section resides in the Public Navbar
@@ -48,6 +46,11 @@ export class ExpandableNavbarSectionComponent extends NavbarSectionComponent imp
    */
   addArrowEventListeners = false;
 
+  /**
+   * List of current dropdown items who have event listeners
+   */
+  private dropdownItems: NodeListOf<HTMLElement>;
+
   @HostListener('window:resize', ['$event'])
   onResize() {
     this.isMobile$.pipe(
@@ -77,23 +80,43 @@ export class ExpandableNavbarSectionComponent extends NavbarSectionComponent imp
     this.subs.push(this.active$.subscribe((active: boolean) => {
       if (active === true) {
         this.addArrowEventListeners = true;
+      } else {
+        this.unsubscribeFromEventListeners();
       }
     }));
   }
 
   ngAfterViewChecked(): void {
     if (this.addArrowEventListeners) {
-      const dropdownItems: NodeListOf<HTMLElement> = document.querySelectorAll(`#${this.expandableNavbarSectionId()} *[role="menuitem"]`);
-      dropdownItems.forEach((item: HTMLElement) => {
+      this.dropdownItems = document.querySelectorAll(`#${this.expandableNavbarSectionId()} *[role="menuitem"]`);
+      this.dropdownItems.forEach((item: HTMLElement) => {
         item.addEventListener('keydown', this.navigateDropdown.bind(this));
       });
-      if (dropdownItems.length > 0) {
-        dropdownItems.item(0).focus();
+      if (this.dropdownItems.length > 0) {
+        this.dropdownItems.item(0).focus();
       }
       this.addArrowEventListeners = false;
     }
   }
 
+  ngOnDestroy(): void {
+    super.ngOnDestroy();
+    this.unsubscribeFromEventListeners();
+  }
+
+  /**
+   * Removes all the current event listeners on the dropdown items (called when the menu is closed & on component
+   * destruction)
+   */
+  unsubscribeFromEventListeners(): void {
+    if (this.dropdownItems) {
+      this.dropdownItems.forEach((item: HTMLElement) => {
+        item.removeEventListener('keydown', this.navigateDropdown.bind(this));
+      });
+      this.dropdownItems = undefined;
+    }
+  }
+
   /**
    * When the mouse enters the section toggler activate the menu section
    * @param $event
diff --git a/src/app/shared/utils/hover-outside.directive.ts b/src/app/shared/utils/hover-outside.directive.ts
index 7a4bd58540..fd6676cbe7 100644
--- a/src/app/shared/utils/hover-outside.directive.ts
+++ b/src/app/shared/utils/hover-outside.directive.ts
@@ -8,10 +8,11 @@ import {
 } from '@angular/core';
 
 /**
- * Directive to detect when the user hovers outside of the element the directive was put on
+ * Directive to detect when the user hovers outside the element the directive was put on
  *
- * BEWARE: it's probably not good for performance to use this excessively (on {@link ExpandableNavbarSectionComponent}
- * for example, a workaround for this problem was to add an `*ngIf` to prevent this Directive from always being active)
+ * **Performance Consideration**: it's probably not good for performance to use this excessively (on
+ * {@link ExpandableNavbarSectionComponent} for example, a workaround for this problem was to add an `*ngIf` to prevent
+ * this Directive from always being active)
  */
 @Directive({
   selector: '[dsHoverOutside]',
@@ -25,22 +26,23 @@ export class HoverOutsideDirective {
   public dsHoverOutside = new EventEmitter();
 
   /**
-   * The {@link ElementRef} for which this directive should emit when the mouse leaves it. By default this will be the
-   * element the directive was put on.
+   * CSS selector for the parent element to monitor. If set, the directive will use this
+   * selector to determine if the hover event originated within the selected parent element.
+   * If left unset, the directive will monitor mouseover hover events for the element it is applied to.
    */
   @Input()
-  public dsHoverOutsideOfElement: ElementRef;
+  public dsHoverOutsideOfParentSelector: string;
 
   constructor(
     private elementRef: ElementRef,
   ) {
-    this.dsHoverOutsideOfElement = this.elementRef;
   }
 
   @HostListener('document:mouseover', ['$event'])
   public onMouseOver(event: MouseEvent): void {
     const targetElement: HTMLElement = event.target as HTMLElement;
-    const hoveredInside = this.dsHoverOutsideOfElement.nativeElement.contains(targetElement);
+    const element: Element = document.querySelector(this.dsHoverOutsideOfParentSelector);
+    const hoveredInside = (element ? new ElementRef(element) : this.elementRef).nativeElement.contains(targetElement);
 
     if (!hoveredInside) {
       this.dsHoverOutside.emit(null);

From 6f9c55d250420fddf3f1fd26f6dab389ef7b2c10 Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Tue, 28 Jan 2025 00:11:50 +0100
Subject: [PATCH 7/7] 116404: Prevent the opening from the modal using mouse
 interactions from automatically focussing on the first element

(cherry picked from commit 82ed3aadff3203a58087530a483d97fdf62adf2a)
---
 ...xpandable-navbar-section.component.spec.ts | 141 ++++++++++++++++--
 .../expandable-navbar-section.component.ts    |  22 ++-
 .../menu-section/menu-section.component.ts    |   8 +-
 3 files changed, 153 insertions(+), 18 deletions(-)

diff --git a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.spec.ts b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.spec.ts
index 2b7c665258..f8bb35b57c 100644
--- a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.spec.ts
+++ b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.spec.ts
@@ -1,12 +1,14 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync, fakeAsync, flush } from '@angular/core/testing';
 
 import { ExpandableNavbarSectionComponent } from './expandable-navbar-section.component';
 import { By } from '@angular/platform-browser';
 import { MenuServiceStub } from '../../shared/testing/menu-service.stub';
-import { Component } from '@angular/core';
+import { Component, DebugElement } from '@angular/core';
 import { of as observableOf } from 'rxjs';
 import { HostWindowService } from '../../shared/host-window.service';
 import { MenuService } from '../../shared/menu/menu.service';
+import { LinkMenuItemModel } from '../../shared/menu/menu-item/models/link.model';
+import { MenuSection } from '../../shared/menu/menu-section.model';
 import { HostWindowServiceStub } from '../../shared/testing/host-window-service.stub';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { HoverOutsideDirective } from '../../shared/utils/hover-outside.directive';
@@ -28,14 +30,10 @@ describe('ExpandableNavbarSectionComponent', () => {
         providers: [
           { provide: 'sectionDataProvider', useValue: {} },
           { provide: MenuService, useValue: menuService },
-          { provide: HostWindowService, useValue: new HostWindowServiceStub(800) }
-        ]
-      }).overrideComponent(ExpandableNavbarSectionComponent, {
-        set: {
-          entryComponents: [TestComponent]
-        }
-      })
-        .compileComponents();
+          { provide: HostWindowService, useValue: new HostWindowServiceStub(800) },
+          TestComponent,
+        ],
+      }).compileComponents();
     }));
 
     beforeEach(() => {
@@ -143,6 +141,8 @@ describe('ExpandableNavbarSectionComponent', () => {
     });
 
     describe('when spacebar is pressed on section header (while inactive)', () => {
+      let sidebarToggler: DebugElement;
+
       beforeEach(() => {
         spyOn(component, 'toggleSection').and.callThrough();
         spyOn(menuService, 'toggleActiveSection');
@@ -151,15 +151,27 @@ describe('ExpandableNavbarSectionComponent', () => {
         component.ngOnInit();
         fixture.detectChanges();
 
-        const sidebarToggler = fixture.debugElement.query(By.css('[data-test="navbar-section-toggler"]'));
-        // dispatch the (keyup.space) action used in our component HTML
-        sidebarToggler.nativeElement.dispatchEvent(new KeyboardEvent('keyup', { key: ' ' }));
+        sidebarToggler = fixture.debugElement.query(By.css('[data-test="navbar-section-toggler"]'));
       });
 
       it('should call toggleSection on the menuService', () => {
+        // dispatch the (keyup.space) action used in our component HTML
+        sidebarToggler.nativeElement.dispatchEvent(new KeyboardEvent('keyup', { code: 'Space', key: ' ' }));
+
         expect(component.toggleSection).toHaveBeenCalled();
         expect(menuService.toggleActiveSection).toHaveBeenCalled();
       });
+
+      // Should not do anything in order to work correctly with NVDA: https://www.nvaccess.org/
+      it('should not do anything on keydown space', () => {
+        const event: Event = new KeyboardEvent('keydown', { code: 'Space', key: ' ' });
+        spyOn(event, 'preventDefault').and.callThrough();
+
+        // dispatch the (keyup.space) action used in our component HTML
+        sidebarToggler.nativeElement.dispatchEvent(event);
+
+        expect(event.preventDefault).toHaveBeenCalled();
+      });
     });
 
     describe('when spacebar is pressed on section header (while active)', () => {
@@ -181,6 +193,105 @@ describe('ExpandableNavbarSectionComponent', () => {
         expect(menuService.toggleActiveSection).toHaveBeenCalled();
       });
     });
+
+    describe('when enter is pressed on section header (while inactive)', () => {
+      let sidebarToggler: DebugElement;
+
+      beforeEach(() => {
+        spyOn(component, 'toggleSection').and.callThrough();
+        spyOn(menuService, 'toggleActiveSection');
+        // Make sure section is 'inactive'. Requires calling ngOnInit() to update component 'active' property.
+        spyOn(menuService, 'isSectionActive').and.returnValue(observableOf(false));
+        component.ngOnInit();
+        fixture.detectChanges();
+
+        sidebarToggler = fixture.debugElement.query(By.css('[data-test="navbar-section-toggler"]'));
+      });
+
+      // Should not do anything in order to work correctly with NVDA: https://www.nvaccess.org/
+      it('should not do anything on keydown space', () => {
+        const event: Event = new KeyboardEvent('keydown', { code: 'Enter' });
+        spyOn(event, 'preventDefault').and.callThrough();
+
+        // dispatch the (keyup.space) action used in our component HTML
+        sidebarToggler.nativeElement.dispatchEvent(event);
+
+        expect(event.preventDefault).toHaveBeenCalled();
+      });
+    });
+
+    describe('when arrow down is pressed on section header', () => {
+      it('should call activateSection', () => {
+        spyOn(component, 'activateSection').and.callThrough();
+
+        const sidebarToggler: DebugElement = fixture.debugElement.query(By.css('[data-test="navbar-section-toggler"]'));
+        // dispatch the (keydown.ArrowDown) action used in our component HTML
+        sidebarToggler.nativeElement.dispatchEvent(new KeyboardEvent('keydown', { code: 'ArrowDown' }));
+
+        expect(component.focusOnFirstChildSection).toBe(true);
+        expect(component.activateSection).toHaveBeenCalled();
+      });
+    });
+
+    describe('when tab is pressed on section header', () => {
+      it('should call deactivateSection', () => {
+        spyOn(component, 'deactivateSection').and.callThrough();
+
+        const sidebarToggler: DebugElement = fixture.debugElement.query(By.css('[data-test="navbar-section-toggler"]'));
+        // dispatch the (keydown.ArrowDown) action used in our component HTML
+        sidebarToggler.nativeElement.dispatchEvent(new KeyboardEvent('keydown', { code: 'Tab' }));
+
+        expect(component.deactivateSection).toHaveBeenCalled();
+      });
+    });
+
+    describe('navigateDropdown', () => {
+      beforeEach(fakeAsync(() => {
+        jasmine.getEnv().allowRespy(true);
+        spyOn(menuService, 'getSubSectionsByParentID').and.returnValue(observableOf([
+          Object.assign(new MenuSection(), {
+            id: 'subSection1',
+            model: Object.assign(new LinkMenuItemModel(), {
+              type: 'TEST_LINK',
+            }),
+            parentId: component.section.id,
+          }),
+          Object.assign(new MenuSection(), {
+            id: 'subSection2',
+            model: Object.assign(new LinkMenuItemModel(), {
+              type: 'TEST_LINK',
+            }),
+            parentId: component.section.id,
+          }),
+        ]));
+        component.ngOnInit();
+        flush();
+        fixture.detectChanges();
+        component.focusOnFirstChildSection = true;
+        component.active$.next(true);
+        fixture.detectChanges();
+      }));
+
+      it('should close the modal on Tab', () => {
+        spyOn(menuService, 'deactivateSection').and.callThrough();
+
+        const firstSubsection: DebugElement = fixture.debugElement.queryAll(By.css('.dropdown-menu a[role="menuitem"]'))[0];
+        firstSubsection.nativeElement.focus();
+        firstSubsection.nativeElement.dispatchEvent(new KeyboardEvent('keydown', { code: 'Tab' }));
+
+        expect(menuService.deactivateSection).toHaveBeenCalled();
+      });
+
+      it('should close the modal on Escape', () => {
+        spyOn(menuService, 'deactivateSection').and.callThrough();
+
+        const firstSubsection: DebugElement = fixture.debugElement.queryAll(By.css('.dropdown-menu a[role="menuitem"]'))[0];
+        firstSubsection.nativeElement.focus();
+        firstSubsection.nativeElement.dispatchEvent(new KeyboardEvent('keydown', { code: 'Escape' }));
+
+        expect(menuService.deactivateSection).toHaveBeenCalled();
+      });
+    });
   });
 
   describe('on smaller, mobile screens', () => {
@@ -265,7 +376,9 @@ describe('ExpandableNavbarSectionComponent', () => {
 // declare a test component
 @Component({
   selector: 'ds-test-cmp',
-  template: ``
+  template: `
+    <a role="menuitem">link</a>
+  `,
 })
 class TestComponent {
 }
diff --git a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts
index 063b080c62..c4842bbb44 100644
--- a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts
+++ b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts
@@ -29,6 +29,11 @@ export class ExpandableNavbarSectionComponent extends NavbarSectionComponent imp
    */
   mouseEntered = false;
 
+  /**
+   * Whether the section was expanded
+   */
+  focusOnFirstChildSection = false;
+
   /**
    * True if screen size was small before a resize event
    */
@@ -81,6 +86,7 @@ export class ExpandableNavbarSectionComponent extends NavbarSectionComponent imp
       if (active === true) {
         this.addArrowEventListeners = true;
       } else {
+        this.focusOnFirstChildSection = undefined;
         this.unsubscribeFromEventListeners();
       }
     }));
@@ -92,7 +98,7 @@ export class ExpandableNavbarSectionComponent extends NavbarSectionComponent imp
       this.dropdownItems.forEach((item: HTMLElement) => {
         item.addEventListener('keydown', this.navigateDropdown.bind(this));
       });
-      if (this.dropdownItems.length > 0) {
+      if (this.focusOnFirstChildSection && this.dropdownItems.length > 0) {
         this.dropdownItems.item(0).focus();
       }
       this.addArrowEventListeners = false;
@@ -104,6 +110,18 @@ export class ExpandableNavbarSectionComponent extends NavbarSectionComponent imp
     this.unsubscribeFromEventListeners();
   }
 
+  /**
+   * Activate this section if it's currently inactive, deactivate it when it's currently active.
+   * Also saves whether this toggle was performed by a keyboard event (non-click event) in order to know if thi first
+   * item should be focussed when activating a section.
+   *
+   *  @param {Event} event The user event that triggered this method
+   */
+  override toggleSection(event: Event): void {
+    this.focusOnFirstChildSection = event.type !== 'click';
+    super.toggleSection(event);
+  }
+
   /**
    * Removes all the current event listeners on the dropdown items (called when the menu is closed & on component
    * destruction)
@@ -196,9 +214,11 @@ export class ExpandableNavbarSectionComponent extends NavbarSectionComponent imp
         this.deactivateSection(event, false);
         break;
       case 'ArrowDown':
+        this.focusOnFirstChildSection = true;
         this.activateSection(event);
         break;
       case 'Space':
+      case 'Enter':
         event.preventDefault();
         break;
     }
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 8ee40ee8c6..8988d53fe1 100644
--- a/src/app/shared/menu/menu-section/menu-section.component.ts
+++ b/src/app/shared/menu/menu-section/menu-section.component.ts
@@ -55,9 +55,11 @@ export class MenuSectionComponent implements OnInit, OnDestroy {
    * Set initial values for instance variables
    */
   ngOnInit(): void {
-    this.menuService.isSectionActive(this.menuID, this.section.id).pipe(distinctUntilChanged()).subscribe((isActive: boolean) => {
-      this.active$.next(isActive);
-    });
+    this.subs.push(this.menuService.isSectionActive(this.menuID, this.section.id).pipe(distinctUntilChanged()).subscribe((isActive: boolean) => {
+      if (this.active$.value !== isActive) {
+        this.active$.next(isActive);
+      }
+    }));
     this.initializeInjectorData();
   }