immich-app/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-12-20 09:15:35 +03:00
Code Issues Packages Projects Releases 18 Wiki Activity

feat(web, a11y): focus management for modals and popups (#8298)

Browse Source 
* feat(web, a11y): focus management for modals and popups

* feat: hide asset options dropdown on escape key
This commit is contained in:
Ben Basten
2024-03-27 20:55:27 +00:00
committed by GitHub
parent 9fe80c25eb
commit e1c2135850
12 changed files with 459 additions and 359 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/lib/utils/click-outside.ts
View File

@@ -43,12 +43,12 @@ export function clickOutside(node: HTMLElement, options: Options = {}): ActionRe
};
document.addEventListener('click', handleClick, true);
document.addEventListener('keydown', handleKey, true);
node.addEventListener('keydown', handleKey, false);
return {
destroy() {
document.removeEventListener('click', handleClick, true);
document.removeEventListener('keydown', handleKey, true);
node.removeEventListener('keydown', handleKey, false);
},
};
}

7
web/src/lib/utils/shortcut.ts
View File

@@ -12,6 +12,7 @@ export type ShortcutOptions<T = HTMLElement> = {
shortcut: Shortcut;
ignoreInputFields?: boolean;
onShortcut: (event: KeyboardEvent & { currentTarget: T }) => unknown;
preventDefault?: boolean;
};
export const shouldIgnoreShortcut = (event: KeyboardEvent): boolean => {
@@ -53,13 +54,15 @@ export const shortcuts = <T extends HTMLElement>(
function onKeydown(event: KeyboardEvent) {
const ignoreShortcut = shouldIgnoreShortcut(event);
for (const { shortcut, onShortcut, ignoreInputFields = true } of options) {
for (const { shortcut, onShortcut, ignoreInputFields = true, preventDefault = true } of options) {
if (ignoreInputFields && ignoreShortcut) {
continue;
}
if (matchesShortcut(event, shortcut)) {
event.preventDefault();
if (preventDefault) {
event.preventDefault();
}
onShortcut(event as KeyboardEvent & { currentTarget: T });
return;
}