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,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

48
web/src/lib/components/shared-components/search-bar/search-media-section.svelte
View file

@ -1,47 +1,17 @@
<script lang="ts">
import RadioButton from '$lib/components/elements/radio-button.svelte';
import { MediaType } from './search-filter-box.svelte';
export let filteredMedia: MediaType;
</script>
<div id="media-type-selection">
<p class="immich-form-label">MEDIA TYPE</p>
<div class="flex gap-5 mt-1 text-base">
<label for="type-all" class="flex items-center gap-1">
<input
bind:group={filteredMedia}
value={MediaType.All}
type="radio"
name="radio-type"
id="type-all"
class="size-4"
/>
<span class="pt-0.5">All</span>
</label>
<label for="type-image" class="flex items-center gap-1">
<input
bind:group={filteredMedia}
value={MediaType.Image}
type="radio"
name="media-type"
id="type-image"
class="size-4"
/>
<span class="pt-0.5">Image</span>
</label>
<label for="type-video" class="flex items-center gap-1">
<input
bind:group={filteredMedia}
value={MediaType.Video}
type="radio"
name="radio-type"
id="type-video"
class="size-4"
/>
<span class="pt-0.5">Video</span>
</label>
</div>
<fieldset>
<legend class="immich-form-label">MEDIA TYPE</legend>
<div class="flex flex-wrap gap-x-5 gap-y-2 mt-1">
<RadioButton name="media-type" id="type-all" bind:group={filteredMedia} label="All" value={MediaType.All} />
<RadioButton name="media-type" id="type-image" bind:group={filteredMedia} label="Image" value={MediaType.Image} />
<RadioButton name="media-type" id="type-video" bind:group={filteredMedia} label="Video" value={MediaType.Video} />
</div>
</fieldset>
</div>