mirror of
https://github.com/immich-app/immich
synced 2025-11-07 17:27:20 +00:00
feat(web,a11y): slider accessibility improvements (#8479)
* 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
GitHub
parent
e1f8e96e28
commit
56d27bc1b4
21 changed files with 102 additions and 28 deletions
|
|
@ -232,6 +232,7 @@
|
|||
/>
|
||||
|
||||
<SettingSwitch
|
||||
id="two-pass-encoding"
|
||||
title="TWO-PASS ENCODING"
|
||||
{disabled}
|
||||
subtitle="Transcode in two passes to produce better encoded videos. When max bitrate is enabled (required for it to work with H.264 and HEVC), this mode uses a bitrate range based on the max bitrate and ignores CRF. For VP9, CRF can be used if max bitrate is disabled."
|
||||
|
|
@ -286,6 +287,7 @@
|
|||
/>
|
||||
|
||||
<SettingSwitch
|
||||
id="temporal-aq"
|
||||
title="TEMPORAL AQ"
|
||||
{disabled}
|
||||
subtitle="Applies only to NVENC. Increases quality of high-detail, low-motion scenes. May not be compatible with older devices."
|
||||
|
|
|
|||
|
|
@ -66,6 +66,7 @@
|
|||
/>
|
||||
|
||||
<SettingSwitch
|
||||
id="prefer-wide-gamut"
|
||||
title="PREFER WIDE GAMUT"
|
||||
subtitle="Use Display P3 for thumbnails. This better preserves the vibrance of images with wide colorspaces, but images may appear differently on old devices with an old browser version. sRGB images are kept as sRGB to avoid color shifts."
|
||||
checked={config.image.colorspace === Colorspace.P3}
|
||||
|
|
|
|||
|
|
@ -37,6 +37,7 @@
|
|||
<form autocomplete="off" on:submit|preventDefault>
|
||||
<div class="ml-4 mt-4 flex flex-col gap-4">
|
||||
<SettingSwitch
|
||||
id="watch-filesystem"
|
||||
title="Watch filesystem"
|
||||
{disabled}
|
||||
subtitle="Watch external libraries for file changes"
|
||||
|
|
@ -64,6 +65,7 @@
|
|||
<form autocomplete="off" on:submit|preventDefault>
|
||||
<div class="ml-4 mt-4 flex flex-col gap-4">
|
||||
<SettingSwitch
|
||||
id="periodic-library-scan"
|
||||
title="ENABLED"
|
||||
{disabled}
|
||||
subtitle="Enable periodic library scanning"
|
||||
|
|
|
|||
|
|
@ -20,7 +20,13 @@
|
|||
<div in:fade={{ duration: 500 }}>
|
||||
<form autocomplete="off" on:submit|preventDefault>
|
||||
<div class="ml-4 mt-4 flex flex-col gap-4">
|
||||
<SettingSwitch title="ENABLED" {disabled} subtitle="Logging" bind:checked={config.logging.enabled} />
|
||||
<SettingSwitch
|
||||
id="enable-logging"
|
||||
title="ENABLED"
|
||||
{disabled}
|
||||
subtitle="Logging"
|
||||
bind:checked={config.logging.enabled}
|
||||
/>
|
||||
<SettingSelect
|
||||
label="LEVEL"
|
||||
desc="When enabled, what log level to use."
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@
|
|||
<form autocomplete="off" on:submit|preventDefault class="mx-4 mt-4">
|
||||
<div class="flex flex-col gap-4">
|
||||
<SettingSwitch
|
||||
id="enable-machine-learning"
|
||||
title="ENABLED"
|
||||
subtitle="If disabled, all ML features will be disabled regardless of the below settings."
|
||||
{disabled}
|
||||
|
|
@ -51,6 +52,7 @@
|
|||
>
|
||||
<div class="ml-4 mt-4 flex flex-col gap-4">
|
||||
<SettingSwitch
|
||||
id="enable-clip"
|
||||
title="ENABLED"
|
||||
subtitle="If disabled, images will not be encoded for smart search."
|
||||
bind:checked={config.machineLearning.clip.enabled}
|
||||
|
|
@ -82,6 +84,7 @@
|
|||
>
|
||||
<div class="ml-4 mt-4 flex flex-col gap-4">
|
||||
<SettingSwitch
|
||||
id="enable-facial-recognition"
|
||||
title="ENABLED"
|
||||
subtitle="If disabled, images will not be encoded for facial recognition and will not populate the People section in the Explore page."
|
||||
bind:checked={config.machineLearning.facialRecognition.enabled}
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@
|
|||
<SettingAccordion key="map" title="Map Settings" subtitle="Manage map settings">
|
||||
<div class="ml-4 mt-4 flex flex-col gap-4">
|
||||
<SettingSwitch
|
||||
id="enable-map-features"
|
||||
title="ENABLED"
|
||||
{disabled}
|
||||
subtitle="Enable map features"
|
||||
|
|
@ -66,6 +67,7 @@
|
|||
</svelte:fragment>
|
||||
<div class="ml-4 mt-4 flex flex-col gap-4">
|
||||
<SettingSwitch
|
||||
id="enable-reverse-geocoding"
|
||||
title="ENABLED"
|
||||
{disabled}
|
||||
subtitle="Enable reverse geocoding"
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@
|
|||
<form autocomplete="off" on:submit|preventDefault>
|
||||
<div class="ml-4 mt-4">
|
||||
<SettingSwitch
|
||||
id="enable-new-version-check"
|
||||
title="ENABLED"
|
||||
subtitle="Enable periodic requests to GitHub to check for new releases"
|
||||
bind:checked={config.newVersionCheck.enabled}
|
||||
|
|
|
|||
|
|
@ -71,7 +71,13 @@
|
|||
>.
|
||||
</p>
|
||||
|
||||
<SettingSwitch {disabled} title="ENABLE" subtitle="Login with OAuth" bind:checked={config.oauth.enabled} />
|
||||
<SettingSwitch
|
||||
id="login-with-oauth"
|
||||
{disabled}
|
||||
title="ENABLE"
|
||||
subtitle="Login with OAuth"
|
||||
bind:checked={config.oauth.enabled}
|
||||
/>
|
||||
|
||||
{#if config.oauth.enabled}
|
||||
<hr />
|
||||
|
|
@ -160,6 +166,7 @@
|
|||
/>
|
||||
|
||||
<SettingSwitch
|
||||
id="auto-register-new-users"
|
||||
title="AUTO REGISTER"
|
||||
subtitle="Automatically register new users after signing in with OAuth"
|
||||
bind:checked={config.oauth.autoRegister}
|
||||
|
|
@ -167,6 +174,7 @@
|
|||
/>
|
||||
|
||||
<SettingSwitch
|
||||
id="auto-launch-oauth"
|
||||
title="AUTO LAUNCH"
|
||||
subtitle="Start the OAuth login flow automatically upon navigating to the login page"
|
||||
disabled={disabled || !config.oauth.enabled}
|
||||
|
|
@ -174,6 +182,7 @@
|
|||
/>
|
||||
|
||||
<SettingSwitch
|
||||
id="mobile-redirect-uri-override"
|
||||
title="MOBILE REDIRECT URI OVERRIDE"
|
||||
subtitle="Enable when 'app.immich:/' is an invalid redirect URI."
|
||||
disabled={disabled || !config.oauth.enabled}
|
||||
|
|
|
|||
|
|
@ -49,6 +49,7 @@
|
|||
<form autocomplete="off" on:submit|preventDefault>
|
||||
<div class="ml-4 mt-4 flex flex-col">
|
||||
<SettingSwitch
|
||||
id="enable-password-login"
|
||||
title="ENABLED"
|
||||
{disabled}
|
||||
subtitle="Login with email and password"
|
||||
|
|
|
|||
|
|
@ -107,6 +107,7 @@
|
|||
{#await getTemplateOptions() then}
|
||||
<div id="directory-path-builder" class="flex flex-col gap-4 {minified ? '' : 'ml-4 mt-4'}">
|
||||
<SettingSwitch
|
||||
id="storage-template-enabled"
|
||||
title="ENABLED"
|
||||
{disabled}
|
||||
subtitle="Enable storage template engine"
|
||||
|
|
@ -116,6 +117,7 @@
|
|||
|
||||
{#if !minified}
|
||||
<SettingSwitch
|
||||
id="hash-verification-enabled"
|
||||
title="HASH VERIFICATION ENABLED"
|
||||
{disabled}
|
||||
subtitle="Enables hash verification, don't disable this unless you're certain of the implications"
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@
|
|||
<form autocomplete="off" on:submit|preventDefault>
|
||||
<div class="ml-4 mt-4 flex flex-col gap-4">
|
||||
<SettingSwitch
|
||||
id="enable-trash-features"
|
||||
title="ENABLED"
|
||||
{disabled}
|
||||
subtitle="Enable Trash features"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue