1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2024-12-28 22:51:59 +00:00

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 2024-07-26 17:45:15 -04:00 committed by GitHub
parent 86b3e3ee13
commit a78eeb9b9c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 237 additions and 89 deletions

View file

@ -27,6 +27,8 @@
export let ariaHasPopup: boolean | undefined = undefined;
export let ariaExpanded: boolean | undefined = undefined;
export let ariaControls: string | undefined = undefined;
export let tabindex: number | undefined = undefined;
export let disabled: boolean | undefined = undefined;
/**
* Override the default styling of the button for specific use cases, such as the icon color.
@ -53,9 +55,11 @@
{id}
{title}
{type}
{tabindex}
{disabled}
style:width={buttonSize ? buttonSize + 'px' : ''}
style:height={buttonSize ? buttonSize + 'px' : ''}
class="flex place-content-center place-items-center rounded-full {colorClass} {paddingClass} transition-all hover:dark:text-immich-dark-gray {className} {mobileClass}"
class="flex place-content-center place-items-center rounded-full {colorClass} {paddingClass} transition-all disabled:cursor-default hover:dark:text-immich-dark-gray {className} {mobileClass}"
aria-haspopup={ariaHasPopup}
aria-expanded={ariaExpanded}
aria-controls={ariaControls}

View file

@ -13,21 +13,31 @@
import { focusOutside } from '$lib/actions/focus-outside';
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
import { t } from 'svelte-i18n';
import { generateId } from '$lib/utils/generate-id';
import { tick } from 'svelte';
export let value = '';
export let grayTheme: boolean;
export let searchQuery: MetadataSearchDto | SmartSearchDto = {};
$: showClearIcon = value.length > 0;
let input: HTMLInputElement;
let showHistory = false;
let showSuggestions = false;
let showFilter = false;
$: showClearIcon = value.length > 0;
let isSearchSuggestions = false;
let selectedId: string | undefined;
let moveSelection: (direction: 1 | -1) => void;
let clearSelection: () => void;
let selectActiveOption: () => void;
const listboxId = generateId();
const onSearch = async (payload: SmartSearchDto | MetadataSearchDto) => {
const params = getMetadataSearchQuery(payload);
showHistory = false;
closeDropdown();
showFilter = false;
$isSearchEnabled = false;
await goto(`${AppRoute.SEARCH}?${params}`);
@ -39,7 +49,8 @@
};
const saveSearchTerm = (saveValue: string) => {
$savedSearchTerms = [saveValue, ...$savedSearchTerms];
const filteredSearchTerms = $savedSearchTerms.filter((item) => item.toLowerCase() !== saveValue.toLowerCase());
$savedSearchTerms = [saveValue, ...filteredSearchTerms];
if ($savedSearchTerms.length > 5) {
$savedSearchTerms = $savedSearchTerms.slice(0, 5);
@ -52,7 +63,6 @@
};
const onFocusIn = () => {
showHistory = true;
$isSearchEnabled = true;
};
@ -61,12 +71,13 @@
$preventRaceConditionSearchBar = true;
}
showHistory = false;
closeDropdown();
$isSearchEnabled = false;
showFilter = false;
};
const onHistoryTermClick = async (searchTerm: string) => {
value = searchTerm;
const searchPayload = { query: searchTerm };
await onSearch(searchPayload);
};
@ -76,7 +87,7 @@
value = '';
if (showFilter) {
showHistory = false;
closeDropdown();
}
};
@ -84,12 +95,49 @@
handlePromiseError(onSearch({ query: value }));
saveSearchTerm(value);
};
const onClear = () => {
value = '';
input.focus();
};
const onEscape = () => {
closeDropdown();
showFilter = false;
};
const onArrow = async (direction: 1 | -1) => {
openDropdown();
await tick();
moveSelection(direction);
};
const onEnter = (event: KeyboardEvent) => {
if (selectedId) {
event.preventDefault();
selectActiveOption();
}
};
const onInput = () => {
openDropdown();
clearSelection();
};
const openDropdown = () => {
showSuggestions = true;
};
const closeDropdown = () => {
showSuggestions = false;
clearSelection();
};
</script>
<svelte:window
use:shortcuts={[
{ shortcut: { key: 'Escape' }, onShortcut: onFocusOut },
{ shortcut: { ctrl: true, key: 'k' }, onShortcut: () => input.focus() },
{ shortcut: { key: 'Escape' }, onShortcut: onEscape },
{ shortcut: { ctrl: true, key: 'k' }, onShortcut: () => input.select() },
{ shortcut: { ctrl: true, shift: true, key: 'k' }, onShortcut: onFilterClick },
]}
/>
@ -102,53 +150,69 @@
action={AppRoute.SEARCH}
on:reset={() => (value = '')}
on:submit|preventDefault={onSubmit}
on:focusin={onFocusIn}
role="search"
>
<div class="absolute inset-y-0 left-0 flex items-center pl-2">
<CircleIconButton type="submit" title={$t('search')} icon={mdiMagnify} size="20" />
<div use:focusOutside={{ onFocusOut: closeDropdown }}>
<label for="main-search-bar" class="sr-only">{$t('search_your_photos')}</label>
<input
type="text"
name="q"
id="main-search-bar"
class="w-full transition-all border-2 px-14 py-4 text-immich-fg/75 dark:text-immich-dark-fg
{grayTheme ? 'dark:bg-immich-dark-gray' : 'dark:bg-immich-dark-bg'}
{(showSuggestions && isSearchSuggestions) || showFilter ? 'rounded-t-3xl' : 'rounded-3xl bg-gray-200'}
{$isSearchEnabled ? 'border-gray-200 dark:border-gray-700 bg-white' : 'border-transparent'}"
placeholder={$t('search_your_photos')}
required
pattern="^(?!m:$).*$"
bind:value
bind:this={input}
on:focus={openDropdown}
on:input={onInput}
disabled={showFilter}
role="combobox"
aria-controls={listboxId}
aria-activedescendant={selectedId ?? ''}
aria-expanded={showSuggestions && isSearchSuggestions}
aria-autocomplete="list"
use:shortcuts={[
{ shortcut: { key: 'Escape' }, onShortcut: onEscape },
{ shortcut: { ctrl: true, shift: true, key: 'k' }, onShortcut: onFilterClick },
{ shortcut: { key: 'ArrowUp' }, onShortcut: () => onArrow(-1) },
{ shortcut: { key: 'ArrowDown' }, onShortcut: () => onArrow(1) },
{ shortcut: { key: 'Enter' }, onShortcut: onEnter, preventDefault: false },
{ shortcut: { key: 'ArrowDown', alt: true }, onShortcut: openDropdown },
]}
/>
<!-- SEARCH HISTORY BOX -->
<SearchHistoryBox
id={listboxId}
searchQuery={value}
isOpen={showSuggestions}
bind:isSearchSuggestions
bind:moveSelection
bind:clearSelection
bind:selectActiveOption
onClearAllSearchTerms={clearAllSearchTerms}
onClearSearchTerm={(searchTerm) => clearSearchTerm(searchTerm)}
onSelectSearchTerm={(searchTerm) => handlePromiseError(onHistoryTermClick(searchTerm))}
onActiveSelectionChange={(id) => (selectedId = id)}
/>
</div>
<label for="main-search-bar" class="sr-only">{$t('search_your_photos')}</label>
<input
type="text"
name="q"
id="main-search-bar"
class="w-full {grayTheme
? 'dark:bg-immich-dark-gray'
: 'dark:bg-immich-dark-bg'} px-14 py-4 text-immich-fg/75 dark:text-immich-dark-fg {(showHistory &&
$savedSearchTerms.length > 0) ||
showFilter
? 'rounded-t-3xl border border-gray-200 bg-white dark:border-gray-800'
: 'rounded-3xl border border-transparent bg-gray-200'}"
placeholder={$t('search_your_photos')}
required
pattern="^(?!m:$).*$"
bind:value
bind:this={input}
on:click={onFocusIn}
on:focus={onFocusIn}
disabled={showFilter}
use:shortcuts={[
{ shortcut: { key: 'Escape' }, onShortcut: onFocusOut },
{ shortcut: { ctrl: true, shift: true, key: 'k' }, onShortcut: onFilterClick },
]}
/>
<div class="absolute inset-y-0 {showClearIcon ? 'right-14' : 'right-2'} flex items-center pl-6 transition-all">
<CircleIconButton title={$t('show_search_options')} icon={mdiTune} on:click={onFilterClick} size="20" />
</div>
{#if showClearIcon}
<div class="absolute inset-y-0 right-0 flex items-center pr-2">
<CircleIconButton type="reset" icon={mdiClose} title={$t('clear')} size="20" />
<CircleIconButton on:click={onClear} icon={mdiClose} title={$t('clear')} size="20" />
</div>
{/if}
<!-- SEARCH HISTORY BOX -->
{#if showHistory && $savedSearchTerms.length > 0}
<SearchHistoryBox
on:clearAllSearchTerms={clearAllSearchTerms}
on:clearSearchTerm={({ detail: searchTerm }) => clearSearchTerm(searchTerm)}
on:selectSearchTerm={({ detail: searchTerm }) => handlePromiseError(onHistoryTermClick(searchTerm))}
/>
{/if}
<div class="absolute inset-y-0 left-0 flex items-center pl-2">
<CircleIconButton type="submit" disabled={showFilter} title={$t('search')} icon={mdiMagnify} size="20" />
</div>
</form>
{#if showFilter}

View file

@ -117,7 +117,7 @@
<div
bind:clientWidth={filterBoxWidth}
transition:fly={{ y: 25, duration: 250 }}
class="absolute w-full rounded-b-3xl border border-t-0 border-gray-200 bg-white shadow-2xl dark:border-gray-800 dark:bg-immich-dark-gray dark:text-gray-300"
class="absolute w-full rounded-b-3xl border-2 border-t-0 border-gray-200 bg-white shadow-2xl dark:border-gray-700 dark:bg-immich-dark-gray dark:text-gray-300"
>
<form
id="search-filter-form"

View file

@ -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>

View file

@ -429,6 +429,7 @@
"city": "City",
"clear": "Clear",
"clear_all": "Clear all",
"clear_all_recent_searches": "Clear all recent searches",
"clear_message": "Clear message",
"clear_value": "Clear value",
"close": "Close",

View file

@ -230,7 +230,7 @@
<div class="fixed z-[100] top-0 left-0 w-full">
<ControlAppBar on:close={() => goto(previousRoute)} backIcon={mdiArrowLeft}>
<div class="w-full flex-1 pl-4">
<SearchBar grayTheme={false} searchQuery={terms} />
<SearchBar grayTheme={false} value={terms.query ?? ''} searchQuery={terms} />
</div>
</ControlAppBar>
</div>