From f6f266e3d4cb3b183db9f14f692db84cbeed3170 Mon Sep 17 00:00:00 2001
From: xRangerDE <xRangerDE@24-music.de>
Date: Mon, 11 May 2026 08:42:10 +0200
Subject: [PATCH] a11y: localized aria-label + focus-visible on the 3 merge
 file-row buttons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The merge tab's per-file action buttons (▲ ▼ x — move up, move down, remove from list) were three icon-only buttons whose only visible content was the unicode glyph. No aria-label, no title, no focus-visible ring:

- Screen readers had nothing to announce — a keyboard user navigating the merge file list would tab through three unnamed buttons in a row.
- Sighted keyboard users had no visible focus indicator on .file-btn.

Three new locale keys (DE+EN) — merge.moveUpAria / moveDownAria / removeAria — give each button a translated aria-label and matching title tooltip. CSS adds .file-btn:focus-visible with the purple ring and a red variant for .file-btn.remove to match its red-on-hover colour family.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/renderer-locale-de.ts |  5 ++++-
 src/renderer-locale-en.ts |  5 ++++-
 src/renderer.ts           |  6 +++---
 src/styles.css            | 12 ++++++++++++
 4 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/renderer-locale-de.ts b/src/renderer-locale-de.ts
index 3ff2bae..aa5048d 100644
--- a/src/renderer-locale-de.ts
+++ b/src/renderer-locale-de.ts
@@ -457,7 +457,10 @@ const UI_TEXT_DE = {
         merging: 'Zusammenfugen...',
         merge: 'Zusammenfugen',
         success: 'Videos erfolgreich zusammengefugt!',
-        failed: 'Fehler beim Zusammenfugen der Videos.'
+        failed: 'Fehler beim Zusammenfugen der Videos.',
+        moveUpAria: 'Nach oben verschieben',
+        moveDownAria: 'Nach unten verschieben',
+        removeAria: 'Aus Liste entfernen'
     },
     mergeGroup: {
         btn: 'Zusammenfugen & Splitten',
diff --git a/src/renderer-locale-en.ts b/src/renderer-locale-en.ts
index 536f02c..eb2d277 100644
--- a/src/renderer-locale-en.ts
+++ b/src/renderer-locale-en.ts
@@ -457,7 +457,10 @@ const UI_TEXT_EN = {
         merging: 'Merging...',
         merge: 'Merge',
         success: 'Videos merged successfully!',
-        failed: 'Failed to merge videos.'
+        failed: 'Failed to merge videos.',
+        moveUpAria: 'Move up',
+        moveDownAria: 'Move down',
+        removeAria: 'Remove from list'
     },
     mergeGroup: {
         btn: 'Merge & Split',
diff --git a/src/renderer.ts b/src/renderer.ts
index 1a96755..8a070d9 100644
--- a/src/renderer.ts
+++ b/src/renderer.ts
@@ -1639,9 +1639,9 @@ function renderMergeFiles(): void {
                 <div class="file-order">${index + 1}</div>
                 <div class="file-name" title="${file}">${name}</div>
                 <div class="file-actions">
-                    <button type="button" class="file-btn" onclick="moveMergeFile(${index}, -1)" ${index === 0 ? 'disabled' : ''}>&#9650;</button>
-                    <button type="button" class="file-btn" onclick="moveMergeFile(${index}, 1)" ${index === mergeFiles.length - 1 ? 'disabled' : ''}>&#9660;</button>
-                    <button type="button" class="file-btn remove" onclick="removeMergeFile(${index})">x</button>
+                    <button type="button" class="file-btn" aria-label="${escapeHtml(UI_TEXT.merge.moveUpAria)}" title="${escapeHtml(UI_TEXT.merge.moveUpAria)}" onclick="moveMergeFile(${index}, -1)" ${index === 0 ? 'disabled' : ''}>&#9650;</button>
+                    <button type="button" class="file-btn" aria-label="${escapeHtml(UI_TEXT.merge.moveDownAria)}" title="${escapeHtml(UI_TEXT.merge.moveDownAria)}" onclick="moveMergeFile(${index}, 1)" ${index === mergeFiles.length - 1 ? 'disabled' : ''}>&#9660;</button>
+                    <button type="button" class="file-btn remove" aria-label="${escapeHtml(UI_TEXT.merge.removeAria)}" title="${escapeHtml(UI_TEXT.merge.removeAria)}" onclick="removeMergeFile(${index})">x</button>
                 </div>
             </div>
         `;
diff --git a/src/styles.css b/src/styles.css
index 334c6de..3df3087 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -3083,10 +3083,22 @@ select option {
     color: var(--text);
 }
 
+.file-item .file-btn:focus-visible {
+    outline: none;
+    border-radius: 4px;
+    box-shadow: 0 0 0 2px rgba(145, 70, 255, 0.65);
+    color: var(--text);
+}
+
 .file-item .file-btn.remove:hover {
     color: var(--error);
 }
 
+.file-item .file-btn.remove:focus-visible {
+    box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.65);
+    color: var(--error);
+}
+
 .merge-actions {
     display: flex;
     gap: 10px;