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

feat(web,a11y): form and search filter accessibility (#9087)

Browse source 
* feat(web,a11y): search filter accessibility

- visible focus rings
- labels for text search
- responsive buttons / radio buttons / checkboxes
- buttons to lowercase
- add fieldsets to radio buttons and checkboxes, so the screen reader
  announces the label for the group

* feat: extract inputs into reusable components, replace all checkboxes

* chore: revert changes to responsive buttons

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
This commit is contained in:
Ben 2024-04-26 06:18:19 +00:00 • committed by GitHub
parent 00d186ec52
commit 53d571d29e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 102 additions and 112 deletions
Download patch file Download diff file Expand all files Collapse all files

30
web/src/lib/components/shared-components/search-bar/search-display-section.svelte
View file

@ -7,26 +7,18 @@
</script>
<script lang="ts">
import Checkbox from '$lib/components/elements/checkbox.svelte';
export let filters: SearchDisplayFilters;
</script>
<div id="display-options-selection" class="text-sm">
<p class="immich-form-label">DISPLAY OPTIONS</p>
<div class="flex flex-wrap gap-x-5 gap-y-2 mt-1">
<label class="flex items-center gap-2">
<input type="checkbox" class="size-5 flex-shrink-0" bind:checked={filters.isNotInAlbum} />
<span class="pt-1">Not in any album</span>
</label>
<label class="flex items-center gap-2">
<input type="checkbox" class="size-5 flex-shrink-0" bind:checked={filters.isArchive} />
<span class="pt-1">Archive</span>
</label>
<label class="flex items-center gap-2">
<input type="checkbox" class="size-5 flex-shrink-0" bind:checked={filters.isFavorite} />
<span class="pt-1">Favorite</span>
</label>
</div>
<div id="display-options-selection">
<fieldset>
<legend class="immich-form-label">DISPLAY OPTIONS</legend>
<div class="flex flex-wrap gap-x-5 gap-y-2 mt-1">
<Checkbox id="not-in-album-checkbox" label="Not in any album" bind:checked={filters.isNotInAlbum} />
<Checkbox id="archive-checkbox" label="Archive" bind:checked={filters.isArchive} />
<Checkbox id="favorite-checkbox" label="Favorite" bind:checked={filters.isFavorite} />
</div>
</fieldset>
</div>