helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-14 17:36:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
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;
}