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:
1 parent
7ab2911c2f
commit
b3eeca50b3
3 files changed
+9
No files matched your search
@@ -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);
|
||||||
|
|||||||
@@ -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);
|
||||||
|
|||||||
@@ -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);
|
||||||
|
|||||||
Reference in new issue
Block a user