116404: Added navigation with arrow keys in navbar & collapsed the expandable menu when hovering outside of it

(cherry picked from commit 05232cdf2b)

src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html

@@ -1,4 +1,4 @@
-<div class="ds-menu-item-wrapper text-md-center"
+<div #expandableNavbarSectionContainer class="ds-menu-item-wrapper text-md-center"
      [id]="'expandable-navbar-section-' + section.id"
      (mouseenter)="onMouseEnter($event)"
      (mouseleave)="onMouseLeave($event)"
@@ -8,12 +8,11 @@
      (keyup.enter)="toggleSection($event)"
      (keyup.space)="toggleSection($event)"
      (click)="toggleSection($event)"
-       (keydown.space)="$event.preventDefault()"
-       (keydown.tab)="deactivateSection($event, false)"
+     (keydown)="keyDown($event)"
      aria-haspopup="menu"
      data-test="navbar-section-toggler"
      [attr.aria-expanded]="(active$ | async).valueOf()"
-       [attr.aria-controls]="expandableNavbarSectionId(section.id)"
+     [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">
@@ -23,7 +22,9 @@
     <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)"
+       [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">

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,
+  constructor(
+    @Inject('sectionDataProvider') public section: MenuSection,
     protected menuService: MenuService,
     protected injector: Injector,
-              private windowService: HostWindowService
+    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;
+    }
   }
 }

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

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);
+    }
+  }
+
+}