sjs/immich
1
0
Fork 0
mirror of https://github.com/samsonjs/immich.git synced 2026-04-27 15:07:45 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(web): search bar accessibility (#23550)

Browse source 
* fix: always show search type when search bar is focused

* fix: indicate search type to screen reader users
This commit is contained in:
Ben 2025-11-03 08:31:57 -05:00 committed by GitHub
parent 79d0e3e1ed
commit 619de2a5e4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 6 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
web/src/lib/components/shared-components/search-bar/search-bar.svelte
View file

@ -30,10 +30,10 @@
let showSuggestions = $state(false); let showSuggestions = $state(false);
let isSearchSuggestions = $state(false); let isSearchSuggestions = $state(false);
let selectedId: string | undefined = $state(); let selectedId: string | undefined = $state();
let isFocus = $state(false);
let close: (() => Promise<void>) | undefined; let close: (() => Promise<void>) | undefined;
const listboxId = generateId(); const listboxId = generateId();
const searchTypeId = generateId();
onDestroy(() => { onDestroy(() => {
searchStore.isSearchEnabled = false; searchStore.isSearchEnabled = false;
@ -161,12 +161,10 @@
const openDropdown = () => { const openDropdown = () => {
showSuggestions = true; showSuggestions = true;
isFocus = true;
}; };
const closeDropdown = () => { const closeDropdown = () => {
showSuggestions = false; showSuggestions = false;
isFocus = false;
searchHistoryBox?.clearSelection(); searchHistoryBox?.clearSelection();
}; };
@ -251,6 +249,7 @@
aria-activedescendant={selectedId ?? ''} aria-activedescendant={selectedId ?? ''}
aria-expanded={showSuggestions && isSearchSuggestions} aria-expanded={showSuggestions && isSearchSuggestions}
aria-autocomplete="list" aria-autocomplete="list"
aria-describedby={searchTypeId}
use:shortcuts={[ use:shortcuts={[
{ shortcut: { key: 'Escape' }, onShortcut: onEscape }, { shortcut: { key: 'Escape' }, onShortcut: onEscape },
{ shortcut: { ctrl: true, shift: true, key: 'k' }, onShortcut: onFilterClick }, { shortcut: { ctrl: true, shift: true, key: 'k' }, onShortcut: onFilterClick },
@ -287,12 +286,12 @@
/> />
</div> </div>
{#if isFocus} {#if searchStore.isSearchEnabled}
<div <div
class="absolute inset-y-0 flex items-center" id={searchTypeId}
class="absolute inset-y-0 flex items-center end-16"
class:max-md:hidden={value} class:max-md:hidden={value}
class:end-16={isFocus} class:end-28={value.length > 0}
class:end-28={isFocus && value.length > 0}
> >
<p <p
class="bg-immich-primary text-white dark:bg-immich-dark-primary/90 dark:text-black/75 rounded-full px-3 py-1 text-xs" class="bg-immich-primary text-white dark:bg-immich-dark-primary/90 dark:text-black/75 rounded-full px-3 py-1 text-xs"