diff --git a/projects/element-ng/navbar-vertical/si-navbar-vertical-group-trigger.directive.ts b/projects/element-ng/navbar-vertical/si-navbar-vertical-group-trigger.directive.ts index 5544c4132..cd50af47a 100644 --- a/projects/element-ng/navbar-vertical/si-navbar-vertical-group-trigger.directive.ts +++ b/projects/element-ng/navbar-vertical/si-navbar-vertical-group-trigger.directive.ts @@ -9,6 +9,7 @@ import { ComponentRef, computed, Directive, + ElementRef, EmbeddedViewRef, HostListener, inject, @@ -74,6 +75,7 @@ export class SiNavbarVerticalGroupTriggerDirective implements OnInit { readonly active = signal(false); protected readonly navbar = inject(SI_NAVBAR_VERTICAL); + private readonly elementRef = inject(ElementRef); private flyoutOutsideClickSubscription?: Subscription; private readonly viewContainer = inject(ViewContainerRef); @@ -103,10 +105,12 @@ export class SiNavbarVerticalGroupTriggerDirective implements OnInit { hideFlyout(): void { if (this.flyout()) { this.flyout.set(false); + this.active.set(false); this.flyoutAnchorComponentRef?.destroy(); this.flyoutAnchorComponentRef = undefined; this.attachInline(); this.flyoutOutsideClickSubscription?.unsubscribe(); + this.elementRef.nativeElement.focus(); } } diff --git a/projects/element-ng/navbar-vertical/si-navbar-vertical-group.component.ts b/projects/element-ng/navbar-vertical/si-navbar-vertical-group.component.ts index 6220444a1..069273333 100644 --- a/projects/element-ng/navbar-vertical/si-navbar-vertical-group.component.ts +++ b/projects/element-ng/navbar-vertical/si-navbar-vertical-group.component.ts @@ -3,7 +3,7 @@ * SPDX-License-Identifier: MIT */ import { CdkTrapFocus } from '@angular/cdk/a11y'; -import { Component, computed, HostListener, inject } from '@angular/core'; +import { Component, computed, effect, HostListener, inject, viewChild } from '@angular/core'; import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; import { RouterLinkActive } from '@angular/router'; @@ -19,7 +19,6 @@ import { SI_NAVBAR_VERTICAL } from './si-navbar-vertical.provider'; [class.inline-group]="!flyout" [class.dropdown-menu]="flyout" [cdkTrapFocus]="flyout" - [cdkTrapFocusAutoCapture]="flyout" >
@@ -38,6 +37,7 @@ export class SiNavbarVerticalGroupComponent { protected readonly navbar = inject(SI_NAVBAR_VERTICAL); protected readonly groupTrigger = inject(SiNavbarVerticalGroupTriggerDirective); private readonly routerLinkActive = inject(RouterLinkActive, { optional: true }); + private readonly focusTrap = viewChild(CdkTrapFocus); // Store initial value, as the mode for an instance never changes. protected flyout = this.groupTrigger.flyout(); @@ -50,6 +50,12 @@ export class SiNavbarVerticalGroupComponent { this.routerLinkActive?.isActiveChange .pipe(takeUntilDestroyed()) .subscribe(active => this.groupTrigger.active.set(active)); + + effect(() => { + if (this.visible()) { + this.focusTrap()?.focusTrap.focusFirstTabbableElementWhenReady(); + } + }); } @HostListener('keydown.escape') protected close(): void { diff --git a/projects/element-ng/navbar-vertical/si-navbar-vertical-item.component.ts b/projects/element-ng/navbar-vertical/si-navbar-vertical-item.component.ts index 09dd704ad..ea3783696 100644 --- a/projects/element-ng/navbar-vertical/si-navbar-vertical-item.component.ts +++ b/projects/element-ng/navbar-vertical/si-navbar-vertical-item.component.ts @@ -6,6 +6,7 @@ import { ChangeDetectionStrategy, Component, computed, + ElementRef, HostListener, inject, input, @@ -65,7 +66,7 @@ export class SiNavbarVerticalItemComponent implements OnInit { }); private readonly routerLinkActive = inject(RouterLinkActive, { optional: true }); private readonly siLink = inject(SiLinkDirective, { optional: true }); - + private readonly elementRef = inject(ElementRef); /** * Hides the badge in collapsed state */ @@ -108,6 +109,7 @@ export class SiNavbarVerticalItemComponent implements OnInit { return; } this.parent?.group?.hideFlyout(); + this.elementRef.nativeElement.focus(); if (!this.group) { this.navbar.itemTriggered(); } diff --git a/src/app/examples/si-navbar-vertical/si-navbar-vertical.ts b/src/app/examples/si-navbar-vertical/si-navbar-vertical.ts index 74f8b0d8c..dee8e6b20 100644 --- a/src/app/examples/si-navbar-vertical/si-navbar-vertical.ts +++ b/src/app/examples/si-navbar-vertical/si-navbar-vertical.ts @@ -82,10 +82,7 @@ export class SampleComponent implements OnInit { label: 'Action', icon: 'element-warning', active: false, - action: item => { - item.active = true; - this.logEvent('Callback for action called'); - } + action: () => this.logEvent('Callback for action called') } ];