mirror of
https://github.com/immich-app/immich.git
synced 2025-06-18 04:57:51 -04:00
53d571d29e
* 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>
25 lines
803 B
Svelte
25 lines
803 B
Svelte
<script lang="ts" context="module">
|
|
export interface SearchDisplayFilters {
|
|
isNotInAlbum?: boolean;
|
|
isArchive?: boolean;
|
|
isFavorite?: boolean;
|
|
}
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
import Checkbox from '$lib/components/elements/checkbox.svelte';
|
|
|
|
export let filters: SearchDisplayFilters;
|
|
</script>
|
|
|
|
<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>
|