Administrator/Twitch-VOD-Manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 212 Wiki Activity

a11y: clip-cutter + auto-vod settings labels linked to inputs via for=

Browse Source 
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>
This commit is contained in:
xRangerDE 2026-05-11 05:41:14 +02:00
parent 8dc374d50e
commit 5641924c7e
1 changed files with 7 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/index.html
View File

@ -52,19 +52,19 @@
<h2 class="clip-modal-title" id="clipDialogTitle">VOD zuschneiden</h2> <h2 class="clip-modal-title" id="clipDialogTitle">VOD zuschneiden</h2>
<div class="clip-modal-field"> <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')"> <input type="range" id="clipStartSlider" min="0" max="100" value="0" oninput="updateFromSlider('start')">
<div class="clip-modal-time-row"> <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')"> <input type="text" id="clipStartTime" value="00:00:00" class="clip-modal-time-input" onchange="updateFromInput('start')">
</div> </div>
</div> </div>
<div class="clip-modal-field"> <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')"> <input type="range" id="clipEndSlider" min="0" max="100" value="60" oninput="updateFromSlider('end')">
<div class="clip-modal-time-row"> <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')"> <input type="text" id="clipEndTime" value="00:01:00" class="clip-modal-time-input" onchange="updateFromInput('end')">
</div> </div>
</div> </div>
@ -75,7 +75,7 @@
</div> </div>
<div class="clip-modal-field"> <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()"> <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 id="clipDialogPartHint" class="clip-modal-hint">Leer lassen = Teil 1</div>
</div> </div>
@ -763,9 +763,9 @@
<h3 id="autoVodCardTitle">Auto-VOD-Download</h3> <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> <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;"> <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;"> <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;"> <input type="number" id="autoVodMaxAgeHours" min="1" max="720" value="24" style="width:90px;">
</div> </div>
<div class="form-row" style="align-items: center; gap: 12px; flex-wrap: wrap;"> <div class="form-row" style="align-items: center; gap: 12px; flex-wrap: wrap;">