From 8719b0ee1e50ec02772f470df050a1241dd4a3ff Mon Sep 17 00:00:00 2001
From: Claude Fable 5 <fable-5@waidele.info>
Date: Tue, 21 Jul 2026 14:26:54 +0200
Subject: [PATCH] =?UTF-8?q?#168:=20Formulare=20=E2=80=94=20Fehler-Verdraht?=
 =?UTF-8?q?ung=20und=20Namensl=C3=BCcken?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Der Field-Baustein verdrahtet Hinweis/Fehler jetzt per aria-describedby
und aria-invalid mit dem Eingabefeld (cloneElement auf das einzelne
Kind; Fragmente bleiben unangetastet) — Screenreader nennen den Fehler
damit auch beim Feld-Fokus. Quota-Typ-Select mit Namen; die leeren
Aktions-/Erledigt-Spaltenköpfe in API-Tokens, Feed-Tokens, Sitzungen
und der Aufgabenübersicht (NodeView UND Server-Renderpfad) tragen
visually-hidden-Beschriftungen.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01AGM8jo3hwoV9wsCVGfy8iq
---
 apps/api/src/pages/tasks.service.ts           |  3 ++-
 apps/web/src/api-tokens/ApiTokensSection.tsx  |  4 +++-
 apps/web/src/api-tokens/FeedTokensSection.tsx |  4 +++-
 apps/web/src/components/forms.tsx             | 22 ++++++++++++++++---
 apps/web/src/editor/nodes/task-overview.tsx   |  4 +++-
 apps/web/src/pages/QuotaManager.tsx           |  1 +
 apps/web/src/pages/SettingsPage.tsx           |  4 +++-
 packages/shared/i18n/de/quotas.json           |  3 ++-
 packages/shared/i18n/de/tasks.json            |  1 +
 packages/shared/i18n/en/quotas.json           |  3 ++-
 packages/shared/i18n/en/tasks.json            |  1 +
 11 files changed, 40 insertions(+), 10 deletions(-)

diff --git a/apps/api/src/pages/tasks.service.ts b/apps/api/src/pages/tasks.service.ts
index 3298de6..2a58587 100644
--- a/apps/api/src/pages/tasks.service.ts
+++ b/apps/api/src/pages/tasks.service.ts
@@ -171,7 +171,8 @@ export class TasksService {
     }
     return (
       `<table class="dt-task-overview-table"><thead><tr>` +
-      `<th></th><th>${escapeHtml(t('colTask'))}</th><th>${escapeHtml(t('colMentions'))}</th>` +
+      `<th><span class="visually-hidden">${escapeHtml(t('colDone'))}</span></th>` +
+      `<th>${escapeHtml(t('colTask'))}</th><th>${escapeHtml(t('colMentions'))}</th>` +
       `<th>${escapeHtml(t('colStart'))}</th><th>${escapeHtml(t('colDue'))}</th>` +
       `<th>${escapeHtml(t('colPage'))}</th>` +
       `</tr></thead><tbody>${rows.join('')}</tbody></table>`
diff --git a/apps/web/src/api-tokens/ApiTokensSection.tsx b/apps/web/src/api-tokens/ApiTokensSection.tsx
index d7895bf..22d0a9d 100644
--- a/apps/web/src/api-tokens/ApiTokensSection.tsx
+++ b/apps/web/src/api-tokens/ApiTokensSection.tsx
@@ -182,7 +182,9 @@ function TokenList({ tokens }: { tokens: ApiTokenView[] }): React.JSX.Element {
             <th>{t('list.lastUsed')}</th>
             <th>{t('list.expires')}</th>
             <th>{t('list.status')}</th>
-            <th></th>
+            <th>
+              <span className="visually-hidden">{t('common:tableActions')}</span>
+            </th>
           </tr>
         </thead>
         <tbody>
diff --git a/apps/web/src/api-tokens/FeedTokensSection.tsx b/apps/web/src/api-tokens/FeedTokensSection.tsx
index 30256d5..1b2e40d 100644
--- a/apps/web/src/api-tokens/FeedTokensSection.tsx
+++ b/apps/web/src/api-tokens/FeedTokensSection.tsx
@@ -91,7 +91,9 @@ export function FeedTokensSection(): React.JSX.Element {
               <th>{t('fields.name')}</th>
               <th>{t('list.created')}</th>
               <th>{t('list.lastUsed')}</th>
-              <th></th>
+              <th>
+                <span className="visually-hidden">{t('common:tableActions')}</span>
+              </th>
             </tr>
           </thead>
           <tbody>
diff --git a/apps/web/src/components/forms.tsx b/apps/web/src/components/forms.tsx
index ea9626c..c16a986 100644
--- a/apps/web/src/components/forms.tsx
+++ b/apps/web/src/components/forms.tsx
@@ -1,3 +1,4 @@
+import { cloneElement, isValidElement, useId } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { ApiError } from '../lib/api';
@@ -20,13 +21,28 @@ export function Field({
   children: React.ReactNode;
 }): React.JSX.Element {
   const { t } = useTranslation();
+  const noteId = useId();
+  // Tie the hint/error text to the control itself (#168, WCAG 3.3.1):
+  // screen readers then repeat it when the field receives focus. Only a
+  // single element child can be wired; fragments render unchanged.
+  const wired =
+    isValidElement(children) && (error || hint)
+      ? cloneElement(children as React.ReactElement<Record<string, unknown>>, {
+          'aria-describedby': noteId,
+          ...(error ? { 'aria-invalid': true } : {}),
+        })
+      : children;
   return (
     <label className="field">
       <span className="field__label">{label}</span>
-      {children}
-      {hint && !error && <span className="field__hint">{hint}</span>}
+      {wired}
+      {hint && !error && (
+        <span className="field__hint" id={noteId}>
+          {hint}
+        </span>
+      )}
       {error && (
-        <span className="field__error" role="alert">
+        <span className="field__error" role="alert" id={noteId}>
           {t(`errors:${error}`, t('errors:bad_request'))}
         </span>
       )}
diff --git a/apps/web/src/editor/nodes/task-overview.tsx b/apps/web/src/editor/nodes/task-overview.tsx
index 1ff1367..794153b 100644
--- a/apps/web/src/editor/nodes/task-overview.tsx
+++ b/apps/web/src/editor/nodes/task-overview.tsx
@@ -86,7 +86,9 @@ function TaskOverviewView({ editor }: NodeViewProps): React.JSX.Element {
         <table className="dt-task-overview-table">
           <thead>
             <tr>
-              <th></th>
+              <th>
+                <span className="visually-hidden">{t('colDone')}</span>
+              </th>
               <th>{t('colTask')}</th>
               <th>{t('colMentions')}</th>
               <th>{t('colStart')}</th>
diff --git a/apps/web/src/pages/QuotaManager.tsx b/apps/web/src/pages/QuotaManager.tsx
index 20dbd3e..1086755 100644
--- a/apps/web/src/pages/QuotaManager.tsx
+++ b/apps/web/src/pages/QuotaManager.tsx
@@ -63,6 +63,7 @@ export function QuotaManager(): React.JSX.Element {
         <select
           className="quota-manager__type"
           value={type}
+          aria-label={t('overrides.typeLabel')}
           onChange={(e) => setType(e.target.value as QuotaSubject)}
         >
           <option value="user">{t('overrides.user')}</option>
diff --git a/apps/web/src/pages/SettingsPage.tsx b/apps/web/src/pages/SettingsPage.tsx
index 48adb9f..d844019 100644
--- a/apps/web/src/pages/SettingsPage.tsx
+++ b/apps/web/src/pages/SettingsPage.tsx
@@ -255,7 +255,9 @@ function SessionsSection(): React.JSX.Element {
             <th>{t('settings:sessions.device')}</th>
             <th>{t('settings:sessions.created')}</th>
             <th>{t('settings:sessions.lastSeen')}</th>
-            <th></th>
+            <th>
+              <span className="visually-hidden">{t('common:tableActions')}</span>
+            </th>
           </tr>
         </thead>
         <tbody>
diff --git a/packages/shared/i18n/de/quotas.json b/packages/shared/i18n/de/quotas.json
index c307479..541ccb6 100644
--- a/packages/shared/i18n/de/quotas.json
+++ b/packages/shared/i18n/de/quotas.json
@@ -25,7 +25,8 @@
     "usage": "Nutzung",
     "set": "Setzen",
     "clear": "Löschen",
-    "overQuota": "über Kontingent"
+    "overQuota": "über Kontingent",
+    "typeLabel": "Geltungsbereich"
   },
   "keys": {
     "editors_per_pond": "Bearbeiter pro Teich",
diff --git a/packages/shared/i18n/de/tasks.json b/packages/shared/i18n/de/tasks.json
index 2405bef..5e3f986 100644
--- a/packages/shared/i18n/de/tasks.json
+++ b/packages/shared/i18n/de/tasks.json
@@ -1,6 +1,7 @@
 {
   "title": "Aufgabenübersicht",
   "editorCard": "Aufgabenübersicht — diese Seite und ihre Unterseiten",
+  "colDone": "Erledigt",
   "colTask": "Aufgabe",
   "colMentions": "Wer",
   "colStart": "Start",
diff --git a/packages/shared/i18n/en/quotas.json b/packages/shared/i18n/en/quotas.json
index 52e06bf..ffb1b5e 100644
--- a/packages/shared/i18n/en/quotas.json
+++ b/packages/shared/i18n/en/quotas.json
@@ -25,7 +25,8 @@
     "usage": "Usage",
     "set": "Set",
     "clear": "Clear",
-    "overQuota": "over quota"
+    "overQuota": "over quota",
+    "typeLabel": "Applies to"
   },
   "keys": {
     "editors_per_pond": "Editors per pond",
diff --git a/packages/shared/i18n/en/tasks.json b/packages/shared/i18n/en/tasks.json
index 40f9797..5f056e7 100644
--- a/packages/shared/i18n/en/tasks.json
+++ b/packages/shared/i18n/en/tasks.json
@@ -1,6 +1,7 @@
 {
   "title": "Task overview",
   "editorCard": "Task overview — this page and its subpages",
+  "colDone": "Done",
   "colTask": "Task",
   "colMentions": "Who",
   "colStart": "Start",