From 5a889b6d1baf58720138ec85c72aa5ce31147a08 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/ChannelAddForm.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/server/src/components/ChannelAddForm.tsx b/packages/server/src/components/ChannelAddForm.tsx
index 2da891a..423bc30 100644
--- a/packages/server/src/components/ChannelAddForm.tsx
+++ b/packages/server/src/components/ChannelAddForm.tsx
@@ -208,12 +208,18 @@ export function ChannelAddForm({
         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 = `channel-add-${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 }))}
@@ -236,6 +242,7 @@ export function ChannelAddForm({
             ) : (
               <>
                 <input
+                  id={fieldId}
                   className={`${inputCls} font-mono`}
                   value={fields[f.key] ?? ''}
                   onChange={(e) => setFields((s) => ({ ...s, [f.key]: e.target.value }))}