From 4c3a78e087a7b221f685bff62a2db05bd428ca82 Mon Sep 17 00:00:00 2001
From: SToneX <shitianxin@gmail.com>
Date: Mon, 27 Jul 2026 21:04:10 +0800
Subject: [PATCH] react-doctor: label the notification channel field controls
 (control-has-associated-label)

The New-channel form rendered a visible <label> with no htmlFor next to
either a <select> (Slack channel picker) or an <input>, so the control had
no accessible name at all - a screen reader announced nothing for it.

Give each field one id (notif-field-<key>) shared by the two mutually
exclusive control branches and point the label at it. Same family as the
merged #125 and #157.

Verified: control-has-associated-label fully cleared (1 to 0),
label-has-associated-control 11 to 10, Accessibility 13 to 11 warnings, no
new findings; pnpm -r typecheck clean, server suite 702 passed.
---
 packages/server/src/components/NotificationsModal.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/server/src/components/NotificationsModal.tsx b/packages/server/src/components/NotificationsModal.tsx
index 5178197..12e2b7e 100644
--- a/packages/server/src/components/NotificationsModal.tsx
+++ b/packages/server/src/components/NotificationsModal.tsx
@@ -262,12 +262,18 @@ export function NotificationsModal({ open, onClose }: { open: boolean; onClose:
             if (f.requires && !fields[f.requires]?.trim()) return null
             const isSlackChannel = adding === 'slack' && f.key === 'channel'
             const picked = isSlackChannel ? slackChannels?.find((c) => c.id === fields.channel) : undefined
+            // One id per field, shared by the two mutually exclusive control branches
+            // below (only ever one is rendered), so the visible label names the control.
+            const fieldId = `notif-field-${f.key}`
             return (
               <div key={f.key}>
-                <label className={labelCls}>{f.label}</label>
+                <label className={labelCls} htmlFor={fieldId}>
+                  {f.label}
+                </label>
                 {isSlackChannel && !slackManual && slackChannels ? (
                   <>
                     <select
+                      id={fieldId}
                       className={inputCls}
                       value={fields.channel ?? ''}
                       onChange={(e) => setFields((s) => ({ ...s, channel: e.target.value }))}
@@ -290,6 +296,7 @@ export function NotificationsModal({ open, onClose }: { open: boolean; onClose:
                 ) : (
                   <>
                     <input
+                      id={fieldId}
                       className={`${inputCls} font-mono`}
                       value={fields[f.key] ?? ''}
                       onChange={(e) => setFields((s) => ({ ...s, [f.key]: e.target.value }))}