c-l/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-01-16 16:56:46 +01:00
Code Releases Activity

refactor(web): focus trap (#10915)

Browse source
This commit is contained in:
Michel Heusschen 2024-07-08 03:33:07 +02:00 committed by GitHub
parent 39221c8d1f
commit cb40db9555
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 407 additions and 365 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
web/src/lib/actions/__test__/focus-trap-test.svelte Normal file
View file

@ -0,0 +1,18 @@
<script lang="ts">
import { focusTrap } from '$lib/actions/focus-trap';
export let show: boolean;
</script>
<button type="button" on:click={() => (show = true)}>Open</button>
{#if show}
<div use:focusTrap>
<div>
<span>text</span>
<button data-testid="one" type="button" on:click={() => (show = false)}>Close</button>
</div>
<input data-testid="two" disabled />
<input data-testid="three" />
</div>
{/if}

40
web/src/lib/actions/__test__/focus-trap.spec.ts Normal file
View file

@ -0,0 +1,40 @@
import FocusTrapTest from '$lib/actions/__test__/focus-trap-test.svelte';
import { render, screen } from '@testing-library/svelte';
import userEvent from '@testing-library/user-event';
import { tick } from 'svelte';
describe('focusTrap action', () => {
const user = userEvent.setup();
it('sets focus to the first focusable element', () => {
render(FocusTrapTest, { show: true });
expect(document.activeElement).toEqual(screen.getByTestId('one'));
});
it('supports backward focus wrapping', async () => {
render(FocusTrapTest, { show: true });
await user.keyboard('{Shift>}{Tab}{/Shift}');
expect(document.activeElement).toEqual(screen.getByTestId('three'));
});
it('supports forward focus wrapping', async () => {
render(FocusTrapTest, { show: true });
screen.getByTestId('three').focus();
await user.keyboard('{Tab}');
expect(document.activeElement).toEqual(screen.getByTestId('one'));
});
it('restores focus to the triggering element', async () => {
render(FocusTrapTest, { show: false });
const openButton = screen.getByText('Open');
openButton.focus();
openButton.click();
await tick();
expect(document.activeElement).toEqual(screen.getByTestId('one'));
screen.getByText('Close').click();
await tick();
expect(document.activeElement).toEqual(openButton);
});
});

55
web/src/lib/actions/focus-trap.ts Normal file
View file

@ -0,0 +1,55 @@
import { shortcuts } from '$lib/actions/shortcut';
const selectors =
'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
export function focusTrap(container: HTMLElement) {
const triggerElement = document.activeElement;
const focusableElement = container.querySelector<HTMLElement>(selectors);
focusableElement?.focus();
const getFocusableElements = (): [HTMLElement | null, HTMLElement | null] => {
const focusableElements = container.querySelectorAll<HTMLElement>(selectors);
return [
focusableElements.item(0), //
focusableElements.item(focusableElements.length - 1),
];
};
const { destroy: destroyShortcuts } = shortcuts(container, [
{
ignoreInputFields: false,
preventDefault: false,
shortcut: { key: 'Tab' },
onShortcut: (event) => {
const [firstElement, lastElement] = getFocusableElements();
if (document.activeElement === lastElement) {
event.preventDefault();
firstElement?.focus();
}
},
},
{
ignoreInputFields: false,
preventDefault: false,
shortcut: { key: 'Tab', shift: true },
onShortcut: (event) => {
const [firstElement, lastElement] = getFocusableElements();
if (document.activeElement === firstElement) {
event.preventDefault();
lastElement?.focus();
}
},
},
]);
return {
destroy() {
destroyShortcuts?.();
if (triggerElement instanceof HTMLElement) {
triggerElement.focus();
}
},
};
}

451
web/src/lib/components/asset-viewer/asset-viewer.svelte
View file

@ -1,7 +1,6 @@
<script lang="ts"> <script lang="ts">
import Icon from '$lib/components/elements/icon.svelte'; import Icon from '$lib/components/elements/icon.svelte';
import CreateSharedLinkModal from '$lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte'; import CreateSharedLinkModal from '$lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte';
import FocusTrap from '$lib/components/shared-components/focus-trap.svelte';
import { AssetAction, ProjectionType } from '$lib/constants'; import { AssetAction, ProjectionType } from '$lib/constants';
import { updateNumberOfComments } from '$lib/stores/activity.store'; import { updateNumberOfComments } from '$lib/stores/activity.store';
import { assetViewingStore } from '$lib/stores/asset-viewing.store'; import { assetViewingStore } from '$lib/stores/asset-viewing.store';
@ -61,6 +60,7 @@
import { websocketEvents } from '$lib/stores/websocket'; import { websocketEvents } from '$lib/stores/websocket';
import { canCopyImagesToClipboard } from 'copy-image-clipboard'; import { canCopyImagesToClipboard } from 'copy-image-clipboard';
import { t } from 'svelte-i18n'; import { t } from 'svelte-i18n';
import { focusTrap } from '$lib/actions/focus-trap';
export let assetStore: AssetStore | null = null; export let assetStore: AssetStore | null = null;
export let asset: AssetResponseDto; export let asset: AssetResponseDto;
@ -553,257 +553,252 @@
<svelte:document bind:fullscreenElement /> <svelte:document bind:fullscreenElement />
<FocusTrap> <section
<section id="immich-asset-viewer"
id="immich-asset-viewer" class="fixed left-0 top-0 z-[1001] grid h-screen w-screen grid-cols-4 grid-rows-[64px_1fr] overflow-hidden bg-black"
class="fixed left-0 top-0 z-[1001] grid h-screen w-screen grid-cols-4 grid-rows-[64px_1fr] overflow-hidden bg-black" use:focusTrap
> >
<!-- Top navigation bar --> <!-- Top navigation bar -->
{#if $slideshowState === SlideshowState.None} {#if $slideshowState === SlideshowState.None}
<div class="z-[1002] col-span-4 col-start-1 row-span-1 row-start-1 transition-transform"> <div class="z-[1002] col-span-4 col-start-1 row-span-1 row-start-1 transition-transform">
<AssetViewerNavBar <AssetViewerNavBar
{asset} {asset}
{album} {album}
isMotionPhotoPlaying={shouldPlayMotionPhoto} isMotionPhotoPlaying={shouldPlayMotionPhoto}
showCopyButton={canCopyImagesToClipboard() && asset.type === AssetTypeEnum.Image} showCopyButton={canCopyImagesToClipboard() && asset.type === AssetTypeEnum.Image}
showZoomButton={asset.type === AssetTypeEnum.Image} showZoomButton={asset.type === AssetTypeEnum.Image}
showMotionPlayButton={!!asset.livePhotoVideoId} showMotionPlayButton={!!asset.livePhotoVideoId}
showDownloadButton={shouldShowDownloadButton} showDownloadButton={shouldShowDownloadButton}
showDetailButton={enableDetailPanel} showDetailButton={enableDetailPanel}
showSlideshow={!!assetStore} showSlideshow={!!assetStore}
hasStackChildren={$stackAssetsStore.length > 0} hasStackChildren={$stackAssetsStore.length > 0}
showShareButton={shouldShowShareModal} showShareButton={shouldShowShareModal}
onZoomImage={zoomToggle} onZoomImage={zoomToggle}
onCopyImage={copyImage} onCopyImage={copyImage}
on:back={closeViewer} on:back={closeViewer}
on:showDetail={showDetailInfoHandler} on:showDetail={showDetailInfoHandler}
on:download={() => downloadFile(asset)} on:download={() => downloadFile(asset)}
on:delete={() => trashOrDelete()} on:delete={() => trashOrDelete()}
on:permanentlyDelete={() => trashOrDelete(true)} on:permanentlyDelete={() => trashOrDelete(true)}
on:favorite={toggleFavorite} on:favorite={toggleFavorite}
on:addToAlbum={() => openAlbumPicker(false)} on:addToAlbum={() => openAlbumPicker(false)}
on:restoreAsset={() => handleRestoreAsset()} on:restoreAsset={() => handleRestoreAsset()}
on:addToSharedAlbum={() => openAlbumPicker(true)} on:addToSharedAlbum={() => openAlbumPicker(true)}
on:playMotionPhoto={() => (shouldPlayMotionPhoto = true)} on:playMotionPhoto={() => (shouldPlayMotionPhoto = true)}
on:stopMotionPhoto={() => (shouldPlayMotionPhoto = false)} on:stopMotionPhoto={() => (shouldPlayMotionPhoto = false)}
on:toggleArchive={toggleAssetArchive} on:toggleArchive={toggleAssetArchive}
on:asProfileImage={() => (isShowProfileImageCrop = true)} on:asProfileImage={() => (isShowProfileImageCrop = true)}
on:setAsAlbumCover={handleUpdateThumbnail} on:setAsAlbumCover={handleUpdateThumbnail}
on:runJob={({ detail: job }) => handleRunJob(job)} on:runJob={({ detail: job }) => handleRunJob(job)}
on:playSlideShow={() => ($slideshowState = SlideshowState.PlaySlideshow)} on:playSlideShow={() => ($slideshowState = SlideshowState.PlaySlideshow)}
on:unstack={handleUnstack} on:unstack={handleUnstack}
on:showShareModal={() => (isShowShareModal = true)} on:showShareModal={() => (isShowShareModal = true)}
/>
</div>
{/if}
{#if $slideshowState === SlideshowState.None && showNavigation}
<div class="z-[1001] my-auto column-span-1 col-start-1 row-span-full row-start-1 justify-self-start">
<NavigationArea onClick={(e) => navigateAsset('previous', e)} label={$t('view_previous_asset')}>
<Icon path={mdiChevronLeft} size="36" ariaHidden />
</NavigationArea>
</div>
{/if}
<!-- Asset Viewer -->
<div class="z-[1000] relative col-start-1 col-span-4 row-start-1 row-span-full" bind:this={assetViewerHtmlElement}>
{#if $slideshowState != SlideshowState.None}
<div class="z-[1000] absolute w-full flex">
<SlideshowBar
{isFullScreen}
onSetToFullScreen={() => assetViewerHtmlElement.requestFullscreen()}
onPrevious={() => navigateAsset('previous')}
onNext={() => navigateAsset('next')}
onClose={() => ($slideshowState = SlideshowState.StopSlideshow)}
/> />
</div> </div>
{/if} {/if}
{#if $slideshowState === SlideshowState.None && showNavigation} {#if previewStackedAsset}
<div class="z-[1001] my-auto column-span-1 col-start-1 row-span-full row-start-1 justify-self-start"> {#key previewStackedAsset.id}
<NavigationArea onClick={(e) => navigateAsset('previous', e)} label={$t('view_previous_asset')}> {#if previewStackedAsset.type === AssetTypeEnum.Image}
<Icon path={mdiChevronLeft} size="36" ariaHidden /> <PhotoViewer
</NavigationArea> bind:zoomToggle
</div> bind:copyImage
{/if} asset={previewStackedAsset}
{preloadAssets}
<!-- Asset Viewer --> on:close={closeViewer}
<div class="z-[1000] relative col-start-1 col-span-4 row-start-1 row-span-full" bind:this={assetViewerHtmlElement}> haveFadeTransition={false}
{#if $slideshowState != SlideshowState.None} {sharedLink}
<div class="z-[1000] absolute w-full flex">
<SlideshowBar
{isFullScreen}
onSetToFullScreen={() => assetViewerHtmlElement.requestFullscreen()}
onPrevious={() => navigateAsset('previous')}
onNext={() => navigateAsset('next')}
onClose={() => ($slideshowState = SlideshowState.StopSlideshow)}
/> />
</div> {:else}
{/if} <VideoViewer
assetId={previewStackedAsset.id}
{#if previewStackedAsset} checksum={previewStackedAsset.checksum}
{#key previewStackedAsset.id} projectionType={previewStackedAsset.exifInfo?.projectionType}
{#if previewStackedAsset.type === AssetTypeEnum.Image} loopVideo={true}
<PhotoViewer on:close={closeViewer}
bind:zoomToggle on:onVideoEnded={() => navigateAsset()}
bind:copyImage on:onVideoStarted={handleVideoStarted}
asset={previewStackedAsset} />
{preloadAssets} {/if}
on:close={closeViewer} {/key}
haveFadeTransition={false} {:else}
{sharedLink} {#key asset.id}
/> {#if !asset.resized}
{:else} <div class="flex h-full w-full justify-center">
<VideoViewer <div
assetId={previewStackedAsset.id} class="px-auto flex aspect-square h-full items-center justify-center bg-gray-100 dark:bg-immich-dark-gray"
checksum={previewStackedAsset.checksum} >
projectionType={previewStackedAsset.exifInfo?.projectionType} <Icon path={mdiImageBrokenVariant} size="25%" />
loopVideo={true}
on:close={closeViewer}
on:onVideoEnded={() => navigateAsset()}
on:onVideoStarted={handleVideoStarted}
/>
{/if}
{/key}
{:else}
{#key asset.id}
{#if !asset.resized}
<div class="flex h-full w-full justify-center">
<div
class="px-auto flex aspect-square h-full items-center justify-center bg-gray-100 dark:bg-immich-dark-gray"
>
<Icon path={mdiImageBrokenVariant} size="25%" />
</div>
</div> </div>
{:else if asset.type === AssetTypeEnum.Image} </div>
{#if shouldPlayMotionPhoto && asset.livePhotoVideoId} {:else if asset.type === AssetTypeEnum.Image}
<VideoViewer {#if shouldPlayMotionPhoto && asset.livePhotoVideoId}
assetId={asset.livePhotoVideoId}
checksum={asset.checksum}
projectionType={asset.exifInfo?.projectionType}
loopVideo={$slideshowState !== SlideshowState.PlaySlideshow}
on:close={closeViewer}
on:onVideoEnded={() => (shouldPlayMotionPhoto = false)}
/>
{:else if asset.exifInfo?.projectionType === ProjectionType.EQUIRECTANGULAR || (asset.originalPath && asset.originalPath
.toLowerCase()
.endsWith('.insp'))}
<PanoramaViewer {asset} />
{:else}
<PhotoViewer bind:zoomToggle bind:copyImage {asset} {preloadAssets} on:close={closeViewer} {sharedLink} />
{/if}
{:else}
<VideoViewer <VideoViewer
assetId={asset.id} assetId={asset.livePhotoVideoId}
checksum={asset.checksum} checksum={asset.checksum}
projectionType={asset.exifInfo?.projectionType} projectionType={asset.exifInfo?.projectionType}
loopVideo={$slideshowState !== SlideshowState.PlaySlideshow} loopVideo={$slideshowState !== SlideshowState.PlaySlideshow}
on:close={closeViewer} on:close={closeViewer}
on:onVideoEnded={() => navigateAsset()} on:onVideoEnded={() => (shouldPlayMotionPhoto = false)}
on:onVideoStarted={handleVideoStarted}
/> />
{:else if asset.exifInfo?.projectionType === ProjectionType.EQUIRECTANGULAR || (asset.originalPath && asset.originalPath
.toLowerCase()
.endsWith('.insp'))}
<PanoramaViewer {asset} />
{:else}
<PhotoViewer bind:zoomToggle bind:copyImage {asset} {preloadAssets} on:close={closeViewer} {sharedLink} />
{/if} {/if}
{#if $slideshowState === SlideshowState.None && isShared && ((album && album.isActivityEnabled) || numberOfComments > 0)} {:else}
<div class="z-[9999] absolute bottom-0 right-0 mb-20 mr-8"> <VideoViewer
<ActivityStatus assetId={asset.id}
disabled={!album?.isActivityEnabled} checksum={asset.checksum}
{isLiked} projectionType={asset.exifInfo?.projectionType}
{numberOfComments} loopVideo={$slideshowState !== SlideshowState.PlaySlideshow}
on:favorite={handleFavorite} on:close={closeViewer}
on:openActivityTab={handleOpenActivity} on:onVideoEnded={() => navigateAsset()}
/> on:onVideoStarted={handleVideoStarted}
</div> />
{/if} {/if}
{/key} {#if $slideshowState === SlideshowState.None && isShared && ((album && album.isActivityEnabled) || numberOfComments > 0)}
{/if} <div class="z-[9999] absolute bottom-0 right-0 mb-20 mr-8">
<ActivityStatus
disabled={!album?.isActivityEnabled}
{isLiked}
{numberOfComments}
on:favorite={handleFavorite}
on:openActivityTab={handleOpenActivity}
/>
</div>
{/if}
{/key}
{/if}
</div>
{#if $slideshowState === SlideshowState.None && showNavigation}
<div class="z-[1001] my-auto col-span-1 col-start-4 row-span-full row-start-1 justify-self-end">
<NavigationArea onClick={(e) => navigateAsset('next', e)} label={$t('view_next_asset')}>
<Icon path={mdiChevronRight} size="36" ariaHidden />
</NavigationArea>
</div> </div>
{/if}
{#if $slideshowState === SlideshowState.None && showNavigation} {#if enableDetailPanel && $slideshowState === SlideshowState.None && $isShowDetail}
<div class="z-[1001] my-auto col-span-1 col-start-4 row-span-full row-start-1 justify-self-end"> <div
<NavigationArea onClick={(e) => navigateAsset('next', e)} label={$t('view_next_asset')}> transition:fly={{ duration: 150 }}
<Icon path={mdiChevronRight} size="36" ariaHidden /> id="detail-panel"
</NavigationArea> class="z-[1002] row-start-1 row-span-4 w-[360px] overflow-y-auto bg-immich-bg transition-all dark:border-l dark:border-l-immich-dark-gray dark:bg-immich-dark-bg"
</div> translate="yes"
{/if} >
<DetailPanel {asset} currentAlbum={album} albums={appearsInAlbums} on:close={() => ($isShowDetail = false)} />
</div>
{/if}
{#if enableDetailPanel && $slideshowState === SlideshowState.None && $isShowDetail} {#if $stackAssetsStore.length > 0 && withStacked}
<div <div
transition:fly={{ duration: 150 }} id="stack-slideshow"
id="detail-panel" class="z-[1002] flex place-item-center place-content-center absolute bottom-0 w-full col-span-4 col-start-1 overflow-x-auto horizontal-scrollbar"
class="z-[1002] row-start-1 row-span-4 w-[360px] overflow-y-auto bg-immich-bg transition-all dark:border-l dark:border-l-immich-dark-gray dark:bg-immich-dark-bg" >
translate="yes" <div class="relative w-full whitespace-nowrap transition-all">
> {#each $stackAssetsStore as stackedAsset, index (stackedAsset.id)}
<DetailPanel {asset} currentAlbum={album} albums={appearsInAlbums} on:close={() => ($isShowDetail = false)} /> <div
</div> class="{stackedAsset.id == asset.id
{/if} ? '-translate-y-[1px]'
: '-translate-y-0'} inline-block px-1 transition-transform"
{#if $stackAssetsStore.length > 0 && withStacked} >
<div <Thumbnail
id="stack-slideshow"
class="z-[1002] flex place-item-center place-content-center absolute bottom-0 w-full col-span-4 col-start-1 overflow-x-auto horizontal-scrollbar"
>
<div class="relative w-full whitespace-nowrap transition-all">
{#each $stackAssetsStore as stackedAsset, index (stackedAsset.id)}
<div
class="{stackedAsset.id == asset.id class="{stackedAsset.id == asset.id
? '-translate-y-[1px]' ? 'bg-transparent border-2 border-white'
: '-translate-y-0'} inline-block px-1 transition-transform" : 'bg-gray-700/40'} inline-block hover:bg-transparent"
> asset={stackedAsset}
<Thumbnail onClick={(stackedAsset, event) => {
class="{stackedAsset.id == asset.id event.preventDefault();
? 'bg-transparent border-2 border-white' asset = stackedAsset;
: 'bg-gray-700/40'} inline-block hover:bg-transparent" preloadAssets = index + 1 >= $stackAssetsStore.length ? [] : [$stackAssetsStore[index + 1]];
asset={stackedAsset} }}
onClick={(stackedAsset, event) => { on:mouse-event={(e) => handleStackedAssetMouseEvent(e, stackedAsset)}
event.preventDefault(); readonly
asset = stackedAsset; thumbnailSize={stackedAsset.id == asset.id ? 65 : 60}
preloadAssets = index + 1 >= $stackAssetsStore.length ? [] : [$stackAssetsStore[index + 1]]; showStackedIcon={false}
}} />
on:mouse-event={(e) => handleStackedAssetMouseEvent(e, stackedAsset)}
readonly
thumbnailSize={stackedAsset.id == asset.id ? 65 : 60}
showStackedIcon={false}
/>
{#if stackedAsset.id == asset.id} {#if stackedAsset.id == asset.id}
<div class="w-full flex place-items-center place-content-center"> <div class="w-full flex place-items-center place-content-center">
<div class="w-2 h-2 bg-white rounded-full flex mt-[2px]" /> <div class="w-2 h-2 bg-white rounded-full flex mt-[2px]" />
</div> </div>
{/if} {/if}
</div> </div>
{/each} {/each}
</div>
</div> </div>
{/if} </div>
{/if}
{#if isShared && album && isShowActivity && $user} {#if isShared && album && isShowActivity && $user}
<div <div
transition:fly={{ duration: 150 }} transition:fly={{ duration: 150 }}
id="activity-panel" id="activity-panel"
class="z-[1002] row-start-1 row-span-5 w-[360px] md:w-[460px] overflow-y-auto bg-immich-bg transition-all dark:border-l dark:border-l-immich-dark-gray dark:bg-immich-dark-bg" class="z-[1002] row-start-1 row-span-5 w-[360px] md:w-[460px] overflow-y-auto bg-immich-bg transition-all dark:border-l dark:border-l-immich-dark-gray dark:bg-immich-dark-bg"
translate="yes" translate="yes"
> >
<ActivityViewer <ActivityViewer
user={$user} user={$user}
disabled={!album.isActivityEnabled} disabled={!album.isActivityEnabled}
assetType={asset.type} assetType={asset.type}
albumOwnerId={album.ownerId} albumOwnerId={album.ownerId}
albumId={album.id} albumId={album.id}
assetId={asset.id} assetId={asset.id}
{isLiked} {isLiked}
bind:reactions bind:reactions
on:addComment={handleAddComment} on:addComment={handleAddComment}
on:deleteComment={handleRemoveComment} on:deleteComment={handleRemoveComment}
on:deleteLike={() => (isLiked = null)} on:deleteLike={() => (isLiked = null)}
on:close={() => (isShowActivity = false)} on:close={() => (isShowActivity = false)}
/>
</div>
{/if}
{#if isShowAlbumPicker}
<AlbumSelectionModal
shared={addToSharedAlbum}
on:newAlbum={({ detail }) => handleAddToNewAlbum(detail)}
on:album={({ detail }) => handleAddToAlbum(detail)}
onClose={() => (isShowAlbumPicker = false)}
/> />
{/if} </div>
{/if}
{#if isShowDeleteConfirmation} {#if isShowAlbumPicker}
<DeleteAssetDialog <AlbumSelectionModal
size={1} shared={addToSharedAlbum}
on:cancel={() => (isShowDeleteConfirmation = false)} on:newAlbum={({ detail }) => handleAddToNewAlbum(detail)}
on:confirm={() => deleteAsset()} on:album={({ detail }) => handleAddToAlbum(detail)}
/> onClose={() => (isShowAlbumPicker = false)}
{/if} />
{/if}
{#if isShowProfileImageCrop} {#if isShowDeleteConfirmation}
<ProfileImageCropper {asset} onClose={() => (isShowProfileImageCrop = false)} /> <DeleteAssetDialog size={1} on:cancel={() => (isShowDeleteConfirmation = false)} on:confirm={() => deleteAsset()} />
{/if} {/if}
{#if isShowShareModal} {#if isShowProfileImageCrop}
<CreateSharedLinkModal assetIds={[asset.id]} onClose={() => (isShowShareModal = false)} /> <ProfileImageCropper {asset} onClose={() => (isShowProfileImageCrop = false)} />
{/if} {/if}
</section>
</FocusTrap> {#if isShowShareModal}
<CreateSharedLinkModal assetIds={[asset.id]} onClose={() => (isShowShareModal = false)} />
{/if}
</section>
<style> <style>
#immich-asset-viewer { #immich-asset-viewer {

64
web/src/lib/components/shared-components/focus-trap.svelte
View file

@ -1,64 +0,0 @@
<script lang="ts">
import { shortcuts } from '$lib/actions/shortcut';
import { onMount, onDestroy } from 'svelte';
let container: HTMLElement;
let triggerElement: HTMLElement;
onMount(() => {
triggerElement = document.activeElement as HTMLElement;
const focusableElements = getFocusableElements();
focusableElements[0]?.focus();
});
onDestroy(() => {
triggerElement?.focus();
});
const getFocusableElements = () => {
return Array.from(
container.querySelectorAll(
'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])',
),
) as HTMLElement[];
};
const trapFocus = (direction: 'forward' | 'backward', event: KeyboardEvent) => {
const focusableElements = getFocusableElements();
const elementCount = focusableElements.length;
const firstElement = focusableElements[0];
const lastElement = focusableElements.at(elementCount - 1);
if (document.activeElement === lastElement && direction === 'forward') {
event.preventDefault();
firstElement?.focus();
} else if (document.activeElement === firstElement && direction === 'backward') {
event.preventDefault();
lastElement?.focus();
}
};
</script>
<div
bind:this={container}
use:shortcuts={[
{
ignoreInputFields: false,
shortcut: { key: 'Tab' },
onShortcut: (event) => {
trapFocus('forward', event);
},
preventDefault: false,
},
{
ignoreInputFields: false,
shortcut: { key: 'Tab', shift: true },
onShortcut: (event) => {
trapFocus('backward', event);
},
preventDefault: false,
},
]}
>
<slot />
</div>

45
web/src/lib/components/shared-components/full-screen-modal.svelte
View file

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import { clickOutside } from '$lib/actions/click-outside'; import { clickOutside } from '$lib/actions/click-outside';
import { focusTrap } from '$lib/actions/focus-trap';
import { fade } from 'svelte/transition'; import { fade } from 'svelte/transition';
import FocusTrap from '$lib/components/shared-components/focus-trap.svelte';
import ModalHeader from '$lib/components/shared-components/modal-header.svelte'; import ModalHeader from '$lib/components/shared-components/modal-header.svelte';
import { generateId } from '$lib/utils/generate-id'; import { generateId } from '$lib/utils/generate-id';
@ -52,28 +52,27 @@
on:keydown={(event) => { on:keydown={(event) => {
event.stopPropagation(); event.stopPropagation();
}} }}
use:focusTrap
> >
<FocusTrap> <div
<div class="z-[9999] max-w-[95vw] max-h-[min(95dvh,56rem)] {modalWidth} overflow-y-auto rounded-3xl bg-immich-bg shadow-md dark:bg-immich-dark-gray dark:text-immich-dark-fg immich-scrollbar"
class="z-[9999] max-w-[95vw] max-h-[min(95dvh,56rem)] {modalWidth} overflow-y-auto rounded-3xl bg-immich-bg shadow-md dark:bg-immich-dark-gray dark:text-immich-dark-fg immich-scrollbar" use:clickOutside={{ onOutclick: onClose, onEscape: onClose }}
use:clickOutside={{ onOutclick: onClose, onEscape: onClose }} tabindex="-1"
tabindex="-1" aria-modal="true"
aria-modal="true" aria-labelledby={titleId}
aria-labelledby={titleId} class:scroll-pb-40={isStickyBottom}
class:scroll-pb-40={isStickyBottom} class:sm:scroll-p-24={isStickyBottom}
class:sm:scroll-p-24={isStickyBottom} >
> <ModalHeader id={titleId} {title} {showLogo} {icon} {onClose} />
<ModalHeader id={titleId} {title} {showLogo} {icon} {onClose} /> <div class="p-5 pt-0">
<div class="p-5 pt-0"> <slot />
<slot />
</div>
{#if isStickyBottom}
<div
class="flex flex-col sm:flex-row justify-end w-full gap-2 sm:gap-4 sticky bottom-0 py-4 px-5 bg-immich-bg dark:bg-immich-dark-gray border-t border-gray-200 dark:border-gray-500 shadow"
>
<slot name="sticky-bottom" />
</div>
{/if}
</div> </div>
</FocusTrap> {#if isStickyBottom}
<div
class="flex flex-col sm:flex-row justify-end w-full gap-2 sm:gap-4 sticky bottom-0 py-4 px-5 bg-immich-bg dark:bg-immich-dark-gray border-t border-gray-200 dark:border-gray-500 shadow"
>
<slot name="sticky-bottom" />
</div>
{/if}
</div>
</section> </section>

99
web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte
View file

@ -1,8 +1,8 @@
<script lang="ts"> <script lang="ts">
import { focusTrap } from '$lib/actions/focus-trap';
import Button from '$lib/components/elements/buttons/button.svelte'; import Button from '$lib/components/elements/buttons/button.svelte';
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte'; import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
import Icon from '$lib/components/elements/icon.svelte'; import Icon from '$lib/components/elements/icon.svelte';
import FocusTrap from '$lib/components/shared-components/focus-trap.svelte';
import { AppRoute } from '$lib/constants'; import { AppRoute } from '$lib/constants';
import { preferences, user } from '$lib/stores/user.store'; import { preferences, user } from '$lib/stores/user.store';
import { handleError } from '$lib/utils/handle-error'; import { handleError } from '$lib/utils/handle-error';
@ -42,59 +42,58 @@
}; };
</script> </script>
<FocusTrap> <div
in:fade={{ duration: 100 }}
out:fade={{ duration: 100 }}
id="account-info-panel"
class="absolute right-[25px] top-[75px] z-[100] w-[360px] rounded-3xl bg-gray-200 shadow-lg dark:border dark:border-immich-dark-gray dark:bg-immich-dark-gray"
use:focusTrap
>
<div <div
in:fade={{ duration: 100 }} class="mx-4 mt-4 flex flex-col items-center justify-center gap-4 rounded-3xl bg-white p-4 dark:bg-immich-dark-primary/10"
out:fade={{ duration: 100 }}
id="account-info-panel"
class="absolute right-[25px] top-[75px] z-[100] w-[360px] rounded-3xl bg-gray-200 shadow-lg dark:border dark:border-immich-dark-gray dark:bg-immich-dark-gray"
> >
<div <div class="relative">
class="mx-4 mt-4 flex flex-col items-center justify-center gap-4 rounded-3xl bg-white p-4 dark:bg-immich-dark-primary/10" <UserAvatar user={$user} size="xl" />
> <div class="absolute z-10 bottom-0 right-0 rounded-full w-6 h-6">
<div class="relative"> <CircleIconButton
<UserAvatar user={$user} size="xl" /> color="primary"
<div class="absolute z-10 bottom-0 right-0 rounded-full w-6 h-6"> icon={mdiPencil}
<CircleIconButton title={$t('edit_avatar')}
color="primary" class="border"
icon={mdiPencil} size="12"
title={$t('edit_avatar')} padding="2"
class="border" on:click={() => (isShowSelectAvatar = true)}
size="12" />
padding="2" </div>
on:click={() => (isShowSelectAvatar = true)} </div>
/> <div>
<p class="text-center text-lg font-medium text-immich-primary dark:text-immich-dark-primary">
{$user.name}
</p>
<p class="text-sm text-gray-500 dark:text-immich-dark-fg">{$user.email}</p>
</div>
<a href={AppRoute.USER_SETTINGS} on:click={() => dispatch('close')}>
<Button color="dark-gray" size="sm" shadow={false} border>
<div class="flex place-content-center place-items-center gap-2 px-2">
<Icon path={mdiCog} size="18" />
{$t('account_settings')}
</div> </div>
</div> </Button>
<div> </a>
<p class="text-center text-lg font-medium text-immich-primary dark:text-immich-dark-primary">
{$user.name}
</p>
<p class="text-sm text-gray-500 dark:text-immich-dark-fg">{$user.email}</p>
</div>
<a href={AppRoute.USER_SETTINGS} on:click={() => dispatch('close')}>
<Button color="dark-gray" size="sm" shadow={false} border>
<div class="flex place-content-center place-items-center gap-2 px-2">
<Icon path={mdiCog} size="18" />
{$t('account_settings')}
</div>
</Button>
</a>
</div>
<div class="mb-4 flex flex-col">
<button
type="button"
class="flex w-full place-content-center place-items-center gap-2 py-3 font-medium text-gray-500 hover:bg-immich-primary/10 dark:text-gray-300"
on:click={() => dispatch('logout')}
>
<Icon path={mdiLogout} size={24} />
{$t('sign_out')}</button
>
</div>
</div> </div>
</FocusTrap>
<div class="mb-4 flex flex-col">
<button
type="button"
class="flex w-full place-content-center place-items-center gap-2 py-3 font-medium text-gray-500 hover:bg-immich-primary/10 dark:text-gray-300"
on:click={() => dispatch('logout')}
>
<Icon path={mdiLogout} size={24} />
{$t('sign_out')}</button
>
</div>
</div>
{#if isShowSelectAvatar} {#if isShowSelectAvatar}
<AvatarSelector <AvatarSelector