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 }))}