fix(quick-260921-bi2): a11y - Beschriftungen an Felder binden (22 Fundstellen)

noLabelWithoutControl (22) auf 0: jede Beschriftung ueber htmlFor/id an ihr
Feld gebunden, in Formularen mit wiederholten Zeilen ueber praefixierte,
seitenweit eindeutige Kennungen (z.B. ldap-*, user-*, tenant-*).

Sonderfall calendar-source-form.tsx: die Farbauswahl beschriftet eine ganze
Gruppe von Farb-Schaltflaechen, kein einzelnes Feld. Dafuer fieldset/legend
statt htmlFor/id (Rand/Abstand zurueckgesetzt, damit sich am Erscheinungsbild
nichts aendert) -- eine Umwandlung in <span> haette die Assoziation entfernt
statt sie herzustellen, darum nicht gewaehlt.

Damit steht der gesamte Lint-Rueckstand bei 465 (386 echt, 79 Test),
Fehlerstufe 0 -- Zielwert dieses Vorgangs erreicht. Die fuenf zurueck-
gestellten Regeln (noNoninteractiveElementInteractions, useKeyWithClick-
Events, noStaticElementInteractions, useAriaPropsSupportedByRole,
noAutofocus) stehen unveraendert bei 11/5/5/5/4.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TPPB4ApQxzSU1rwV2Ffj9J

apps/web/src/app/(portal)/admin/groups/components/GroupFormModal.tsx

@@ -83,8 +83,9 @@ export function GroupFormModal({ group, onClose, onSaved }: GroupFormModalProps)
         </h2>
         <form onSubmit={handleSubmit} className="space-y-4">
           <div className="space-y-2">
-            <label className="text-sm font-medium text-foreground">{t('name')}</label>
+            <label htmlFor="group-name" className="text-sm font-medium text-foreground">{t('name')}</label>
             <input
+              id="group-name"
               type="text"
               required
               disabled={isImported}
@@ -113,10 +114,11 @@ export function GroupFormModal({ group, onClose, onSaved }: GroupFormModalProps)
               </p>
 
               <div className="space-y-2">
-                <label className="text-sm font-medium text-foreground">
+                <label htmlFor="group-internal-name" className="text-sm font-medium text-foreground">
                   {t('internalName')}
                 </label>
                 <input
+                  id="group-internal-name"
                   type="text"
                   value={internalName}
                   onChange={(e) => setInternalName(e.target.value)}

apps/web/src/app/(portal)/admin/ldap/page.tsx

@@ -557,10 +557,11 @@ export default function AdminLdapPage() {
         <form onSubmit={handleSave} className="space-y-4">
           <div className="grid gap-4 md:grid-cols-2">
             <div className="space-y-2">
-              <label className="text-sm font-medium text-foreground">
+              <label htmlFor="ldap-server-url" className="text-sm font-medium text-foreground">
                 {t('serverUrl')}
               </label>
               <input
+                id="ldap-server-url"
                 type="text"
                 value={formData.serverUrl}
                 onChange={(e) => setFormData({ ...formData, serverUrl: e.target.value })}
@@ -570,10 +571,11 @@ export default function AdminLdapPage() {
               />
             </div>
             <div className="space-y-2">
-              <label className="text-sm font-medium text-foreground">
+              <label htmlFor="ldap-base-dn" className="text-sm font-medium text-foreground">
                 {t('baseDn')}
               </label>
               <textarea
+                id="ldap-base-dn"
                 value={formData.baseDn}
                 onChange={(e) => setFormData({ ...formData, baseDn: e.target.value })}
                 placeholder={'dc=example,dc=com\nou=extern,dc=example,dc=com'}
@@ -584,10 +586,11 @@ export default function AdminLdapPage() {
               <p className="text-xs text-muted-foreground">{t('baseDnHint')}</p>
             </div>
             <div className="space-y-2">
-              <label className="text-sm font-medium text-foreground">
+              <label htmlFor="ldap-bind-dn" className="text-sm font-medium text-foreground">
                 {t('bindDn')}
               </label>
               <input
+                id="ldap-bind-dn"
                 type="text"
                 value={formData.bindDn}
                 onChange={(e) => setFormData({ ...formData, bindDn: e.target.value })}
@@ -596,10 +599,11 @@ export default function AdminLdapPage() {
               />
             </div>
             <div className="space-y-2">
-              <label className="text-sm font-medium text-foreground">
+              <label htmlFor="ldap-bind-password" className="text-sm font-medium text-foreground">
                 {t('bindPassword')}
               </label>
               <input
+                id="ldap-bind-password"
                 type="password"
                 value={formData.bindPassword}
                 onChange={(e) => setFormData({ ...formData, bindPassword: e.target.value })}
@@ -609,10 +613,11 @@ export default function AdminLdapPage() {
             </div>
           </div>
           <div className="space-y-2">
-            <label className="text-sm font-medium text-foreground">
+            <label htmlFor="ldap-search-filter" className="text-sm font-medium text-foreground">
               {t('searchFilter')}
             </label>
             <input
+              id="ldap-search-filter"
               type="text"
               value={formData.searchFilter}
               onChange={(e) => setFormData({ ...formData, searchFilter: e.target.value })}
@@ -753,10 +758,11 @@ export default function AdminLdapPage() {
           {showMappingForm && (
             <form onSubmit={handleAddMapping} className="mt-4 flex items-end gap-3">
               <div className="space-y-1">
-                <label className="text-xs font-medium text-muted-foreground">
+                <label htmlFor="ldap-mapping-ldap-field" className="text-xs font-medium text-muted-foreground">
                   {t('fieldMapping.ldapField')}
                 </label>
                 <input
+                  id="ldap-mapping-ldap-field"
                   type="text"
                   value={newMapping.ldapField}
                   onChange={(e) => setNewMapping({ ...newMapping, ldapField: e.target.value })}
@@ -765,10 +771,11 @@ export default function AdminLdapPage() {
                 />
               </div>
               <div className="space-y-1">
-                <label className="text-xs font-medium text-muted-foreground">
+                <label htmlFor="ldap-mapping-tessera-field" className="text-xs font-medium text-muted-foreground">
                   {t('fieldMapping.tesseraField')}
                 </label>
                 <input
+                  id="ldap-mapping-tessera-field"
                   type="text"
                   value={newMapping.tesseraField}
                   onChange={(e) => setNewMapping({ ...newMapping, tesseraField: e.target.value })}
@@ -860,10 +867,11 @@ export default function AdminLdapPage() {
 
           <div className="flex items-end gap-3 mb-4">
             <div className="flex-1 space-y-1">
-              <label className="text-xs font-medium text-muted-foreground">
+              <label htmlFor="ldap-group-manual-dn" className="text-xs font-medium text-muted-foreground">
                 {t('groupFilter.manualDn')}
               </label>
               <input
+                id="ldap-group-manual-dn"
                 type="text"
                 value={manualDn}
                 onChange={(e) => setManualDn(e.target.value)}
@@ -1168,10 +1176,11 @@ export default function AdminLdapPage() {
 
           <div className="flex items-end gap-3 mb-4">
             <div className="flex-1 space-y-1">
-              <label className="text-xs font-medium text-muted-foreground">
+              <label htmlFor="ldap-exclude-username" className="text-xs font-medium text-muted-foreground">
                 {t('userExclude.username')}
               </label>
               <input
+                id="ldap-exclude-username"
                 type="text"
                 value={newExcludeUser}
                 onChange={(e) => setNewExcludeUser(e.target.value)}
@@ -1243,11 +1252,12 @@ export default function AdminLdapPage() {
             {/* Sync interval */}
             <div className="flex items-center gap-4">
               <div className="space-y-1">
-                <label className="text-sm font-medium text-foreground">
+                <label htmlFor="ldap-sync-interval" className="text-sm font-medium text-foreground">
                   {t('sync.interval')}
                 </label>
                 <div className="flex items-center gap-2">
                   <input
+                    id="ldap-sync-interval"
                     type="number"
                     min={0}
                     value={formData.syncIntervalMin}

apps/web/src/app/(portal)/admin/tenants/page.tsx

@@ -250,10 +250,11 @@ export default function AdminTenantsPage() {
             </h2>
             <form onSubmit={handleSubmit} className="space-y-4">
               <div className="space-y-2">
-                <label className="text-sm font-medium text-foreground">
+                <label htmlFor="tenant-name" className="text-sm font-medium text-foreground">
                   {t('name')}
                 </label>
                 <input
+                  id="tenant-name"
                   type="text"
                   required
                   value={formData.name}
@@ -265,10 +266,11 @@ export default function AdminTenantsPage() {
               </div>
               {!editingTenant && (
                 <div className="space-y-2">
-                  <label className="text-sm font-medium text-foreground">
+                  <label htmlFor="tenant-slug" className="text-sm font-medium text-foreground">
                     {t('slug')}
                   </label>
                   <input
+                    id="tenant-slug"
                     type="text"
                     required
                     pattern="^[a-z0-9-]+$"

apps/web/src/app/(portal)/admin/users/page.tsx

@@ -355,10 +355,11 @@ export default function AdminUsersPage() {
             </h2>
             <form onSubmit={handleSubmit} className="space-y-4">
               <div className="space-y-2">
-                <label className="text-sm font-medium text-foreground">
+                <label htmlFor="user-username" className="text-sm font-medium text-foreground">
                   {t('username')}
                 </label>
                 <input
+                  id="user-username"
                   type="text"
                   required
                   value={formData.username}
@@ -369,10 +370,11 @@ export default function AdminUsersPage() {
                 />
               </div>
               <div className="space-y-2">
-                <label className="text-sm font-medium text-foreground">
+                <label htmlFor="user-email" className="text-sm font-medium text-foreground">
                   {t('email')}
                 </label>
                 <input
+                  id="user-email"
                   type="email"
                   required
                   value={formData.email}
@@ -383,7 +385,7 @@ export default function AdminUsersPage() {
                 />
               </div>
               <div className="space-y-2">
-                <label className="text-sm font-medium text-foreground">
+                <label htmlFor="user-password" className="text-sm font-medium text-foreground">
                   {t('password')}
                   {editingUser && (
                     <span className="ml-1 text-xs text-muted-foreground">
@@ -392,6 +394,7 @@ export default function AdminUsersPage() {
                   )}
                 </label>
                 <input
+                  id="user-password"
                   type="password"
                   required={!editingUser}
                   minLength={8}
@@ -403,10 +406,11 @@ export default function AdminUsersPage() {
                 />
               </div>
               <div className="space-y-2">
-                <label className="text-sm font-medium text-foreground">
+                <label htmlFor="user-display-name" className="text-sm font-medium text-foreground">
                   {t('displayName')}
                 </label>
                 <input
+                  id="user-display-name"
                   type="text"
                   value={formData.displayName}
                   onChange={(e) =>
@@ -416,10 +420,11 @@ export default function AdminUsersPage() {
                 />
               </div>
               <div className="space-y-2">
-                <label className="text-sm font-medium text-foreground">
+                <label htmlFor="user-role" className="text-sm font-medium text-foreground">
                   {t('role')}
                 </label>
                 <select
+                  id="user-role"
                   value={formData.role}
                   onChange={(e) =>
                     setFormData({

apps/web/src/app/(portal)/marketplace/components/TenantContextSelector.tsx

@@ -38,13 +38,14 @@ export function TenantContextSelector() {
 
   return (
     <div className="bg-muted/50 rounded-lg p-3 mb-4 border border-border">
-      <label className="block text-xs font-semibold text-muted-foreground mb-1.5">
+      <label htmlFor="tenant-context-select" className="block text-xs font-semibold text-muted-foreground mb-1.5">
         {t('tenantContextLabel')}
       </label>
       {loading ? (
         <span className="text-sm text-muted-foreground">Laden...</span>
       ) : (
         <select
+          id="tenant-context-select"
           onChange={(e) => setSelectedTenantId(e.target.value || null)}
           defaultValue=""
           className="bg-card border border-border rounded-md px-3 py-1.5 text-sm min-w-[200px]"

apps/web/src/app/(portal)/modules/cert-manager/components/PasswordField.tsx

@@ -18,11 +18,12 @@ export function PasswordField({ value, onChange, show }: PasswordFieldProps) {
 
   return (
     <div className="space-y-1">
-      <label className="block text-sm text-foreground">
+      <label htmlFor="cert-manager-password" className="block text-sm text-foreground">
         {t('password.label')}
       </label>
       <div className="relative flex items-center">
         <input
+          id="cert-manager-password"
           type={revealed ? 'text' : 'password'}
           value={value}
           onChange={(e) => onChange(e.target.value)}

apps/web/src/components/settings/calendar-source-form.tsx

@@ -324,9 +324,13 @@ export function CalendarSourceForm({
         </div>
       )}
 
-      {/* Color */}
-      <div>
-        <label className="mb-1 block text-sm text-foreground">{t('calendar.formFieldColor')}</label>
+      {/* Color -- a11y/noLabelWithoutControl: kein htmlFor/id, weil dieses
+          Label eine ganze Gruppe von Farb-Schaltflaechen beschriftet, kein
+          einzelnes Feld. fieldset/legend ist die dafuer vorgesehene Semantik
+          (Rand/Abstand zurueckgesetzt, damit sich am Erscheinungsbild nichts
+          aendert). */}
+      <fieldset className="m-0 border-0 p-0">
+        <legend className="mb-1 block text-sm text-foreground">{t('calendar.formFieldColor')}</legend>
         <div className="flex gap-2">
           {SOURCE_COLOR_PALETTE.map((c) => (
             <button
@@ -343,7 +347,7 @@ export function CalendarSourceForm({
             />
           ))}
         </div>
-      </div>
+      </fieldset>
 
       {/* Actions */}
       <div className="flex flex-wrap gap-3 pt-2">