Compare commits

...

2 Commits

Author SHA1 Message Date
xRangerDE
71fedcb34c release: 4.6.112 aria-label on queue retry button + streamer live-dot
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-11 08:23:34 +02:00
xRangerDE
1da5589b1a a11y: aria-label on queue retry button + streamer live-dot
Two icon-only elements that had a title tooltip but no programmatic accessible-name source for screen readers:

- .queue-retry-btn: a small button on failed queue items, its only visible content is the unicode glyph U+21BB (↻). Screen readers would read it as "clockwise open circle arrow" or skip it entirely. Added aria-label using the already-translated UI_TEXT.queue.retryItem string (same value as the title). Also added type="button" so it doesn't default to submit semantics if the queue is ever wrapped in a form.

- .streamer-live-dot: the small red dot that appears next to a streamer name when they're currently live. It's pure CSS styling on an empty span, so screen readers had nothing to read — losing the live state for assistive tech. Added role="img" + aria-label using the existing UI_TEXT.streamers.liveNowTooltip string, so screen readers announce "Live now" alongside the streamer name.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-11 08:23:21 +02:00
4 changed files with 8 additions and 5 deletions

4
package-lock.json generated
View File

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

View File

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

View File

@ -573,7 +573,7 @@ function renderQueue(): void {
${renderQueueItemFileActions(item)}
</div>
</div>
${item.status === 'error' ? `<button class="queue-retry-btn" title="${escapeHtml(UI_TEXT.queue.retryItem)}" onclick="retryQueueItem('${item.id}')">&#x21bb;</button>` : ''}
${item.status === 'error' ? `<button class="queue-retry-btn" type="button" title="${escapeHtml(UI_TEXT.queue.retryItem)}" aria-label="${escapeHtml(UI_TEXT.queue.retryItem)}" onclick="retryQueueItem('${item.id}')">&#x21bb;</button>` : ''}
<span class="remove" role="button" tabindex="0" aria-label="${escapeHtml(UI_TEXT.streamers.removeAria)}" onclick="removeFromQueue('${item.id}')" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();removeFromQueue('${item.id}');}">x</span>
</div>
`;

View File

@ -479,7 +479,10 @@ function renderStreamers(): void {
if (isLive) {
const dot = document.createElement('span');
dot.className = 'streamer-live-dot';
dot.title = UI_TEXT.streamers.liveNowTooltip || 'Live now';
const liveLabel = UI_TEXT.streamers.liveNowTooltip || 'Live now';
dot.title = liveLabel;
dot.setAttribute('role', 'img');
dot.setAttribute('aria-label', liveLabel);
item.appendChild(dot);
}