public/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-11-27 00:59:58 +09:00
Code Issues Actions 8 Packages Projects Releases Wiki Activity

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
10 changed files with 102 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
web/src/lib/components/elements/radio-button.svelte Normal file
View File

@@ -0,0 +1,12 @@
<script lang="ts">
export let id: string;
export let label: string;
export let name: string;
export let value: string;
export let group: string | undefined = undefined;
</script>
<div class="flex items-center space-x-2">
<input type="radio" {name} {id} {value} class="focus-visible:ring" bind:group />
<label for={id}>{label}</label>
</div>