From 69b83c9d22fdd26ee71c8794e4c06dca91cfe642 Mon Sep 17 00:00:00 2001
From: xRangerDE <xRangerDE@24-music.de>
Date: Mon, 11 May 2026 05:24:50 +0200
Subject: [PATCH] =?UTF-8?q?cleanup+a11y:=20VOD=20select=20checkbox=20?=
 =?UTF-8?q?=E2=80=94=20proper=20aria-label=20+=20CSS-class=20styling?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The bulk-select checkbox on each VOD card was carrying a ~140 char
inline-style block (absolute positioning, dimensions, accent-color,
z-index, cursor) — duplicated across every rendered VOD — plus a
truly bizarre title-attribute fallback that hacked the
bulkSelectedCount locale string by stripping placeholder digits:

  title=`${UI_TEXT.vods.bulkSelectedCount
                .replace("{count}", "0")
                .replace(/[0-9]/g, "")
                .trim() || "Select"}`

That worked by accident — the placeholder happens to be "{count}
ausgewahlt" / "{count} selected" so stripping digits gave a usable
fragment — but it was fragile and not really an accessible label.

Three fixes:
- Extracted the inline styles to a .vod-select-checkbox CSS rule.
  The custom checkbox styling from 4.6.26 means accent-color was
  redundant anyway, so dropping it is a no-op visually.
- Added a proper locale key vods.selectAriaLabel ("Select VOD for
  bulk action" / "VOD fuer Bulk-Aktion auswaehlen") for the
  aria-label attribute.
- Dropped the title-attribute hack entirely. aria-label now provides
  the AT-readable name; sighted users get the visual checkbox
  which is self-explanatory.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/renderer-locale-de.ts |  1 +
 src/renderer-locale-en.ts |  1 +
 src/renderer-streamers.ts |  2 +-
 src/styles.css            | 13 +++++++++++++
 4 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/renderer-locale-de.ts b/src/renderer-locale-de.ts
index a305584..e57ffdc 100644
--- a/src/renderer-locale-de.ts
+++ b/src/renderer-locale-de.ts
@@ -363,6 +363,7 @@ const UI_TEXT_DE = {
         updateProgressAria: 'Update-Download-Fortschritt'
     },
     vods: {
+        selectAriaLabel: 'VOD fuer Bulk-Aktion auswaehlen',
         noneTitle: 'Keine VODs',
         noneText: 'Wahle einen Streamer aus der Liste.',
         loading: 'Lade VODs...',
diff --git a/src/renderer-locale-en.ts b/src/renderer-locale-en.ts
index b94a9db..40572a4 100644
--- a/src/renderer-locale-en.ts
+++ b/src/renderer-locale-en.ts
@@ -363,6 +363,7 @@ const UI_TEXT_EN = {
         updateProgressAria: 'Update download progress'
     },
     vods: {
+        selectAriaLabel: 'Select VOD for bulk action',
         noneTitle: 'No VODs',
         noneText: 'Select a streamer from the list.',
         loading: 'Loading VODs...',
diff --git a/src/renderer-streamers.ts b/src/renderer-streamers.ts
index 7ef3e56..7d41cf7 100644
--- a/src/renderer-streamers.ts
+++ b/src/renderer-streamers.ts
@@ -257,7 +257,7 @@ function buildVodCardHtml(vod: VOD, streamer: string, downloadedIds?: Set<string
              data-vod-date="${safeDateAttr}"
              data-vod-streamer="${safeStreamerAttr}"
              data-vod-duration="${safeDurationAttr}">
-            <input type="checkbox" class="vod-select-checkbox" data-vod-url="${safeUrlAttr}" ${isChecked ? 'checked' : ''} title="${escapeHtml(UI_TEXT.vods.bulkSelectedCount.replace('{count}', '0').replace(/[0-9]/g, '').trim() || 'Select')}" style="position:absolute; top:8px; left:8px; width:18px; height:18px; accent-color:#9146FF; cursor:pointer; z-index:2;">
+            <input type="checkbox" class="vod-select-checkbox" data-vod-url="${safeUrlAttr}" ${isChecked ? 'checked' : ''} aria-label="${escapeHtml(UI_TEXT.vods.selectAriaLabel)}">
             ${downloadedBadge}
             <div class="vod-thumb-wrap">
                 <img class="vod-thumbnail" loading="lazy" decoding="async" src="${thumb}" alt="" title="${escapeHtml(UI_TEXT.vods.openOnTwitch)}" onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 320 180%22><rect fill=%22%23333%22 width=%22320%22 height=%22180%22/></svg>'">
diff --git a/src/styles.css b/src/styles.css
index c6cd14c..3f3dc60 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1318,6 +1318,19 @@ select option {
     box-shadow: 0 0 0 3px rgba(145, 70, 255, 0.35);
 }
 
+/* The bulk-select checkbox overlaid on each VOD thumbnail top-left.
+   Positioned absolutely so it sits over the artwork without affecting
+   the cards flex/info layout. */
+.vod-select-checkbox {
+    position: absolute;
+    top: 8px;
+    left: 8px;
+    width: 18px;
+    height: 18px;
+    cursor: pointer;
+    z-index: 2;
+}
+
 .vod-card.selected {
     box-shadow: 0 0 0 2px #9146FF, 0 8px 25px rgba(145, 70, 255, 0.25);
 }