fix: make switch labels properly clickable (#25898)

web/package.json

@@ -27,7 +27,7 @@
     "@formatjs/icu-messageformat-parser": "^3.0.0",
     "@immich/justified-layout-wasm": "^0.4.3",
     "@immich/sdk": "file:../open-api/typescript-sdk",
-    "@immich/ui": "^0.59.0",
+    "@immich/ui": "^0.61.3",
     "@mapbox/mapbox-gl-rtl-text": "0.2.3",
     "@mdi/js": "^7.4.47",
     "@photo-sphere-viewer/core": "^5.14.0",

web/src/lib/components/shared-components/settings/setting-switch.spec.ts

@@ -0,0 +1,23 @@
+import { render } from '@testing-library/svelte';
+import SettingSwitch from './setting-switch.svelte';
+
+describe('SettingSwitch component', () => {
+  it('links switch and subtitle ids on the switch', () => {
+    const { getByText } = render(SettingSwitch, {
+      props: {
+        title: 'Enable feature',
+        subtitle: 'Controls the feature state.',
+      },
+    });
+
+    const label = getByText('Enable feature') as HTMLLabelElement;
+    const subtitle = getByText('Controls the feature state.');
+    const subtitleId = subtitle.getAttribute('id');
+    const switchElement = document.querySelector(`#${label.htmlFor}`);
+
+    expect(subtitleId).not.toBeNull();
+    expect(label.htmlFor).not.toBe('');
+    expect(switchElement).not.toBeNull();
+    expect(switchElement?.getAttribute('aria-describedby')).toBe(subtitleId);
+  });
+});

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

@@ -28,14 +28,14 @@
 
   let id: string = generateId();
 
-  let sliderId = $derived(`${id}-slider`);
+  let switchId = $derived(`input-${id}`);
   let subtitleId = $derived(subtitle ? `${id}-subtitle` : undefined);
 </script>
 
 <div class="flex place-items-center justify-between">
   <div class="me-2">
     <div class="flex h-6.5 place-items-center gap-1">
-      <label class="font-medium text-primary text-sm" for={sliderId}>
+      <label class="font-medium text-primary text-sm" for={switchId}>
         {title}
       </label>
       {#if isEdited}
@@ -54,5 +54,5 @@
     {@render children?.()}
   </div>
 
-  <Switch id={sliderId} bind:checked {disabled} onCheckedChange={onToggle} aria-describedby={subtitleId} />
+  <Switch {id} bind:checked {disabled} onCheckedChange={onToggle} aria-describedby={subtitleId} />
 </div>