hazza/dspace-angular
1
0
Fork 1
mirror of https://github.com/DSpace/dspace-angular.git synced 2025-10-07 01:54:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Had to move the @slide animation to prevent focus being lost when tabbing in the expandable section
This commit is contained in:
Alexandre Vryghem
2024-07-05 11:01:38 +02:00
parent 2547b1218f
commit c08c2721ac
2 changed files with 13 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html
View File

@@ -9,6 +9,7 @@
(keyup.space)="toggleSection($event)" (keyup.space)="toggleSection($event)"
(click)="toggleSection($event)" (click)="toggleSection($event)"
(keydown.space)="$event.preventDefault()" (keydown.space)="$event.preventDefault()"
(keydown.tab)="deactivateSection($event, false)"
aria-haspopup="menu" aria-haspopup="menu"
data-test="navbar-section-toggler" data-test="navbar-section-toggler"
[attr.aria-expanded]="(active$ | async).valueOf()" [attr.aria-expanded]="(active$ | async).valueOf()"
@@ -21,13 +22,15 @@
</span> </span>
<i class="fas fa-caret-down fa-xs toggle-menu-icon" aria-hidden="true"></i> <i class="fas fa-caret-down fa-xs toggle-menu-icon" aria-hidden="true"></i>
</a> </a>
<div @slide *ngIf="(active$ | async).valueOf() === true" (click)="deactivateSection($event)" <div *ngIf="(active$ | async).valueOf() === true" (click)="deactivateSection($event)"
[id]="expandableNavbarSectionId(section.id)" [id]="expandableNavbarSectionId(section.id)"
role="menu" 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"> class="dropdown-menu show nav-dropdown-menu m-0 shadow-none border-top-0 px-3 px-md-0 pt-0 pt-md-1">
<div @slide role="presentation">
<div *ngFor="let subSection of (subSections$ | async)" class="text-nowrap" role="presentation"> <div *ngFor="let subSection of (subSections$ | async)" class="text-nowrap" role="presentation">
<ng-container <ng-container
*ngComponentOutlet="(sectionMap$ | async).get(subSection.id).component; injector: (sectionMap$ | async).get(subSection.id).injector;"></ng-container> *ngComponentOutlet="(sectionMap$ | async).get(subSection.id).component; injector: (sectionMap$ | async).get(subSection.id).injector;"></ng-container>
</div> </div>
</div> </div>
</div> </div>
</div>

6
src/app/shared/menu/menu-section/menu-section.component.ts
View File

@@ -102,10 +102,14 @@ export class MenuSectionComponent implements OnInit, OnDestroy {
/** /**
* Deactivate this section * Deactivate this section
*
* @param {Event} event The user event that triggered this method * @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) { deactivateSection(event: Event, skipEvent = true): void {
if (skipEvent) {
event.preventDefault(); event.preventDefault();
}
this.menuService.deactivateSection(this.menuID, this.section.id); this.menuService.deactivateSection(this.menuID, this.section.id);
} }