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