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 81c46f19ffb..deed97e6171 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 @@ -105,10 +105,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; } } @@ -188,7 +191,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 43df73547a5..21deca9b180 100644 --- a/src/app/shared/menu/menu-section/menu-section.component.ts +++ b/src/app/shared/menu/menu-section/menu-section.component.ts @@ -92,9 +92,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); }