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>

web/src/lib/components/admin-page/settings/ffmpeg/ffmpeg-settings.svelte

@@ -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."

web/src/lib/components/admin-page/settings/image/image-settings.svelte

@@ -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}

web/src/lib/components/admin-page/settings/library-settings/library-settings.svelte

@@ -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"

web/src/lib/components/admin-page/settings/logging-settings/logging-settings.svelte

@@ -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."

web/src/lib/components/admin-page/settings/machine-learning-settings/machine-learning-settings.svelte

@@ -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}

web/src/lib/components/admin-page/settings/map-settings/map-settings.svelte

@@ -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"

web/src/lib/components/admin-page/settings/new-version-check-settings/new-version-check-settings.svelte

@@ -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}

web/src/lib/components/admin-page/settings/oauth/oauth-settings.svelte

@@ -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}

web/src/lib/components/admin-page/settings/password-login/password-login-settings.svelte

@@ -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"

web/src/lib/components/admin-page/settings/storage-template/storage-template-settings.svelte

@@ -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"

web/src/lib/components/admin-page/settings/trash-settings/trash-settings.svelte

@@ -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"

web/src/lib/components/album-page/album-options.svelte

@@ -78,6 +78,7 @@
                 />
               {/if}
               <SettingSwitch
+                id="comments-likes"
                 title="Comments & likes"
                 subtitle="Let others respond"
                 checked={album.isActivityEnabled}

web/src/lib/components/elements/slider.svelte

@@ -1,6 +1,14 @@
 <script lang="ts">
   import { createEventDispatcher } from 'svelte';
 
+  /**
+   * Unique identifier for the checkbox element, used to associate labels with the input element.
+   */
+  export let id: string;
+  /**
+   * Optional aria-describedby attribute to associate the checkbox with a description.
+   */
+  export let ariaDescribedBy: string | undefined = undefined;
   export let checked = false;
   export let disabled = false;
 
@@ -10,17 +18,23 @@
 
 <label class="relative inline-block h-[10px] w-[36px] flex-none">
   <input
-    class="disabled::cursor-not-allowed h-0 w-0 opacity-0"
+    {id}
+    class="disabled::cursor-not-allowed h-0 w-0 opacity-0 peer"
     type="checkbox"
     bind:checked
     on:click={onToggle}
     {disabled}
+    aria-describedby={ariaDescribedBy}
   />
 
   {#if disabled}
-    <span class="slider slider-disabled cursor-not-allowed" />
+    <span
+      class="slider slider-disabled cursor-not-allowed border border-transparent before:border before:border-transparent"
+    />
   {:else}
-    <span class="slider slider-enabled cursor-pointer" />
+    <span
+      class="slider slider-enabled cursor-pointer border-2 border-transparent before:border-2 before:border-transparent peer-focus-visible:outline before:peer-focus-visible:outline peer-focus-visible:dark:outline-gray-200 before:peer-focus-visible:dark:outline-gray-200 peer-focus-visible:outline-gray-600 before:peer-focus-visible:outline-gray-600 peer-focus-visible:dark:border-black before:peer-focus-visible:dark:border-black peer-focus-visible:border-white before:peer-focus-visible:border-white"
+    />
   {/if}
 </label>
 
@@ -32,8 +46,8 @@
     right: 0;
     bottom: 0;
     background-color: #ccc;
-    -webkit-transition: 0.4s;
+    -webkit-transition: transform 0.4s;
-    transition: 0.4s;
+    transition: transform 0.4s;
     border-radius: 34px;
   }
 
@@ -46,12 +60,12 @@
     content: '';
     height: 20px;
     width: 20px;
-    left: 0px;
+    left: -2px;
     right: 0px;
-    bottom: -4px;
+    bottom: -6px;
     background-color: gray;
-    -webkit-transition: 0.4s;
+    -webkit-transition: transform 0.4s;
-    transition: 0.4s;
+    transition: transform 0.4s;
     border-radius: 50%;
   }
 

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

@@ -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">

web/src/lib/components/map-page/map-settings-modal.svelte

@@ -31,10 +31,10 @@
       on:submit|preventDefault={() => dispatch('save', settings)}
       class="flex flex-col gap-4 text-immich-primary dark:text-immich-dark-primary"
     >
-      <SettingSwitch title="Allow dark mode" bind:checked={settings.allowDarkMode} />
+      <SettingSwitch id="allow-dark-mode" title="Allow dark mode" bind:checked={settings.allowDarkMode} />
-      <SettingSwitch title="Only favorites" bind:checked={settings.onlyFavorites} />
+      <SettingSwitch id="only-favorites" title="Only favorites" bind:checked={settings.onlyFavorites} />
-      <SettingSwitch title="Include archived" bind:checked={settings.includeArchived} />
+      <SettingSwitch id="include-archived" title="Include archived" bind:checked={settings.includeArchived} />
-      <SettingSwitch title="Include shared with me" bind:checked={settings.withPartners} />
+      <SettingSwitch id="include-shared-with-me" title="Include shared with me" bind:checked={settings.withPartners} />
       {#if customDateRange}
         <div in:fly={{ y: 10, duration: 200 }} class="flex flex-col gap-4">
           <div class="flex items-center justify-between gap-8">

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

@@ -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>

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

@@ -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>

web/src/lib/components/slideshow-settings.svelte

@@ -45,7 +45,7 @@
         selectedOption={options[$slideshowNavigation]}
         onToggle={(option) => handleToggle(option)}
       />
-      <SettingSwitch title="Show Progress Bar" bind:checked={$showProgressBar} />
+      <SettingSwitch id="show-progress-bar" title="Show Progress Bar" bind:checked={$showProgressBar} />
       <SettingInputField
         inputType={SettingInputFieldType.NUMBER}
         label="Duration"

web/src/lib/components/user-settings-page/app-settings.svelte

@@ -66,6 +66,7 @@
     <div class="ml-4 mt-4 flex flex-col gap-4">
       <div class="ml-4">
         <SettingSwitch
+          id="theme-selection"
           title="Theme selection"
           subtitle="Automatically set the theme to light or dark based on your browser's system preference"
           bind:checked={$colorTheme.system}
@@ -75,6 +76,7 @@
 
       <div class="ml-4">
         <SettingSwitch
+          id="default-locale"
           title="Default Locale"
           subtitle="Format dates and numbers based on your browser locale"
           checked={$locale == undefined}
@@ -99,6 +101,7 @@
 
       <div class="ml-4">
         <SettingSwitch
+          id="always-load-original-file"
           title="Display original photos"
           subtitle="Prefer to display the original photo when viewing an asset rather than thumbnails when the original asset is web-compatible. This may result in slower photo display speeds."
           bind:checked={$alwaysLoadOriginalFile}
@@ -107,6 +110,7 @@
       </div>
       <div class="ml-4">
         <SettingSwitch
+          id="play-video-thumbnail-on-hover"
           title="Play video thumbnail on hover"
           subtitle="Play video thumbnail when mouse is hovering over item. Even when disabled, playback can be started by hovering over the play icon."
           bind:checked={$playVideoThumbnailOnHover}
@@ -116,6 +120,7 @@
 
       <div class="ml-4">
         <SettingSwitch
+          id="show-delete-warning"
           title="Permanent deletion warning"
           subtitle="Show a warning when permanently deleting assets"
           bind:checked={$showDeleteModal}
@@ -124,6 +129,7 @@
 
       <div class="ml-4">
         <SettingSwitch
+          id="people-sidebar-link"
           title="People"
           subtitle="Display a link to People in the sidebar"
           bind:checked={$sidebarSettings.people}
@@ -131,6 +137,7 @@
       </div>
       <div class="ml-4">
         <SettingSwitch
+          id="sharing-sidebar-link"
           title="Sharing"
           subtitle="Display a link to Sharing in the sidebar"
           bind:checked={$sidebarSettings.sharing}

web/src/lib/components/user-settings-page/memories-settings.svelte

@@ -36,6 +36,7 @@
       <div class="ml-4 mt-4 flex flex-col gap-4">
         <div class="ml-4">
           <SettingSwitch
+            id="time-based-memories"
             title="Time-based memories"
             subtitle="Photos from previous years"
             bind:checked={user.memoriesEnabled}

web/src/lib/components/user-settings-page/partner-settings.svelte

@@ -162,6 +162,7 @@
             <hr class="my-4 border border-gray-200 dark:border-gray-700" />
             <p class="text-xs font-medium my-4">PHOTOS FROM {partner.user.name.toUpperCase()}</p>
             <SettingSwitch
+              id="show-in-timeline"
               title="Show in timeline"
               subtitle="Show photos and videos from this user in your timeline"
               bind:checked={partner.inTimeline}