116404: Apply focus on first item

(cherry picked from commit 2152bab)

Author: alexandrevryghem

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();

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