From b3eeca50b3e22c5dc89f00cfa7a265636ff6802c Mon Sep 17 00:00:00 2001
From: Ferdinand Urban <urban@team-tradeo.de>
Date: Wed, 3 Jun 2026 13:06:50 +0000
Subject: [PATCH] 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>
---
 js/calendar.js  | 6 ++++++
 js/employees.js | 2 ++
 js/history.js   | 1 +
 3 files changed, 9 insertions(+)

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