mirror of
https://github.com/immich-app/immich.git
synced 2025-12-27 17:24:58 +03:00
* feat(web,a11y): context menu keyboard navigation * wip: all context menus visible * wip: more migrations to the ButtonContextMenu, usability improvements * wip: migrate Administration, PeopleCard * wip: refocus the button on click, docs * fix: more intuitive RightClickContextMenu - configurable title - focus management: tab keys, clicks, closing the menu - automatically closing when an option is selected * fix: refining the little details - adjust the aria attributes - intuitive escape key propagation - extract context into its own file * fix: dropdown options not clickable in a <Portal> * wip: small fixes - export selectedColor to prevent unexpected styling - better context function naming * chore: revert changes to list navigation, to reduce scope of the PR * fix: remove topBorder prop * feat: automatically select the first option on enter or space keypress * fix: use Svelte store instead to handle selecting menu options - better prop naming for ButtonContextMenu * feat: hovering the mouse can change the active element * fix: remove Portal, more predictable open/close behavior * feat: make selected item visible using a scroll - also: minor cleanup of the context-menu-navigation Svelte action * feat: maintain context menu position on resize * fix: use the whole padding class as better tailwind convention * fix: options not announcing with screen reader for ButtonContextMenu * fix: screen reader announcing right click context menu options * fix: handle focus out scenario --------- Co-authored-by: Alex <alex.tran1502@gmail.com>
22 lines
525 B
TypeScript
22 lines
525 B
TypeScript
interface Options {
|
|
onFocusOut?: (event: FocusEvent) => void;
|
|
}
|
|
|
|
export function focusOutside(node: HTMLElement, options: Options = {}) {
|
|
const { onFocusOut } = options;
|
|
|
|
const handleFocusOut = (event: FocusEvent) => {
|
|
if (onFocusOut && event.relatedTarget instanceof Node && !node.contains(event.relatedTarget as Node)) {
|
|
onFocusOut(event);
|
|
}
|
|
};
|
|
|
|
node.addEventListener('focusout', handleFocusOut);
|
|
|
|
return {
|
|
destroy() {
|
|
node.removeEventListener('focusout', handleFocusOut);
|
|
},
|
|
};
|
|
}
|