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