From fa440951d2fe6d5e353e8992420337bef0162bcf Mon Sep 17 00:00:00 2001
From: xRangerDE <xRangerDE@24-music.de>
Date: Mon, 11 May 2026 04:31:41 +0200
Subject: [PATCH] a11y: cut + merge progress bars role=progressbar +
 aria-valuenow
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Following 4.6.64 for the queue progress bars, the cut + merge
progress containers in their respective tabs had the same gap:
a plain <div class="progress-bar"> wrapping a <div class="progress-
bar-fill"> with no semantic role. JS poked the bar's style.width
on every percent update; AT had no way to read out the running
value.

Promoted both .progress-bar wrappers to role="progressbar" with
aria-valuemin / max / now, plus aria-label sourced from new
locale strings (cutProgressAria / mergeProgressAria) so EN/DE
both work.

The progress event handlers in renderer.ts now also stamp
aria-valuenow on each tick, so AT live regions pick up the
percentage as the cut / merge advances. setAttribute is cheap
relative to the FFmpeg progress event rate (~1/s), no perf
concern.

renderer-texts.applyText sets the localized aria-label on both
gauges at boot + language switch — text contents already get
re-applied through the same path.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/index.html            | 4 ++--
 src/renderer-locale-de.ts | 4 +++-
 src/renderer-locale-en.ts | 4 +++-
 src/renderer-texts.ts     | 2 ++
 src/renderer.ts           | 8 ++++++--
 5 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/index.html b/src/index.html
index 0cb7b65..5ddb9e6 100644
--- a/src/index.html
+++ b/src/index.html
@@ -372,7 +372,7 @@
                         </div>
 
                         <div class="progress-container" id="cutProgress">
-                            <div class="progress-bar">
+                            <div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" aria-label="Cut progress" id="cutProgressGauge">
                                 <div class="progress-bar-fill" id="cutProgressBar"></div>
                             </div>
                             <div class="progress-text" id="cutProgressText">0%</div>
@@ -404,7 +404,7 @@
                         </div>
 
                         <div class="progress-container" id="mergeProgress">
-                            <div class="progress-bar">
+                            <div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" aria-label="Merge progress" id="mergeProgressGauge">
                                 <div class="progress-bar-fill" id="mergeProgressBar"></div>
                             </div>
                             <div class="progress-text" id="mergeProgressText">0%</div>
diff --git a/src/renderer-locale-de.ts b/src/renderer-locale-de.ts
index 8287197..f5b8f31 100644
--- a/src/renderer-locale-de.ts
+++ b/src/renderer-locale-de.ts
@@ -357,7 +357,9 @@ const UI_TEXT_DE = {
         liveNowTooltip: 'Aktuell live auf Twitch',
         modalCloseAria: 'Dialog schliessen',
         sidebarEmpty: 'Noch keine Streamer. Fuege oben rechts einen hinzu.',
-        removeAria: 'Entfernen'
+        removeAria: 'Entfernen',
+        cutProgressAria: 'Schnitt-Fortschritt',
+        mergeProgressAria: 'Merge-Fortschritt'
     },
     vods: {
         noneTitle: 'Keine VODs',
diff --git a/src/renderer-locale-en.ts b/src/renderer-locale-en.ts
index 8c7a2a7..2573fd2 100644
--- a/src/renderer-locale-en.ts
+++ b/src/renderer-locale-en.ts
@@ -357,7 +357,9 @@ const UI_TEXT_EN = {
         liveNowTooltip: 'Currently live on Twitch',
         modalCloseAria: 'Close dialog',
         sidebarEmpty: 'No streamers yet. Add one via the input at the top right.',
-        removeAria: 'Remove'
+        removeAria: 'Remove',
+        cutProgressAria: 'Cut progress',
+        mergeProgressAria: 'Merge progress'
     },
     vods: {
         noneTitle: 'No VODs',
diff --git a/src/renderer-texts.ts b/src/renderer-texts.ts
index 0fabbf1..0525c39 100644
--- a/src/renderer-texts.ts
+++ b/src/renderer-texts.ts
@@ -253,6 +253,8 @@ function applyLanguageToStaticUI(): void {
     // Localize the modal close-button aria-label. The buttons share a
     // .modal-close-localizable class so one call updates all five.
     setAriaLabelAll('.modal-close-localizable', UI_TEXT.streamers.modalCloseAria);
+    document.getElementById('cutProgressGauge')?.setAttribute('aria-label', UI_TEXT.streamers.cutProgressAria);
+    document.getElementById('mergeProgressGauge')?.setAttribute('aria-label', UI_TEXT.streamers.mergeProgressAria);
     setText('backupCardTitle', UI_TEXT.static.backupCardTitle);
     setText('backupCardIntro', UI_TEXT.static.backupCardIntro);
     setText('btnExportConfig', UI_TEXT.static.exportConfig);
diff --git a/src/renderer.ts b/src/renderer.ts
index d6ffe5b..3693e7c 100644
--- a/src/renderer.ts
+++ b/src/renderer.ts
@@ -168,13 +168,17 @@ async function init(): Promise<void> {
     });
 
     window.api.onCutProgress((percent: number) => {
+        const rounded = Math.round(percent);
         byId('cutProgressBar').style.width = percent + '%';
-        byId('cutProgressText').textContent = Math.round(percent) + '%';
+        byId('cutProgressText').textContent = rounded + '%';
+        byId('cutProgressGauge').setAttribute('aria-valuenow', String(rounded));
     });
 
     window.api.onMergeProgress((percent: number) => {
+        const rounded = Math.round(percent);
         byId('mergeProgressBar').style.width = percent + '%';
-        byId('mergeProgressText').textContent = Math.round(percent) + '%';
+        byId('mergeProgressText').textContent = rounded + '%';
+        byId('mergeProgressGauge').setAttribute('aria-valuenow', String(rounded));
     });
 
     // Update stats bar — paused while the window is hidden so we don't