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',
|
||||
storageColumnLive: 'Live',
|
||||
storageColumnChat: 'Chat',
|
||||
storageColumnActionsAria: 'Aktionen',
|
||||
storageOpen: 'Oeffnen',
|
||||
storageOtherFolders: 'Andere Ordner im Download-Pfad',
|
||||
cleanupTitle: 'Auto-Cleanup',
|
||||
|
||||
@ -65,6 +65,7 @@ const UI_TEXT_EN = {
|
||||
storageColumnTotal: 'Total',
|
||||
storageColumnLive: 'Live',
|
||||
storageColumnChat: 'Chat',
|
||||
storageColumnActionsAria: 'Actions',
|
||||
storageOpen: 'Open',
|
||||
storageOtherFolders: 'Other folders in download path',
|
||||
cleanupTitle: 'Auto-cleanup',
|
||||
|
||||
@ -366,7 +366,12 @@ function renderStorageStats(stats: StorageStatsResult): void {
|
||||
];
|
||||
for (const h of headers) {
|
||||
const th = document.createElement('th');
|
||||
th.textContent = h;
|
||||
th.scope = 'col';
|
||||
if (h) {
|
||||
th.textContent = h;
|
||||
} else {
|
||||
th.setAttribute('aria-label', UI_TEXT.static.storageColumnActionsAria);
|
||||
}
|
||||
headRow.appendChild(th);
|
||||
}
|
||||
thead.appendChild(headRow);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user