cjones/immich
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 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
web/src/lib/components/shared-components/base-modal.svelte
+31 -27
View File
@@ -6,13 +6,13 @@
import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
import { clickOutside } from '$lib/utils/click-outside';
import { mdiClose } from '@mdi/js';
import FocusTrap from '$lib/components/shared-components/focus-trap.svelte';
const dispatch = createEventDispatcher<{
escape: void;
close: void;
}>();
export let zIndex = 9999;
export let ignoreClickOutside = false;
onMount(() => {
if (browser) {
@@ -34,36 +34,40 @@
});
</script>
<div
id="immich-modal"
style:z-index={zIndex}
transition:fade={{ duration: 100, easing: quintOut }}
class="fixed left-0 top-0 flex h-full w-full place-content-center place-items-center overflow-hidden bg-black/50"
>
<FocusTrap>
<div
use:clickOutside
on:outclick={() => !ignoreClickOutside && dispatch('close')}
on:escape={() => dispatch('escape')}
class="max-h-[800px] min-h-[200px] w-[450px] overflow-y-auto rounded-lg bg-immich-bg shadow-md dark:bg-immich-dark-gray dark:text-immich-dark-fg immich-scrollbar"
id="immich-modal"
style:z-index={zIndex}
transition:fade={{ duration: 100, easing: quintOut }}
class="fixed left-0 top-0 flex h-full w-full place-content-center place-items-center overflow-hidden bg-black/50"
>
<div class="flex place-items-center justify-between px-5 py-3">
<div
use:clickOutside={{
onOutclick: () => dispatch('close'),
onEscape: () => dispatch('escape'),
}}
class="max-h-[800px] min-h-[200px] w-[450px] overflow-y-auto rounded-lg bg-immich-bg shadow-md dark:bg-immich-dark-gray dark:text-immich-dark-fg immich-scrollbar"
tabindex="-1"
>
<div class="flex place-items-center justify-between px-5 py-3">
<div>
<slot name="title">
<p>Modal Title</p>
</slot>
</div>
<CircleIconButton on:click={() => dispatch('close')} icon={mdiClose} size={'20'} />
</div>
<div>
<slot name="title">
<p>Modal Title</p>
</slot>
<slot />
</div>
<CircleIconButton on:click={() => dispatch('close')} icon={mdiClose} size={'20'} />
{#if $$slots['sticky-bottom']}
<div class="sticky bottom-0 bg-immich-bg px-5 pb-5 pt-3 dark:bg-immich-dark-gray">
<slot name="sticky-bottom" />
</div>
{/if}
</div>
<div>
<slot />
</div>
{#if $$slots['sticky-bottom']}
<div class="sticky bottom-0 bg-immich-bg px-5 pb-5 pt-3 dark:bg-immich-dark-gray">
<slot name="sticky-bottom" />
</div>
{/if}
</div>
</div>
</FocusTrap>