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