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

feat(web,a11y): slider accessibility improvements (#8479)

Browse Source 
* feat(web,a11y): slider accessibility improvements

* add perceivable focus outline
* label all sliders for screen readers

* chore: add IDs to all settings sliders

* chore: add comment to id prop

* fix: switch to using CSS to add outlines

* fix: reactive sliderId

* fix: bring back the slot

* fix: add aria-describedby for the subtitle

* fix: cleanup css because disabled slider cannot be focused

* fix: add border to the slider when focus is visible

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
This commit is contained in:
Ben
2024-04-06 14:18:49 +00:00
committed by GitHub
parent e1f8e96e28
commit 56d27bc1b4
21 changed files with 102 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/src/lib/components/forms/create-user-form.svelte
View File

@@ -94,10 +94,10 @@
</div>
<div class="m-4 flex place-items-center justify-between gap-2">
<label class="text-sm dark:text-immich-dark-fg" for="Require user to change password on first login">
<label class="text-sm dark:text-immich-dark-fg" for="require-password-change">
Require user to change password on first login
</label>
<Slider bind:checked={shouldChangePassword} />
<Slider id="require-password-change" bind:checked={shouldChangePassword} />
</div>
<div class="m-4 flex flex-col gap-2">