release: 4.6.33 localize modal close aria-labels

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "twitch-vod-manager",
-  "version": "4.6.32",
+  "version": "4.6.33",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "twitch-vod-manager",
-      "version": "4.6.32",
+      "version": "4.6.33",
       "license": "MIT",
       "dependencies": {
         "axios": "^1.6.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "twitch-vod-manager",
-  "version": "4.6.32",
+  "version": "4.6.33",
   "description": "Twitch VOD Manager - Download Twitch VODs easily",
   "main": "dist/main.js",
   "author": "xRangerDE",

src/index.html

@@ -20,7 +20,7 @@
 
     <div class="modal-overlay" id="updateModal" role="dialog" aria-modal="true" aria-labelledby="updateModalTitle" onclick="handleUpdateModalOverlayClick(event)">
         <div class="modal update-modal">
-            <button class="modal-close" aria-label="Close" onclick="dismissUpdateModal()">x</button>
+            <button class="modal-close modal-close-localizable" aria-label="Close" onclick="dismissUpdateModal()">x</button>
             <div class="update-modal-eyebrow" id="updateModalEyebrow">Updates</div>
             <h2 id="updateModalTitle">Update verfugbar</h2>
             <p class="update-modal-message" id="updateModalMessage">Version 0.0.0 ist verfugbar. Jetzt herunterladen?</p>
@@ -48,7 +48,7 @@
     <!-- Clip Dialog Modal -->
     <div class="modal-overlay" id="clipModal" role="dialog" aria-modal="true" aria-labelledby="clipDialogTitle">
         <div class="modal clip-modal">
-            <button class="modal-close" aria-label="Close" onclick="closeClipDialog()">x</button>
+            <button class="modal-close modal-close-localizable" aria-label="Close" onclick="closeClipDialog()">x</button>
             <h2 class="clip-modal-title" id="clipDialogTitle">VOD zuschneiden</h2>
 
             <div class="clip-modal-field">
@@ -116,8 +116,8 @@
     <!-- Events Viewer Modal -->
     <div class="modal-overlay" id="eventsViewerModal" role="dialog" aria-modal="true" aria-labelledby="eventsViewerTitle">
         <div class="modal" style="max-width: 700px; max-height: 80vh; display:flex; flex-direction:column;">
-            <button class="modal-close" aria-label="Close" onclick="closeEventsViewer()">x</button>
-            <h2 id="eventsViewerTitle" style="margin-top:0;">Stream events</h2>
+            <button class="modal-close modal-close-localizable" aria-label="Close" onclick="closeEventsViewer()">x</button>
+            <h2 id="eventsViewerTitle" style="margin-top:0;"></h2>
             <div id="eventsViewerStatus" style="color:var(--text-secondary); font-size:12px; margin-bottom:8px;"></div>
             <div id="eventsViewerList" style="flex:1; overflow-y:auto; background: var(--bg-main); border:1px solid var(--border-soft); border-radius:6px; padding:8px;"></div>
         </div>
@@ -126,8 +126,8 @@
     <!-- Chat Replay Viewer Modal -->
     <div class="modal-overlay" id="chatViewerModal" role="dialog" aria-modal="true" aria-labelledby="chatViewerTitle">
         <div class="modal" style="max-width: 800px; height: 80vh; display:flex; flex-direction:column;">
-            <button class="modal-close" aria-label="Close" onclick="closeChatViewer()">x</button>
-            <h2 id="chatViewerTitle" style="margin-top:0;">Chat replay</h2>
+            <button class="modal-close modal-close-localizable" aria-label="Close" onclick="closeChatViewer()">x</button>
+            <h2 id="chatViewerTitle" style="margin-top:0;"></h2>
             <div class="form-row" style="margin-bottom:8px; gap:8px; flex-wrap:wrap; align-items:center;">
                 <input type="text" id="chatViewerFilter" placeholder="Filter..." oninput="onChatViewerFilterChange()" style="flex:1; min-width:160px; background: var(--bg-card); border:1px solid var(--border-soft); border-radius:6px; padding:6px 10px; color:var(--text); font-size:13px;">
                 <span id="chatViewerStatus" style="color:var(--text-secondary); font-size:12px;"></span>
@@ -139,7 +139,7 @@
     <!-- Template Guide Modal -->
     <div class="modal-overlay" id="templateGuideModal" role="dialog" aria-modal="true" aria-labelledby="templateGuideTitle">
         <div class="modal template-guide-modal">
-            <button class="modal-close" aria-label="Close" onclick="closeTemplateGuide()">x</button>
+            <button class="modal-close modal-close-localizable" aria-label="Close" onclick="closeTemplateGuide()">x</button>
             <h2 id="templateGuideTitle">Template Guide</h2>
             <p id="templateGuideIntro" class="template-guide-intro">Nutze Variablen fur Dateinamen und prufe das Ergebnis als Live-Vorschau.</p>
 

src/renderer-locale-de.ts

@@ -351,7 +351,8 @@ const UI_TEXT_DE = {
         autoVodScanEmpty: 'Keine neuen VODs gefunden.',
         autoRecordScanTriggered: 'Manueller Scan: {count} Live-Aufnahme(n) gestartet.',
         autoRecordScanEmpty: 'Manueller Scan: kein Streamer ist gerade live.',
-        liveNowTooltip: 'Aktuell live auf Twitch'
+        liveNowTooltip: 'Aktuell live auf Twitch',
+        modalCloseAria: 'Dialog schliessen'
     },
     vods: {
         noneTitle: 'Keine VODs',

src/renderer-locale-en.ts

@@ -351,7 +351,8 @@ const UI_TEXT_EN = {
         autoVodScanEmpty: 'No new VODs found.',
         autoRecordScanTriggered: 'Manual scan: {count} live recording(s) started.',
         autoRecordScanEmpty: 'Manual scan: no streamers currently live.',
-        liveNowTooltip: 'Currently live on Twitch'
+        liveNowTooltip: 'Currently live on Twitch',
+        modalCloseAria: 'Close dialog'
     },
     vods: {
         noneTitle: 'No VODs',

src/renderer-texts.ts

@@ -26,6 +26,12 @@ function setText(id: string, value: string): void {
     if (node) node.textContent = value;
 }
 
+function setAriaLabelAll(selector: string, value: string): void {
+    document.querySelectorAll(selector).forEach((el) => {
+        el.setAttribute('aria-label', value);
+    });
+}
+
 function setPlaceholder(id: string, value: string): void {
     const node = document.getElementById(id) as HTMLInputElement | null;
     if (node) node.placeholder = value;
@@ -236,6 +242,10 @@ function applyLanguageToStaticUI(): void {
     setText('autoVodMaxAgeHoursLabel', UI_TEXT.static.autoVodMaxAgeHoursLabel);
     setText('btnAutoVodScanNow', UI_TEXT.static.autoVodScanNow);
     setText('btnAutoRecordScanNow', UI_TEXT.static.autoRecordScanNow);
+
+    // 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);
     setText('backupCardTitle', UI_TEXT.static.backupCardTitle);
     setText('backupCardIntro', UI_TEXT.static.backupCardIntro);
     setText('btnExportConfig', UI_TEXT.static.exportConfig);