From 5641924c7e230825156a703d3181b811bcffb80c Mon Sep 17 00:00:00 2001
From: xRangerDE <xRangerDE@24-music.de>
Date: Mon, 11 May 2026 05:41:14 +0200
Subject: [PATCH] a11y: clip-cutter + auto-vod settings labels linked to inputs
 via for=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Five <label> elements in the clip-cutter modal and two <span class="form-sublabel"> elements in the Auto-VOD settings card had no for=/id pairing with their associated form controls — screen readers couldn't announce the label when the input was focused, and clicking the label didn't focus the input.

Fix: added for= to 5 clip-modal labels (Start/StartTime/End/EndTime/Part) and converted the two Auto-VOD sublabels from span to label for= so screen readers correctly associate them with autoVodPollMinutes and autoVodMaxAgeHours.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/index.html | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/index.html b/src/index.html
index 786810c..9dc63f5 100644
--- a/src/index.html
+++ b/src/index.html
@@ -52,19 +52,19 @@
             <h2 class="clip-modal-title" id="clipDialogTitle">VOD zuschneiden</h2>
 
             <div class="clip-modal-field">
-                <label class="clip-modal-label" id="clipDialogStartLabel">Start:</label>
+                <label class="clip-modal-label" id="clipDialogStartLabel" for="clipStartSlider">Start:</label>
                 <input type="range" id="clipStartSlider" min="0" max="100" value="0" oninput="updateFromSlider('start')">
                 <div class="clip-modal-time-row">
-                    <label class="clip-modal-meta" id="clipDialogStartTimeLabel">Startzeit (HH:MM:SS):</label>
+                    <label class="clip-modal-meta" id="clipDialogStartTimeLabel" for="clipStartTime">Startzeit (HH:MM:SS):</label>
                     <input type="text" id="clipStartTime" value="00:00:00" class="clip-modal-time-input" onchange="updateFromInput('start')">
                 </div>
             </div>
 
             <div class="clip-modal-field">
-                <label class="clip-modal-label" id="clipDialogEndLabel">Ende:</label>
+                <label class="clip-modal-label" id="clipDialogEndLabel" for="clipEndSlider">Ende:</label>
                 <input type="range" id="clipEndSlider" min="0" max="100" value="60" oninput="updateFromSlider('end')">
                 <div class="clip-modal-time-row">
-                    <label class="clip-modal-meta" id="clipDialogEndTimeLabel">Endzeit (HH:MM:SS):</label>
+                    <label class="clip-modal-meta" id="clipDialogEndTimeLabel" for="clipEndTime">Endzeit (HH:MM:SS):</label>
                     <input type="text" id="clipEndTime" value="00:01:00" class="clip-modal-time-input" onchange="updateFromInput('end')">
                 </div>
             </div>
@@ -75,7 +75,7 @@
             </div>
 
             <div class="clip-modal-field">
-                <label class="clip-modal-label" id="clipDialogPartLabel">Start Part-Nummer (optional, fur Fortsetzung):</label>
+                <label class="clip-modal-label" id="clipDialogPartLabel" for="clipStartPart">Start Part-Nummer (optional, fur Fortsetzung):</label>
                 <input type="text" id="clipStartPart" placeholder="z.B. 42" class="clip-modal-part-input" oninput="updateFilenameExamples()">
                 <div id="clipDialogPartHint" class="clip-modal-hint">Leer lassen = Teil 1</div>
             </div>
@@ -763,9 +763,9 @@
                         <h3 id="autoVodCardTitle">Auto-VOD-Download</h3>
                         <p id="autoVodCardIntro" style="color: var(--text-secondary); font-size:13px; margin-bottom:12px; line-height:1.5;">Streamer mit aktiviertem VOD-Toggle werden in dem hier festgelegten Intervall auf neue Twitch-VODs geprueft. Neue VODs innerhalb des Alters-Fensters werden automatisch zur Download-Queue hinzugefuegt.</p>
                         <div class="form-row" style="margin-bottom: 10px; align-items: center;">
-                            <span id="autoVodPollMinutesLabel" class="form-sublabel">Poll-Intervall (Minuten)</span>
+                            <label id="autoVodPollMinutesLabel" class="form-sublabel" for="autoVodPollMinutes">Poll-Intervall (Minuten)</label>
                             <input type="number" id="autoVodPollMinutes" min="5" max="360" value="15" style="width:90px;">
-                            <span id="autoVodMaxAgeHoursLabel" class="form-sublabel" style="margin-left:12px;">Max. Alter (Stunden)</span>
+                            <label id="autoVodMaxAgeHoursLabel" class="form-sublabel" for="autoVodMaxAgeHours" style="margin-left:12px;">Max. Alter (Stunden)</label>
                             <input type="number" id="autoVodMaxAgeHours" min="1" max="720" value="24" style="width:90px;">
                         </div>
                         <div class="form-row" style="align-items: center; gap: 12px; flex-wrap: wrap;">