a11y + i18n: chat viewer filter placeholder + aria-label, status dot aria-hidden

Two unrelated small fixes bundled:

1. The chat viewer modal's filter input (chatViewerFilter) had a hardcoded "Filter..." placeholder that was never localized — every other filter input in the app routes its placeholder through UI_TEXT. Added queue.chatViewerFilterPlaceholder + queue.chatViewerFilterAria locale keys (DE: "Chat filtern..." / "Chatnachrichten filtern"; EN: "Filter chat..." / "Filter chat messages") and wired them through renderer-texts so the placeholder now matches the active language and screen readers get a proper accessible name on the input.

2. The status-bar's coloured dot (statusDot) had no aria-hidden — screen readers would read it as a generic element with no meaning. The status text right next to it already carries the same information ("Verbunden" / "Nicht verbunden"), so the dot is purely decorative. Added aria-hidden="true".

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
xRangerDE 2026-05-11 08:49:17 +02:00
parent 3603caed21
commit 773addb279
4 changed files with 7 additions and 1 deletions

View File

@ -802,7 +802,7 @@
<div class="status-bar"> <div class="status-bar">
<div class="status-indicator"> <div class="status-indicator">
<div class="status-dot" id="statusDot"></div> <div class="status-dot" id="statusDot" aria-hidden="true"></div>
<span id="statusText">Nicht verbunden</span> <span id="statusText">Nicht verbunden</span>
</div> </div>
<span id="statusBarQueueSummary" class="status-bar-queue-summary"></span> <span id="statusBarQueueSummary" class="status-bar-queue-summary"></span>

View File

@ -297,6 +297,8 @@ const UI_TEXT_DE = {
viewChat: 'Chat ansehen', viewChat: 'Chat ansehen',
viewChatLoading: 'Lade Chat...', viewChatLoading: 'Lade Chat...',
viewChatFailed: 'Chat-Datei konnte nicht gelesen werden', viewChatFailed: 'Chat-Datei konnte nicht gelesen werden',
chatViewerFilterPlaceholder: 'Chat filtern...',
chatViewerFilterAria: 'Chatnachrichten filtern',
viewChatCount: '{count} Nachrichten', viewChatCount: '{count} Nachrichten',
viewChatTruncatedSuffix: ' (gekuerzt)', viewChatTruncatedSuffix: ' (gekuerzt)',
viewEvents: 'Events ansehen', viewEvents: 'Events ansehen',

View File

@ -297,6 +297,8 @@ const UI_TEXT_EN = {
viewChat: 'View chat', viewChat: 'View chat',
viewChatLoading: 'Loading chat...', viewChatLoading: 'Loading chat...',
viewChatFailed: 'Could not read chat file', viewChatFailed: 'Could not read chat file',
chatViewerFilterPlaceholder: 'Filter chat...',
chatViewerFilterAria: 'Filter chat messages',
viewChatCount: '{count} messages', viewChatCount: '{count} messages',
viewChatTruncatedSuffix: ' (truncated)', viewChatTruncatedSuffix: ' (truncated)',
viewEvents: 'View events', viewEvents: 'View events',

View File

@ -291,6 +291,8 @@ function applyLanguageToStaticUI(): void {
setPlaceholder('vodFilterInput', UI_TEXT.vods.filterPlaceholder); setPlaceholder('vodFilterInput', UI_TEXT.vods.filterPlaceholder);
setTitle('vodFilterClearBtn', UI_TEXT.vods.filterClearTitle); setTitle('vodFilterClearBtn', UI_TEXT.vods.filterClearTitle);
setAriaLabel('vodFilterClearBtn', UI_TEXT.vods.filterClearTitle); setAriaLabel('vodFilterClearBtn', UI_TEXT.vods.filterClearTitle);
setPlaceholder('chatViewerFilter', UI_TEXT.queue.chatViewerFilterPlaceholder);
setAriaLabel('chatViewerFilter', UI_TEXT.queue.chatViewerFilterAria);
setText('vodSortLabel', UI_TEXT.vods.sortLabel); setText('vodSortLabel', UI_TEXT.vods.sortLabel);
if (typeof refreshVodSortSelectLabels === 'function') { if (typeof refreshVodSortSelectLabels === 'function') {
refreshVodSortSelectLabels(); refreshVodSortSelectLabels();