116404: Don't navigate in the expandable navbar section with tab

alexandrevryghem · Jul 5, 2024 · d494a84 · d494a84
1 parent dc9b8cc
commit d494a84
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 5 deletions.
diff --git a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html
@@ -9,6 +9,7 @@
        (keyup.space)="toggleSection($event)"
        (click)="toggleSection($event)"
        (keydown.space)="$event.preventDefault()"
+       (keydown.tab)="deactivateSection($event, false)"
        aria-haspopup="menu"
        data-test="navbar-section-toggler"
        [attr.aria-expanded]="(active$ | async).valueOf()"
@@ -22,7 +23,7 @@
       </span>
       <i class="fas fa-caret-down fa-xs toggle-menu-icon" aria-hidden="true"></i>
     </a>
-    <div @slide *ngIf="(active$ | async).valueOf() === true" (click)="deactivateSection($event)"
+    <div *ngIf="(active$ | async).valueOf() === true" (click)="deactivateSection($event)"
         [id]="expandableNavbarSectionId(section.id)"
         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">

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
@@ -15,7 +15,6 @@ import { RouterLinkActive } from '@angular/router';
 import { Observable } from 'rxjs';
 import { first } from 'rxjs/operators';
 
-import { slide } from '../../shared/animations/slide';
 import { HostWindowService } from '../../shared/host-window.service';
 import { MenuService } from '../../shared/menu/menu.service';
 import { MenuID } from '../../shared/menu/menu-id.model';
@@ -29,7 +28,6 @@ import { NavbarSectionComponent } from '../navbar-section/navbar-section.compone
   selector: 'ds-base-expandable-navbar-section',
   templateUrl: './expandable-navbar-section.component.html',
   styleUrls: ['./expandable-navbar-section.component.scss'],
-  animations: [slide],
   standalone: true,
   imports: [VarDirective, RouterLinkActive, NgComponentOutlet, NgIf, NgFor, AsyncPipe],
 })

diff --git a/src/app/shared/menu/menu-section/menu-section.component.ts b/src/app/shared/menu/menu-section/menu-section.component.ts
@@ -102,10 +102,14 @@ export class MenuSectionComponent implements OnInit, OnDestroy {
 
   /**
    * Deactivate 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
    */
-  deactivateSection(event: Event) {
-    event.preventDefault();
+  deactivateSection(event: Event, skipEvent = true): void {
+    if (skipEvent) {
+      event.preventDefault();
+    }
     this.menuService.deactivateSection(this.menuID, this.section.id);
   }