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

fix: responsive: timeline glitch and keyboard-accessible scrubber (#17556)

Browse source 
* fix: responsive: timeline glitch

* lint

* fix margin-right on mobile

---------

Co-authored-by: Alex <alex.tran1502@gmail.com>
This commit is contained in:
Min Idzelis 2025-04-14 12:56:40 -04:00 • committed by GitHub
parent 664c99278a
commit 5a51ad3622
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 427 additions and 142 deletions
Download patch file Download diff file Expand all files Collapse all files

21
web/src/lib/components/assets/thumbnail/thumbnail.svelte
View file

@ -25,6 +25,7 @@
import ImageThumbnail from './image-thumbnail.svelte';
import VideoThumbnail from './video-thumbnail.svelte';
import { onMount } from 'svelte';
import { getFocusable } from '$lib/utils/focus-util';
interface Props {
asset: AssetResponseDto;
@ -222,10 +223,30 @@
if (evt.key === 'x') {
onSelect?.(asset);
}
if (document.activeElement === focussableElement && evt.key === 'Escape') {
const focusable = getFocusable(document);
const index = focusable.indexOf(focussableElement);
let i = index + 1;
while (i !== index) {
const next = focusable[i];
if (next.dataset.thumbnailFocusContainer !== undefined) {
if (i === focusable.length - 1) {
i = 0;
} else {
i++;
}
continue;
}
next.focus();
break;
}
}
}}
onclick={handleClick}
bind:this={focussableElement}
onfocus={handleFocus}
data-thumbnail-focus-container
data-testid="container-with-tabindex"
tabindex={0}
role="link"