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

Third progress bar in this a11y pass — the download-progress bar
shown in the update banner during an auto-update download. Same
pattern as 4.6.64 (queue) + 4.6.65 (cut/merge): bare div with
JS-driven width, no semantic role.

Promoted the .update-banner-progress-track to role="progressbar"
with aria-valuemin / max / now + a localized aria-label
(updateProgressAria: "Update download progress" / "Update-Download-
Fortschritt").

Three call sites in renderer-updates.ts that drive bar.style.width
now also stamp aria-valuenow on the gauge:
- onUpdateProgress event handler (per-tick percent)
- setDownloadPendingUi (initial 30% indeterminate placeholder)
- setDownloadReadyUi (100% on finish)

renderer-texts.applyText sets the localized aria-label at boot +
on language switch.

That's all three application-level progress bars now AT-friendly.
The same pattern would extend to any future progress UI.

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

diff --git a/src/index.html b/src/index.html
index 5ddb9e6..786810c 100644
--- a/src/index.html
+++ b/src/index.html
@@ -11,7 +11,7 @@
     <div class="update-banner" id="updateBanner">
         <span id="updateText">Neue Version verfügbar!</span>
         <div id="updateProgress" class="update-banner-progress-wrap" style="display: none;">
-            <div class="update-banner-progress-track">
+            <div class="update-banner-progress-track" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" aria-label="Update download" id="updateProgressGauge">
                 <div id="updateProgressBar" class="update-banner-progress-bar"></div>
             </div>
         </div>
diff --git a/src/renderer-locale-de.ts b/src/renderer-locale-de.ts
index f5b8f31..a305584 100644
--- a/src/renderer-locale-de.ts
+++ b/src/renderer-locale-de.ts
@@ -359,7 +359,8 @@ const UI_TEXT_DE = {
         sidebarEmpty: 'Noch keine Streamer. Fuege oben rechts einen hinzu.',
         removeAria: 'Entfernen',
         cutProgressAria: 'Schnitt-Fortschritt',
-        mergeProgressAria: 'Merge-Fortschritt'
+        mergeProgressAria: 'Merge-Fortschritt',
+        updateProgressAria: 'Update-Download-Fortschritt'
     },
     vods: {
         noneTitle: 'Keine VODs',
diff --git a/src/renderer-locale-en.ts b/src/renderer-locale-en.ts
index 2573fd2..b94a9db 100644
--- a/src/renderer-locale-en.ts
+++ b/src/renderer-locale-en.ts
@@ -359,7 +359,8 @@ const UI_TEXT_EN = {
         sidebarEmpty: 'No streamers yet. Add one via the input at the top right.',
         removeAria: 'Remove',
         cutProgressAria: 'Cut progress',
-        mergeProgressAria: 'Merge progress'
+        mergeProgressAria: 'Merge progress',
+        updateProgressAria: 'Update download progress'
     },
     vods: {
         noneTitle: 'No VODs',
diff --git a/src/renderer-texts.ts b/src/renderer-texts.ts
index 0525c39..3279ffa 100644
--- a/src/renderer-texts.ts
+++ b/src/renderer-texts.ts
@@ -255,6 +255,7 @@ function applyLanguageToStaticUI(): void {
     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);
+    document.getElementById('updateProgressGauge')?.setAttribute('aria-label', UI_TEXT.streamers.updateProgressAria);
     setText('backupCardTitle', UI_TEXT.static.backupCardTitle);
     setText('backupCardIntro', UI_TEXT.static.backupCardIntro);
     setText('btnExportConfig', UI_TEXT.static.exportConfig);
diff --git a/src/renderer-updates.ts b/src/renderer-updates.ts
index b86a6e2..935a1a0 100644
--- a/src/renderer-updates.ts
+++ b/src/renderer-updates.ts
@@ -127,7 +127,9 @@ function setDownloadPendingUi(): void {
 
     const bar = byId('updateProgressBar');
     bar.classList.add('downloading');
-    bar.style.width = latestDownloadProgress ? `${latestDownloadProgress.percent}%` : '30%';
+    const pendingPct = latestDownloadProgress ? latestDownloadProgress.percent : 30;
+    bar.style.width = `${pendingPct}%`;
+    byId('updateProgressGauge').setAttribute('aria-valuenow', String(Math.round(pendingPct)));
 
     if (!latestDownloadProgress) {
         byId('updateText').textContent = `Version ${latestUpdateVersion || '?'} ${UI_TEXT.updates.downloading}`;
@@ -145,6 +147,7 @@ function setDownloadReadyUi(info?: UpdateInfo): void {
     const bar = byId('updateProgressBar');
     bar.classList.remove('downloading');
     bar.style.width = '100%';
+    byId('updateProgressGauge').setAttribute('aria-valuenow', '100');
 
     byId('updateProgress').style.display = 'block';
     byId('updateText').textContent = `Version ${activeInfo.version} ${UI_TEXT.updates.ready}`;
@@ -574,6 +577,7 @@ window.api.onUpdateDownloadProgress((progress: UpdateDownloadProgress) => {
     const bar = byId('updateProgressBar');
     bar.classList.remove('downloading');
     bar.style.width = progress.percent + '%';
+    byId('updateProgressGauge').setAttribute('aria-valuenow', String(Math.round(progress.percent)));
 
     showUpdateBanner();
     byId('updateProgress').style.display = 'block';