fix(frontend): resolve all ESLint warnings and svelte-check a11y issues (#2432)

Address 1 error and 49 warnings from npm run check:all:
- Fix unnecessary optional chain in e2e test
- Add eslint-disable comments for security/detect-object-injection with justifications
- Fix 6 a11y label-control association warnings in wizard steps
- Add id prop passthrough to LanguageSelector component
- Suppress detect-unsafe-regex and detect-non-literal-fs-filename warnings

Co-authored-by: tphakala <tphakala@users.noreply.github.com>

Author: tphakala

frontend/src/lib/desktop/components/forms/ToggleField.svelte

@@ -59,6 +59,7 @@
     md: 'w-12 h-6 before:w-5 before:h-5 checked:before:translate-x-6',
   };
 
+  // eslint-disable-next-line security/detect-object-injection -- size is typed as 'sm' | 'md'
   let toggleBaseClasses = $derived(`${toggleSharedClasses} ${toggleSizeClasses[size]}`);
 
   const toggleErrorClasses = 'checked:bg-[var(--color-error)]';

frontend/src/lib/desktop/components/media/AudioPlayer.svelte

@@ -692,6 +692,7 @@
 
       // Map format to container file extension (must match backend clipFileExtension)
       const extMap: Record<string, string> = { alac: 'm4a', aac: 'm4a', opus: 'ogg' };
+      // eslint-disable-next-line security/detect-object-injection -- extractionFormat is a controlled string from component props
       const ext = extMap[extractionFormat] ?? extractionFormat;
       // Sanitize label for filesystem safety (remove reserved chars, normalize whitespace)
       const safeLabel = clipLabel

frontend/src/lib/desktop/components/media/SpectrogramCanvas.svelte

@@ -86,13 +86,15 @@
       const freqRatio = 1 - y / (height - 1 || 1);
       const freq = minFreq + freqRatio * (maxFreq - minFreq);
       const binIndex = Math.round((freq / nyquist) * (binCount - 1));
+      // eslint-disable-next-line security/detect-object-injection -- y is a loop counter bounded by canvas height
       map[y] = Math.max(0, Math.min(binCount - 1, binIndex));
     }
 
     return map;
   });
 
   // Selected color LUT
+  // eslint-disable-next-line security/detect-object-injection -- colorMap is typed as ColorMapName
   let colorLUT = $derived(COLOR_MAPS[colorMap] ?? COLOR_MAPS[DEFAULT_COLOR_MAP]);
 
   // ResizeObserver with debouncing (100ms)
@@ -248,9 +250,11 @@
 
         for (let col = 0; col < pixelsToScroll; col++) {
           for (let y = 0; y < h; y++) {
+            /* eslint-disable security/detect-object-injection -- loop indices and typed array lookups */
             const binIndex = currentBinMap[y];
             const magnitude = frequencyData[binIndex];
             data[y * pixelsToScroll + col] = currentLUT[magnitude];
+            /* eslint-enable security/detect-object-injection */
           }
         }
 

frontend/src/lib/desktop/components/ui/LanguageSelector.svelte

@@ -8,9 +8,10 @@
   // Props
   interface Props {
     className?: string;
+    id?: string;
   }
 
-  let { className = '' }: Props = $props();
+  let { className = '', id }: Props = $props();
 
   // Extended option type for locale with typed locale code
   interface LocaleOption extends SelectOption {
@@ -55,6 +56,7 @@
   size="sm"
   groupBy={false}
   {className}
+  {id}
   onChange={handleLanguageChange}
 >
   {#snippet renderOption(option)}

frontend/src/lib/desktop/components/ui/Modal.svelte

@@ -231,7 +231,12 @@
 >
   <div
     bind:this={modalElement}
-    class={cn(sizeClasses[size], { 'scale-100': isOpen }, className)}
+    class={cn(
+      // eslint-disable-next-line security/detect-object-injection -- size is typed as ModalSize
+      sizeClasses[size],
+      { 'scale-100': isOpen },
+      className
+    )}
     role="document"
     tabindex="-1"
   >
@@ -281,7 +286,11 @@
         </button>
         <button
           type="button"
-          class={cn(btnBase, confirmButtonStyles[confirmVariant])}
+          class={cn(
+            btnBase,
+            // eslint-disable-next-line security/detect-object-injection -- confirmVariant is typed union
+            confirmButtonStyles[confirmVariant]
+          )}
           onclick={handleConfirm}
           disabled={loading || isConfirming}
         >

frontend/src/lib/desktop/components/ui/StatusBanner.svelte

@@ -25,10 +25,13 @@
     info: 'bg-[var(--color-info)]/15 text-[var(--color-info)]',
     warning: 'bg-[var(--color-warning)]/15 text-[var(--color-warning)]',
   };
+
+  // eslint-disable-next-line security/detect-object-injection -- type is typed as StatusType
+  let typeStyle = $derived(styleMap[type]);
 </script>
 
 <div
-  class="flex items-center gap-2 rounded-lg p-3 text-sm {styleMap[type]} {className}"
+  class="flex items-center gap-2 rounded-lg p-3 text-sm {typeStyle} {className}"
   role={type === 'error' ? 'alert' : 'status'}
   aria-live={type === 'error' ? 'assertive' : 'polite'}
 >

frontend/src/lib/desktop/components/ui/WeatherSvgIcon.svelte

@@ -84,6 +84,7 @@
 
   let { icon, size = 32, className = '', title = '' }: Props = $props();
 
+  // eslint-disable-next-line security/detect-object-injection -- icon is a string prop used as key in a static icon map
   let svgContent = $derived(iconMap[icon] ?? iconMap['not-available']);
 </script>
 

frontend/src/lib/desktop/features/dashboard/components/CurrentlyHearingCard.svelte

@@ -44,10 +44,12 @@ Props:
     for (const d of detections) {
       const key = detectionKey(d);
       if ((d.status === 'approved' || d.status === 'rejected') && !(key in removalTimers)) {
+        /* eslint-disable security/detect-object-injection -- key is derived from detectionKey(), a controlled string */
         retainedData[key] = d;
         removalTimers[key] = setTimeout(() => {
           delete retainedData[key];
           delete removalTimers[key];
+          /* eslint-enable security/detect-object-injection */
           retainedKeys = retainedKeys.filter(k => k !== key);
         }, TERMINAL_RETENTION_MS);
         if (!untrack(() => retainedKeys).includes(key)) {
@@ -70,6 +72,7 @@ Props:
     const result: PendingDetection[] = [...detections];
     for (const key of retained) {
       if (!incomingByKey.has(key)) {
+        // eslint-disable-next-line security/detect-object-injection -- key is from retainedKeys, a controlled string array
         const data = retainedData[key];
         if (data) {
           result.push(data);
@@ -114,13 +117,19 @@ Props:
     return result;
   });
 
+  function getElapsedForKey(key: string): string {
+    // eslint-disable-next-line security/detect-object-injection -- key is a controlled detection key string
+    return elapsedTexts[key] ?? '';
+  }
+
   // Show source column only when multiple sources are present
   let hasMultipleSources = $derived(new Set(displayDetections.map(d => d.source)).size > 1);
 
   // Clean up pending timers on component destroy
   $effect(() => {
     return () => {
       for (const key in removalTimers) {
+        // eslint-disable-next-line security/detect-object-injection -- key is from for-in over own Record
         clearTimeout(removalTimers[key]);
       }
     };
@@ -145,6 +154,7 @@ Props:
     <div class="flex flex-wrap gap-3 p-4">
       {#each displayDetections as detection (`${detection.source}_${detection.scientificName}`)}
         {@const key = detection.source + detection.scientificName}
+        {@const elapsedText = getElapsedForKey(key)}
         <div
           class="flex items-center gap-2 rounded-lg px-3 py-2 transition-colors duration-300
             {detection.status === 'approved'
@@ -175,7 +185,7 @@ Props:
               {detection.species}
             </span>
             <span class="text-xs text-[var(--color-base-content)]/60">
-              {elapsedTexts[key] ?? ''}
+              {elapsedText}
               {#if hasMultipleSources}
                 · {detection.source}
               {/if}

frontend/src/lib/desktop/features/dashboard/components/DashboardEditMode.svelte

@@ -67,6 +67,7 @@
   let missingTypes = $derived(
     ALL_ELEMENT_TYPES.filter(type => {
       const count = editElements.filter(el => el.type === type).length;
+      // eslint-disable-next-line security/detect-object-injection -- type is from ALL_ELEMENT_TYPES, a typed constant array
       const max = MAX_INSTANCES[type] ?? 1;
       return count < max;
     })

frontend/src/lib/desktop/features/dashboard/components/MiniSpectrogram.svelte

@@ -63,6 +63,7 @@
   let showDetectionLabels = $state(true);
 
   const gainLabel = $derived.by(() => {
+    // eslint-disable-next-line security/detect-object-injection -- gainPresetIndex is a numeric index bounded by GAIN_PRESETS.length
     const preset = GAIN_PRESETS[gainPresetIndex];
     return 'value' in preset ? t(preset.labelKey, { value: preset.value }) : t(preset.labelKey);
   });
@@ -378,6 +379,7 @@
 
   function cycleVolume() {
     gainPresetIndex = (gainPresetIndex + 1) % GAIN_PRESETS.length;
+    // eslint-disable-next-line security/detect-object-injection -- gainPresetIndex is a numeric index bounded by modulo
     const preset = GAIN_PRESETS[gainPresetIndex];
     spectro.setAudioOutput(preset.audio);
     if (preset.audio) {