a11y: scope=col + aria-label on storage stats table headers
The Storage card's per-streamer stats table was built without scope attributes on its <th> cells and the last column (the "Open" action column) had an empty header — screen readers couldn't tell which column a data cell belonged to once you tabbed into the rows, and the actions column had no announced name at all. Fixes: - All 6 column headers get scope="col" — explicit signal to screen readers that each <th> is a column header (the implicit <th>-inside-<thead> semantics work, but explicit scope is best practice for data tables and the de-facto standard for accessibility tooling validation) - The empty actions header gets aria-label set from a new storageColumnActionsAria locale key (DE: "Aktionen", EN: "Actions") so screen readers announce "Aktionen, Spaltenkopf" for that column instead of skipping over an unnamed header. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
3748e25d1d
commit
03b575cd1d
@ -65,6 +65,7 @@ const UI_TEXT_DE = {
|
|||||||
storageColumnTotal: 'Gesamt',
|
storageColumnTotal: 'Gesamt',
|
||||||
storageColumnLive: 'Live',
|
storageColumnLive: 'Live',
|
||||||
storageColumnChat: 'Chat',
|
storageColumnChat: 'Chat',
|
||||||
|
storageColumnActionsAria: 'Aktionen',
|
||||||
storageOpen: 'Oeffnen',
|
storageOpen: 'Oeffnen',
|
||||||
storageOtherFolders: 'Andere Ordner im Download-Pfad',
|
storageOtherFolders: 'Andere Ordner im Download-Pfad',
|
||||||
cleanupTitle: 'Auto-Cleanup',
|
cleanupTitle: 'Auto-Cleanup',
|
||||||
|
|||||||
@ -65,6 +65,7 @@ const UI_TEXT_EN = {
|
|||||||
storageColumnTotal: 'Total',
|
storageColumnTotal: 'Total',
|
||||||
storageColumnLive: 'Live',
|
storageColumnLive: 'Live',
|
||||||
storageColumnChat: 'Chat',
|
storageColumnChat: 'Chat',
|
||||||
|
storageColumnActionsAria: 'Actions',
|
||||||
storageOpen: 'Open',
|
storageOpen: 'Open',
|
||||||
storageOtherFolders: 'Other folders in download path',
|
storageOtherFolders: 'Other folders in download path',
|
||||||
cleanupTitle: 'Auto-cleanup',
|
cleanupTitle: 'Auto-cleanup',
|
||||||
|
|||||||
@ -366,7 +366,12 @@ function renderStorageStats(stats: StorageStatsResult): void {
|
|||||||
];
|
];
|
||||||
for (const h of headers) {
|
for (const h of headers) {
|
||||||
const th = document.createElement('th');
|
const th = document.createElement('th');
|
||||||
|
th.scope = 'col';
|
||||||
|
if (h) {
|
||||||
th.textContent = h;
|
th.textContent = h;
|
||||||
|
} else {
|
||||||
|
th.setAttribute('aria-label', UI_TEXT.static.storageColumnActionsAria);
|
||||||
|
}
|
||||||
headRow.appendChild(th);
|
headRow.appendChild(th);
|
||||||
}
|
}
|
||||||
thead.appendChild(headRow);
|
thead.appendChild(headRow);
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user