From 0e313e8857e37bedfaad612ade5303f8323d131b Mon Sep 17 00:00:00 2001
From: xRangerDE <xRangerDE@24-music.de>
Date: Mon, 11 May 2026 05:58:39 +0200
Subject: [PATCH] cleanup+a11y: .filename-template-grid CSS class + for= on the
 3 template labels
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The filename-templates 3-pair grid in Settings carried four inline style attributes:
- the wrapper div's display:grid; gap:8px; margin-top:8px
- three labels with the same font-size:13px; color:var(--text-secondary), with the 2nd and 3rd also having margin-top:4px

Extracted into a single .filename-template-grid class block (with descendant label styling + a :not(:first-child) margin-top rule). HTML drops from a noisy block of inline styles to a clean labelled grid.

Same edit added for= associations on the three labels (vodTemplateLabel → vodFilenameTemplate, partsTemplateLabel → partsFilenameTemplate, defaultClipTemplateLabel → defaultClipFilenameTemplate) — they were sitting right next to their inputs with no programmatic association. Continues the label-for a11y work from 4.6.79; clicking a label now focuses its input and screen readers announce the label when the input is focused.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/index.html |  8 ++++----
 src/styles.css | 18 ++++++++++++++++++
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/index.html b/src/index.html
index 69001db..cf894b1 100644
--- a/src/index.html
+++ b/src/index.html
@@ -643,14 +643,14 @@
                                 <button class="btn-secondary" id="templatePresetArchive" type="button" onclick="applyTemplatePreset('archive')">Preset: Archive</button>
                                 <button class="btn-secondary" id="templatePresetClipper" type="button" onclick="applyTemplatePreset('clipper')">Preset: Clipper</button>
                             </div>
-                            <div style="display: grid; gap: 8px; margin-top: 8px;">
-                                <label id="vodTemplateLabel" style="font-size: 13px; color: var(--text-secondary);">VOD Template</label>
+                            <div class="filename-template-grid">
+                                <label id="vodTemplateLabel" for="vodFilenameTemplate">VOD Template</label>
                                 <input type="text" id="vodFilenameTemplate" class="input-monospace" placeholder="{title}.mp4" oninput="validateFilenameTemplates()">
 
-                                <label id="partsTemplateLabel" style="font-size: 13px; color: var(--text-secondary); margin-top: 4px;">VOD Part Template</label>
+                                <label id="partsTemplateLabel" for="partsFilenameTemplate">VOD Part Template</label>
                                 <input type="text" id="partsFilenameTemplate" class="input-monospace" placeholder="{date}_Part{part_padded}.mp4" oninput="validateFilenameTemplates()">
 
-                                <label id="defaultClipTemplateLabel" style="font-size: 13px; color: var(--text-secondary); margin-top: 4px;">Clip Template</label>
+                                <label id="defaultClipTemplateLabel" for="defaultClipFilenameTemplate">Clip Template</label>
                                 <input type="text" id="defaultClipFilenameTemplate" class="input-monospace" placeholder="{date}_{part}.mp4" oninput="validateFilenameTemplates()">
                             </div>
                             <div id="filenameTemplateHint" class="form-note" style="margin-top: 8px;">Platzhalter: {title} {id} {channel} {date} {part} {part_padded} {trim_start} {trim_end} {trim_length} {date_custom="yyyy-MM-dd"}</div>
diff --git a/src/styles.css b/src/styles.css
index 9c4ac3f..2de7ea0 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -2131,6 +2131,24 @@ select option {
     line-height: 1.45;
 }
 
+/* Filename-templates 3-pair grid (VOD / Part / Clip template inputs).
+   Each row is a label above an input; the label gets the 13px secondary
+   styling that used to be inline on every label. */
+.filename-template-grid {
+    display: grid;
+    gap: 8px;
+    margin-top: 8px;
+}
+
+.filename-template-grid label {
+    font-size: 13px;
+    color: var(--text-secondary);
+}
+
+.filename-template-grid label:not(:first-child) {
+    margin-top: 4px;
+}
+
 /* Settings toggle row — label wraps an input[type=checkbox] + span.
    Used 17 times across the Settings cards. Adjacent-sibling
    combinator adds the gap between consecutive toggle rows so the