self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-06-29 05:21:38 +02:00
Code Issues Releases 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

22
web/src/lib/components/shared-components/settings/setting-switch.svelte
View File

@ -4,20 +4,24 @@
import { createEventDispatcher } from 'svelte';
import Slider from '$lib/components/elements/slider.svelte';
export let id: string;
export let title: string;
export let subtitle = '';
export let checked = false;
export let disabled = false;
export let isEdited = false;
$: sliderId = `${id}-slider`;
$: subtitleId = subtitle ? `${id}-subtitle` : undefined;
const dispatch = createEventDispatcher<{ toggle: boolean }>();
const onToggle = (ischecked: boolean) => dispatch('toggle', ischecked);
const onToggle = (isChecked: boolean) => dispatch('toggle', isChecked);
</script>
<div class="flex place-items-center justify-between">
<div>
<div class="mr-2">
<div class="flex h-[26px] place-items-center gap-1">
<label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for={title}>
<label class="font-medium text-immich-primary dark:text-immich-dark-primary text-sm" for={sliderId}>
{title}
</label>
{#if isEdited}
@ -30,9 +34,17 @@
{/if}
</div>
<p class="text-sm dark:text-immich-dark-fg">{subtitle}</p>
{#if subtitle}
<p id={subtitleId} class="text-sm dark:text-immich-dark-fg">{subtitle}</p>
{/if}
<slot />
</div>
<Slider bind:checked {disabled} on:toggle={({ detail }) => onToggle(detail)} />
<Slider
id={sliderId}
bind:checked
{disabled}
on:toggle={({ detail }) => onToggle(detail)}
ariaDescribedBy={subtitleId}
/>
</div>