hazza/dspace-angular
1
0
Fork 1
mirror of https://github.com/DSpace/dspace-angular.git synced 2025-10-07 10:04:11 +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

(cherry picked from commit c08c2721ac)
This commit is contained in:
Alexandre Vryghem
2024-07-05 11:01:38 +02:00
committed by github-actions[bot]
parent ed27231769
commit 17e03330d0
2 changed files with 13 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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()"
@@ -21,13 +22,15 @@
</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">
<div @slide role="presentation">
<div *ngFor="let subSection of (subSections$ | async)" class="text-nowrap" role="presentation">
<ng-container
*ngComponentOutlet="(sectionMap$ | async).get(subSection.id).component; injector: (sectionMap$ | async).get(subSection.id).injector;"></ng-container>
</div>
<ng-container
*ngComponentOutlet="(sectionMap$ | async).get(subSection.id).component; injector: (sectionMap$ | async).get(subSection.id).injector;"></ng-container>
</div>
</div>
</div>
</div>

8
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
*
* @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);
}