From 43924fd51f31793a3bccb6acf994cabe9dfbbc33 Mon Sep 17 00:00:00 2001
From: xRangerDE <xRangerDE@24-music.de>
Date: Mon, 11 May 2026 08:08:08 +0200
Subject: [PATCH] a11y: aria-hidden on three decorative middle-dot separators
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Three places in the renderer use a literal middle-dot character (· / &middot;) as a visual separator between two label components:

- Sidebar streamer-section counter: "12 · 3 live"
- Stats top-streamers row sub-label: "streamerName · 5 files"
- Stats size-bucket row sub-label: "count · size"

Screen readers either announce "middle dot" verbatim or skip it depending on the implementation — neither is useful information. Wrapped each dot in <span aria-hidden="true"> so the assistive-tech read-out becomes "12 3 live" / "streamerName 5 files" / "count size" — the meaningful parts only.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/renderer-stats.ts     | 4 ++--
 src/renderer-streamers.ts | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/renderer-stats.ts b/src/renderer-stats.ts
index b80d7f9..63d8960 100644
--- a/src/renderer-stats.ts
+++ b/src/renderer-stats.ts
@@ -82,7 +82,7 @@ function renderStatsTopStreamers(top: ArchiveStatsTopStreamer[], totalBytes: num
         return `
             <div class="stats-top-row">
                 <div class="stats-top-meta">
-                    <span><strong>${escapeStatsHtml(s.streamer)}</strong> <span class="stats-top-meta-sub">&middot; ${s.fileCount} ${escapeStatsHtml(UI_TEXT.static.statsFiles)}</span></span>
+                    <span><strong>${escapeStatsHtml(s.streamer)}</strong> <span class="stats-top-meta-sub"><span aria-hidden="true">&middot;</span> ${s.fileCount} ${escapeStatsHtml(UI_TEXT.static.statsFiles)}</span></span>
                     <span class="stats-top-meta-sub">${formatBytesForStats(s.bytes)} <span class="stats-top-share">(${sharePct}%)</span></span>
                 </div>
                 <div class="stats-top-bar-track">
@@ -153,7 +153,7 @@ function renderStatsSizeBuckets(buckets: ArchiveStatsBucket[]): void {
             <div class="stats-bucket-row">
                 <div class="stats-bucket-meta">
                     <span>${escapeStatsHtml(b.label)}</span>
-                    <span class="stats-bucket-meta-sub">${b.count} &middot; ${formatBytesForStats(b.bytes)}</span>
+                    <span class="stats-bucket-meta-sub">${b.count} <span aria-hidden="true">&middot;</span> ${formatBytesForStats(b.bytes)}</span>
                 </div>
                 <div class="stats-bucket-bar-track">
                     <div class="stats-bucket-bar-fill" style="width: ${pct}%;"></div>
diff --git a/src/renderer-streamers.ts b/src/renderer-streamers.ts
index 3112736..4e56619 100644
--- a/src/renderer-streamers.ts
+++ b/src/renderer-streamers.ts
@@ -448,7 +448,7 @@ function renderStreamers(): void {
         if (all.length === 0) {
             counter.textContent = '';
         } else if (liveCount > 0) {
-            counter.innerHTML = `${all.length} <span class="streamer-section-counter-divider">·</span> <span class="streamer-section-counter-live">${liveCount} live</span>`;
+            counter.innerHTML = `${all.length} <span class="streamer-section-counter-divider" aria-hidden="true">·</span> <span class="streamer-section-counter-live">${liveCount} live</span>`;
         } else {
             counter.textContent = String(all.length);
         }