feat(web): search bar keyboard accessibility (#11323)
* feat(web): search bar keyboard accessibility * fix: adjust aria attributes * fix: safari announcing the correct option count * minor adjustments - CircleIconButton disabled cursor - more generic selection handler * fix: more subtle border color in dark mode --------- Co-authored-by: Alex <alex.tran1502@gmail.com>
This commit is contained in:
Ben
@@ -2,51 +2,130 @@
|
||||
import Icon from '$lib/components/elements/icon.svelte';
|
||||
import { savedSearchTerms } from '$lib/stores/search.store';
|
||||
import { mdiMagnify, mdiClose } from '@mdi/js';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import { fly } from 'svelte/transition';
|
||||
import { t } from 'svelte-i18n';
|
||||
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
|
||||
|
||||
const dispatch = createEventDispatcher<{
|
||||
selectSearchTerm: string;
|
||||
clearSearchTerm: string;
|
||||
clearAllSearchTerms: void;
|
||||
}>();
|
||||
export let id: string;
|
||||
export let searchQuery: string = '';
|
||||
export let isSearchSuggestions: boolean = false;
|
||||
export let isOpen: boolean = false;
|
||||
export let onSelectSearchTerm: (searchTerm: string) => void;
|
||||
export let onClearSearchTerm: (searchTerm: string) => void;
|
||||
export let onClearAllSearchTerms: () => void;
|
||||
export let onActiveSelectionChange: (selectedId: string | undefined) => void;
|
||||
|
||||
$: filteredSearchTerms = $savedSearchTerms.filter((term) => term.toLowerCase().includes(searchQuery.toLowerCase()));
|
||||
$: isSearchSuggestions = filteredSearchTerms.length > 0;
|
||||
$: showClearAll = searchQuery === '';
|
||||
$: suggestionCount = showClearAll ? filteredSearchTerms.length + 1 : filteredSearchTerms.length;
|
||||
|
||||
let selectedIndex: number | undefined = undefined;
|
||||
let element: HTMLDivElement;
|
||||
|
||||
export function moveSelection(increment: 1 | -1) {
|
||||
if (!isSearchSuggestions) {
|
||||
return;
|
||||
} else if (selectedIndex === undefined) {
|
||||
selectedIndex = increment === 1 ? 0 : suggestionCount - 1;
|
||||
} else if (selectedIndex + increment < 0 || selectedIndex + increment >= suggestionCount) {
|
||||
clearSelection();
|
||||
} else {
|
||||
selectedIndex = (selectedIndex + increment + suggestionCount) % suggestionCount;
|
||||
}
|
||||
onActiveSelectionChange(getId(selectedIndex));
|
||||
}
|
||||
|
||||
export function clearSelection() {
|
||||
selectedIndex = undefined;
|
||||
onActiveSelectionChange(undefined);
|
||||
}
|
||||
|
||||
export function selectActiveOption() {
|
||||
if (selectedIndex === undefined) {
|
||||
return;
|
||||
}
|
||||
const selectedElement = element.querySelector(`#${getId(selectedIndex)}`) as HTMLElement;
|
||||
selectedElement?.click();
|
||||
}
|
||||
|
||||
const handleClearAll = () => {
|
||||
clearSelection();
|
||||
onClearAllSearchTerms();
|
||||
};
|
||||
|
||||
const handleClearSingle = (searchTerm: string) => {
|
||||
clearSelection();
|
||||
onClearSearchTerm(searchTerm);
|
||||
};
|
||||
|
||||
const handleSelect = (searchTerm: string) => {
|
||||
clearSelection();
|
||||
onSelectSearchTerm(searchTerm);
|
||||
};
|
||||
|
||||
const getId = (index: number | undefined) => {
|
||||
if (index === undefined) {
|
||||
return undefined;
|
||||
}
|
||||
return `${id}-${index}`;
|
||||
};
|
||||
</script>
|
||||
|
||||
<div
|
||||
transition:fly={{ y: 25, duration: 250 }}
|
||||
class="absolute w-full rounded-b-3xl border border-gray-200 bg-white pb-5 shadow-2xl transition-all dark:border-gray-800 dark:bg-immich-dark-gray dark:text-gray-300"
|
||||
>
|
||||
{#if $savedSearchTerms.length > 0}
|
||||
<div class="flex items-center justify-between px-5 pt-5 text-xs">
|
||||
<p>{$t('recent_searches').toUpperCase()}</p>
|
||||
<button
|
||||
type="button"
|
||||
class="rounded-lg p-2 font-semibold text-immich-primary hover:bg-immich-primary/25 dark:text-immich-dark-primary"
|
||||
on:click={() => dispatch('clearAllSearchTerms')}>{$t('clear_all')}</button
|
||||
>
|
||||
<div role="listbox" {id} aria-label={$t('recent_searches')} bind:this={element}>
|
||||
{#if isOpen && isSearchSuggestions}
|
||||
<div
|
||||
transition:fly={{ y: 25, duration: 150 }}
|
||||
class="absolute w-full rounded-b-3xl border-2 border-t-0 border-gray-200 bg-white pb-5 shadow-2xl transition-all dark:border-gray-700 dark:bg-immich-dark-gray dark:text-gray-300"
|
||||
>
|
||||
<div class="flex items-center justify-between px-5 pt-5 text-xs">
|
||||
<p class="py-2" aria-hidden={true}>{$t('recent_searches').toUpperCase()}</p>
|
||||
{#if showClearAll}
|
||||
<button
|
||||
id={getId(0)}
|
||||
type="button"
|
||||
class="rounded-lg p-2 font-semibold text-immich-primary aria-selected:bg-immich-primary/25 hover:bg-immich-primary/25 dark:text-immich-dark-primary"
|
||||
role="option"
|
||||
on:click={() => handleClearAll()}
|
||||
tabindex="-1"
|
||||
aria-selected={selectedIndex === 0}
|
||||
aria-label={$t('clear_all_recent_searches')}
|
||||
>
|
||||
{$t('clear_all')}
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#each filteredSearchTerms as savedSearchTerm, i (i)}
|
||||
{@const index = showClearAll ? i + 1 : i}
|
||||
<div class="flex w-full items-center justify-between text-sm text-black dark:text-gray-300">
|
||||
<div class="relative w-full items-center">
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<div
|
||||
id={getId(index)}
|
||||
class="relative flex w-full cursor-pointer gap-3 py-3 pl-5 hover:bg-gray-100 aria-selected:bg-gray-100 dark:aria-selected:bg-gray-500/30 dark:hover:bg-gray-500/30"
|
||||
on:click={() => handleSelect(savedSearchTerm)}
|
||||
role="option"
|
||||
tabindex="-1"
|
||||
aria-selected={selectedIndex === index}
|
||||
aria-label={savedSearchTerm}
|
||||
>
|
||||
<Icon path={mdiMagnify} size="1.5em" ariaHidden={true} />
|
||||
{savedSearchTerm}
|
||||
</div>
|
||||
<div aria-hidden={true} class="absolute right-5 top-0 items-center justify-center py-3">
|
||||
<CircleIconButton
|
||||
icon={mdiClose}
|
||||
title={$t('remove')}
|
||||
size="18"
|
||||
padding="1"
|
||||
tabindex={-1}
|
||||
on:click={() => handleClearSingle(savedSearchTerm)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#each $savedSearchTerms as savedSearchTerm, i (i)}
|
||||
<div
|
||||
class="flex w-full items-center justify-between text-sm text-black hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-500/10"
|
||||
>
|
||||
<div class="relative w-full items-center">
|
||||
<button
|
||||
type="button"
|
||||
class="relative flex w-full cursor-pointer gap-3 py-3 pl-5"
|
||||
on:click={() => dispatch('selectSearchTerm', savedSearchTerm)}
|
||||
>
|
||||
<Icon path={mdiMagnify} size="1.5em" />
|
||||
{savedSearchTerm}
|
||||
</button>
|
||||
<div class="absolute right-5 top-0 items-center justify-center py-3">
|
||||
<button type="button" on:click={() => dispatch('clearSearchTerm', savedSearchTerm)}
|
||||
><Icon path={mdiClose} size="18" /></button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user