helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-07 17:27:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(web): combobox accessibility improvements (#8007)

Browse source 
* 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>
This commit is contained in:
Ben Basten 2024-03-19 12:56:41 +00:00 • committed by GitHub
parent 033f83a55a
commit c6d2408517
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 214 additions and 79 deletions
Download patch file Download diff file Expand all files Collapse all files

24
web/src/lib/components/shared-components/search-bar/search-location-section.svelte
View file

@ -62,35 +62,35 @@
<div class="grid grid-cols-[repeat(auto-fit,minmax(10rem,1fr))] gap-5 mt-1">
<div class="w-full">
<label class="text-sm text-black dark:text-white" for="search-place-country">Country</label>
<Combobox
id="search-place-country"
options={toComboBoxOptions(countries)}
selectedOption={filters.country ? { label: filters.country, value: filters.country } : undefined}
id="location-country"
label="Country"
on:select={({ detail }) => (filters.country = detail?.value)}
options={toComboBoxOptions(countries)}
placeholder="Search country..."
selectedOption={filters.country ? { label: filters.country, value: filters.country } : undefined}
/>
</div>
<div class="w-full">
<label class="text-sm text-black dark:text-white" for="search-place-state">State</label>
<Combobox
id="search-place-state"
options={toComboBoxOptions(states)}
selectedOption={filters.state ? { label: filters.state, value: filters.state } : undefined}
id="location-state"
label="State"
on:select={({ detail }) => (filters.state = detail?.value)}
options={toComboBoxOptions(states)}
placeholder="Search state..."
selectedOption={filters.state ? { label: filters.state, value: filters.state } : undefined}
/>
</div>
<div class="w-full">
<label class="text-sm text-black dark:text-white" for="search-place-city">City</label>
<Combobox
id="search-place-city"
options={toComboBoxOptions(cities)}
selectedOption={filters.city ? { label: filters.city, value: filters.city } : undefined}
id="location-city"
label="City"
on:select={({ detail }) => (filters.city = detail?.value)}
options={toComboBoxOptions(cities)}
placeholder="Search city..."
selectedOption={filters.city ? { label: filters.city, value: filters.city } : undefined}
/>
</div>
</div>