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>
2024-11-15 18:08:48 -07:00 · 2024-07-26 17:45:15 -04:00 · 2024-07-26 17:45:15 -04:00 · a78eeb9b9c
commit a78eeb9b9c
parent 86b3e3ee13
6 changed files with 237 additions and 89 deletions
--- a/web/src/lib/components/elements/buttons/circle-icon-button.svelte
+++ b/web/src/lib/components/elements/buttons/circle-icon-button.svelte
@ -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}
--- a/web/src/lib/components/shared-components/search-bar/search-bar.svelte
+++ b/web/src/lib/components/shared-components/search-bar/search-bar.svelte
@ -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}
--- a/web/src/lib/components/shared-components/search-bar/search-filter-box.svelte
+++ b/web/src/lib/components/shared-components/search-bar/search-filter-box.svelte
@ -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"
--- a/web/src/lib/components/shared-components/search-bar/search-history-box.svelte
+++ b/web/src/lib/components/shared-components/search-bar/search-history-box.svelte
@ -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>
--- a/web/src/lib/i18n/en.json
+++ b/web/src/lib/i18n/en.json
@ -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",
--- a/web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.svelte
@ -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>