mirror of
https://github.com/immich-app/immich.git
synced 2025-05-31 04:05:39 -04:00
c6d2408517
* bump skip link z index, to prevent overlap with the search box * combobox refactor initial commit * pull label into the combobox component * feat(web): combobox accessibility improvements * fix: replace crypto.randomUUID, fix border UI bug, simpler focus handling (#2) * fix: handle changes in the selected option * fix: better escape key handling in search bar * fix: remove broken tailwind classes Co-authored-by: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com> * fix: remove custom "outclick" handler logic * fix: use focusout instead of custom key handlers to detect focus change * fix: move escape key handling to the window Also add escape key handling to the input box, to make sure that the "recent searches" dropdown gets closed too. * fix: better input event handling Co-authored-by: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com> * fix: highlighting selected dropdown element --------- Co-authored-by: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>
28 lines
625 B
Svelte
28 lines
625 B
Svelte
<script lang="ts">
|
|
import Button from './button.svelte';
|
|
|
|
/**
|
|
* Target for the skip link to move focus to.
|
|
*/
|
|
export let target: string = 'main';
|
|
|
|
let isFocused = false;
|
|
|
|
const moveFocus = () => {
|
|
const targetEl = document.querySelector<HTMLElement>(target);
|
|
targetEl?.focus();
|
|
};
|
|
</script>
|
|
|
|
<div class="absolute z-50 top-2 left-2 transition-transform {isFocused ? 'translate-y-0' : '-translate-y-10 sr-only'}">
|
|
<Button
|
|
size={'sm'}
|
|
rounded={false}
|
|
on:click={moveFocus}
|
|
on:focus={() => (isFocused = true)}
|
|
on:blur={() => (isFocused = false)}
|
|
>
|
|
<slot />
|
|
</Button>
|
|
</div>
|