hazza/dspace-angular
1
0
Fork 1
mirror of https://github.com/DSpace/dspace-angular.git synced 2025-10-14 13:33:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

116404: Prevent the opening from the modal using mouse interactions from automatically focussing on the first element

Browse Source 
(cherry picked from commit 82ed3aadff)
This commit is contained in:
Alexandre Vryghem
2025-01-28 00:11:50 +01:00
committed by github-actions[bot]
parent a984957af9
commit 7de6aa0e24
3 changed files with 154 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.ts
View File

@@ -55,6 +55,11 @@ export class ExpandableNavbarSectionComponent extends NavbarSectionComponent imp
*/
mouseEntered = false;
/**
* Whether the section was expanded
*/
focusOnFirstChildSection = false;
/**
* True if screen size was small before a resize event
*/
@@ -107,6 +112,7 @@ export class ExpandableNavbarSectionComponent extends NavbarSectionComponent imp
if (active === true) {
this.addArrowEventListeners = true;
} else {
this.focusOnFirstChildSection = undefined;
this.unsubscribeFromEventListeners();
}
}));
@@ -118,7 +124,7 @@ export class ExpandableNavbarSectionComponent extends NavbarSectionComponent imp
this.dropdownItems.forEach((item: HTMLElement) => {
item.addEventListener('keydown', this.navigateDropdown.bind(this));
});
if (this.dropdownItems.length > 0) {
if (this.focusOnFirstChildSection && this.dropdownItems.length > 0) {
this.dropdownItems.item(0).focus();
}
this.addArrowEventListeners = false;
@@ -130,6 +136,18 @@ export class ExpandableNavbarSectionComponent extends NavbarSectionComponent imp
this.unsubscribeFromEventListeners();
}
/**
* Activate this section if it's currently inactive, deactivate it when it's currently active.
* Also saves whether this toggle was performed by a keyboard event (non-click event) in order to know if thi first
* item should be focussed when activating a section.
*
* @param {Event} event The user event that triggered this method
*/
override toggleSection(event: Event): void {
this.focusOnFirstChildSection = event.type !== 'click';
super.toggleSection(event);
}
/**
* Removes all the current event listeners on the dropdown items (called when the menu is closed & on component
* destruction)
@@ -222,9 +240,11 @@ export class ExpandableNavbarSectionComponent extends NavbarSectionComponent imp
this.deactivateSection(event, false);
break;
case 'ArrowDown':
this.focusOnFirstChildSection = true;
this.activateSection(event);
break;
case 'Space':
case 'Enter':
event.preventDefault();
break;
}