Administrator/Twitch-VOD-Manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 212 Wiki Activity

a11y: aria-hidden on three decorative middle-dot separators

Browse Source 
Three places in the renderer use a literal middle-dot character (· / ·) 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>
This commit is contained in:
xRangerDE 2026-05-11 08:08:08 +02:00
parent 1fb33aa6cc
commit 43924fd51f
2 changed files with 3 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/renderer-stats.ts
View File

@ -82,7 +82,7 @@ function renderStatsTopStreamers(top: ArchiveStatsTopStreamer[], totalBytes: num
return ` return `
<div class="stats-top-row"> <div class="stats-top-row">
<div class="stats-top-meta"> <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> <span class="stats-top-meta-sub">${formatBytesForStats(s.bytes)} <span class="stats-top-share">(${sharePct}%)</span></span>
</div> </div>
<div class="stats-top-bar-track"> <div class="stats-top-bar-track">
@ -153,7 +153,7 @@ function renderStatsSizeBuckets(buckets: ArchiveStatsBucket[]): void {
<div class="stats-bucket-row"> <div class="stats-bucket-row">
<div class="stats-bucket-meta"> <div class="stats-bucket-meta">
<span>${escapeStatsHtml(b.label)}</span> <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>
<div class="stats-bucket-bar-track"> <div class="stats-bucket-bar-track">
<div class="stats-bucket-bar-fill" style="width: ${pct}%;"></div> <div class="stats-bucket-bar-fill" style="width: ${pct}%;"></div>

2
src/renderer-streamers.ts
View File

@ -448,7 +448,7 @@ function renderStreamers(): void {
if (all.length === 0) { if (all.length === 0) {
counter.textContent = ''; counter.textContent = '';
} else if (liveCount > 0) { } 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 { } else {
counter.textContent = String(all.length); counter.textContent = String(all.length);
} }