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