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): 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
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
21 changed files with 102 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

18
web/src/lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte
View file

@ -199,25 +199,33 @@
</div>
<div class="my-3">
<SettingSwitch bind:checked={enablePassword} title={'Require password'} />
<SettingSwitch id="require-password" bind:checked={enablePassword} title={'Require password'} />
</div>
<div class="my-3">
<SettingSwitch bind:checked={showMetadata} title={'Show metadata'} />
<SettingSwitch id="show-metadata" bind:checked={showMetadata} title={'Show metadata'} />
</div>
<div class="my-3">
<SettingSwitch bind:checked={allowDownload} title={'Allow public user to download'} />
<SettingSwitch
id="allow-public-download"
bind:checked={allowDownload}
title={'Allow public user to download'}
/>
</div>
<div class="my-3">
<SettingSwitch bind:checked={allowUpload} title={'Allow public user to upload'} />
<SettingSwitch id="allow-public-upload" bind:checked={allowUpload} title={'Allow public user to upload'} />
</div>
<div class="text-sm">
{#if editingLink}
<p class="immich-form-label my-2">
<SettingSwitch bind:checked={shouldChangeExpirationTime} title={'Change expiration time'} />
<SettingSwitch
id="change-expiration-time"
bind:checked={shouldChangeExpirationTime}
title={'Change expiration time'}
/>
</p>
{:else}
<p class="immich-form-label my-2">Expire after</p>