a11y: associate form labels with inputs (#15)

Month/year/slots selects get ids with matching <label for>; the employee name
input, the Excel import file input and the JSON import file input get
aria-labels so screen readers announce them.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
ferdi2goandClaude Opus 4.8 committed 2026-06-03 13:06:50 +00:00
1 parent 7ab2911c2f
commit b3eeca50b3
3 files changed
+9

No files matched your search

+6
View File
@@ -28,8 +28,10 @@ export function renderCalendar() {
const monthLabel = document.createElement('label'); const monthLabel = document.createElement('label');
monthLabel.textContent = 'Monat:'; monthLabel.textContent = 'Monat:';
monthLabel.htmlFor = 'cal-month';
const monthSel = document.createElement('select'); const monthSel = document.createElement('select');
monthSel.id = 'cal-month';
MONTHS.forEach((m, i) => { MONTHS.forEach((m, i) => {
const opt = document.createElement('option'); const opt = document.createElement('option');
opt.value = String(i + 1); opt.value = String(i + 1);
@@ -40,8 +42,10 @@ export function renderCalendar() {
const yearLabel = document.createElement('label'); const yearLabel = document.createElement('label');
yearLabel.textContent = 'Jahr:'; yearLabel.textContent = 'Jahr:';
yearLabel.htmlFor = 'cal-year';
const yearSel = document.createElement('select'); const yearSel = document.createElement('select');
yearSel.id = 'cal-year';
const thisYear = new Date().getFullYear(); const thisYear = new Date().getFullYear();
for (let y = thisYear - 1; y <= thisYear + 2; y++) { for (let y = thisYear - 1; y <= thisYear + 2; y++) {
const opt = document.createElement('option'); const opt = document.createElement('option');
@@ -53,8 +57,10 @@ export function renderCalendar() {
const slotsLabel = document.createElement('label'); const slotsLabel = document.createElement('label');
slotsLabel.textContent = 'Pro Tag:'; slotsLabel.textContent = 'Pro Tag:';
slotsLabel.htmlFor = 'cal-slots';
const slotsSel = document.createElement('select'); const slotsSel = document.createElement('select');
slotsSel.id = 'cal-slots';
for (let n = 1; n <= 5; n++) { for (let n = 1; n <= 5; n++) {
const opt = document.createElement('option'); const opt = document.createElement('option');
opt.value = String(n); opt.value = String(n);
+2
View File
@@ -22,6 +22,7 @@ export function renderEmployees() {
nameInput.id = 'emp-name-input'; nameInput.id = 'emp-name-input';
nameInput.type = 'text'; nameInput.type = 'text';
nameInput.placeholder = 'Name eingeben...'; nameInput.placeholder = 'Name eingeben...';
nameInput.setAttribute('aria-label', 'Mitarbeitername');
nameInput.style.width = '220px'; nameInput.style.width = '220px';
const addBtn = document.createElement('button'); const addBtn = document.createElement('button');
@@ -37,6 +38,7 @@ export function renderEmployees() {
fileInput.id = 'emp-excel-input'; fileInput.id = 'emp-excel-input';
fileInput.type = 'file'; fileInput.type = 'file';
fileInput.accept = '.xlsx,.xls'; fileInput.accept = '.xlsx,.xls';
fileInput.setAttribute('aria-label', 'Excel-Datei mit Mitarbeiternamen importieren');
fileInput.style.display = 'none'; fileInput.style.display = 'none';
row.append(nameInput, addBtn, excelBtn, fileInput); row.append(nameInput, addBtn, excelBtn, fileInput);
+1
View File
@@ -40,6 +40,7 @@ export function renderDataTab() {
const fileInput = document.createElement('input'); const fileInput = document.createElement('input');
fileInput.type = 'file'; fileInput.type = 'file';
fileInput.accept = '.json'; fileInput.accept = '.json';
fileInput.setAttribute('aria-label', 'JSON-Datensicherung importieren');
fileInput.style.display = 'none'; fileInput.style.display = 'none';
loadRow.append(loadBtn, fileInput); loadRow.append(loadBtn, fileInput);
saveLoadCol.appendChild(loadRow); saveLoadCol.appendChild(loadRow);