From 0e79e1052a553902f9f08d40914896fec67cd5e4 Mon Sep 17 00:00:00 2001
From: "[._.]/ Adam Eivy" <atomantic@gmail.com>
Date: Sat, 15 Aug 2026 20:06:40 +0000
Subject: [PATCH 1/2] fix: name 33 more form controls and stop the a11y
 allowlist from rotting (#4156)

Continues the unlabeled-control sweep on the Chief of Staff, MeatSpace POST
and Voice settings surfaces, and closes two blind spots that were keeping
correctly-labeled controls on the allowlist:

- The htmlFor-forwarding wrapper recognizer hardcoded a prop named `htmlFor`.
  StackerNews's `Field({ id, label })` does the same job through `id`, so its
  13 already-labeled controls looked unnamed. Both prop names are now read out
  of the wrapper, and both must still be parameters of it.
- A FormField whose only child is a conditional (`{isSelect ? <select/> :
  <input/>}`) was not credited, though React clones the generated id onto
  whichever branch renders. Rendered lists stay excluded: Children.map
  flattens an array and clones only its first element.

VoiceTab carried a page-local clone of the shared FormField; it is deleted in
favour of the real one, which is what the guard already understands.

A new test fails on any allowlist entry that no longer matches an unnamed
input, so the burn-down can only shrink. It immediately caught 9 entries left
behind by #4313.

PREEXISTING_INPUT_NAME_ALLOWLIST: 142 -> 71.
---
 .changelog/next/fixed-issue-4156.md           |   1 +
 client/src/a11yConventions.test.js            | 232 +++++++++++-------
 client/src/components/cos/TaskAddForm.jsx     |   1 +
 client/src/components/cos/tabs/AgentCard.jsx  |   2 +
 client/src/components/cos/tabs/ConfigRow.jsx  |  10 +-
 client/src/components/cos/tabs/JobsTab.jsx    |   7 +
 .../components/cos/tabs/MemoryEditModal.jsx   |   1 +
 client/src/components/cos/tabs/TaskItem.jsx   |   2 +
 .../cos/tabs/workflow/ScheduleEditor.jsx      |   1 +
 .../meatspace/EpigeneticTracker.jsx           |   4 +
 .../meatspace/post/ElementsSong.jsx           |   4 +-
 .../meatspace/post/MemoryPractice.jsx         |   1 +
 .../meatspace/post/MorseTrainer.jsx           |  10 +-
 .../post/PostCognitiveDrillRunner.jsx         |   1 +
 .../meatspace/post/PostDrillRunner.jsx        |   1 +
 .../meatspace/post/PostLlmDrillRunner.jsx     |   3 +
 .../meatspace/post/WordplayDrillUI.jsx        |   2 +
 client/src/components/settings/VoiceTab.jsx   | 111 ++++-----
 18 files changed, 242 insertions(+), 152 deletions(-)

diff --git a/.changelog/next/fixed-issue-4156.md b/.changelog/next/fixed-issue-4156.md
index 90421ca0a8..e8e1bdf8af 100644
--- a/.changelog/next/fixed-issue-4156.md
+++ b/.changelog/next/fixed-issue-4156.md
@@ -1,2 +1,3 @@
 - Screen readers now announce the inline form controls on the Character Sheet, GitHub, Sharing, Browser, Mood Board and Video Timeline Editor pages, which previously had no accessible name
 - Screen readers now announce 80 more form controls that previously had no accessible name, across the Goals views, the Brain tabs (Daily Log, Feeds, Inbox, Links, Memory, Notes), the MeatSpace tabs (Age, Alcohol, Genome, Lifestyle, Nicotine) and the Agent World/Tools tabs — visible labels where the surface had room, `aria-label` in compact toolbars and table rows
+- Named 33 more unlabeled form controls across the Chief of Staff, MeatSpace POST and Voice settings surfaces, and taught the accessible-name guard two wrapper shapes it was blind to — burning the pre-existing allowlist down from 142 to 71 entries
diff --git a/client/src/a11yConventions.test.js b/client/src/a11yConventions.test.js
index dbe10f6291..4b1af047e4 100644
--- a/client/src/a11yConventions.test.js
+++ b/client/src/a11yConventions.test.js
@@ -457,15 +457,21 @@ function isUsableLabelAttributeValue(value) {
 // localLabelWrapperNames: same-file `function` declarations only, so a missed
 // one is a false negative that leaves its controls on the allowlist.
 //
+// The two prop names are read out of the wrapper rather than hardcoded: the
+// forwarded id arrives as `htmlFor` in LifestyleTab's `FieldGroup` but as `id`
+// in StackerNews's `Field({ id, label, children })`, and both name their
+// control just as well. Hardcoding `htmlFor` left the second shape's controls
+// looking unnamed.
+//
 // Both helpers below read whatever source they are handed. The input scan hands
 // them `maskComments(src)`, which is what keeps a commented-out wrapper — or a
 // commented-out call site — from registering; same as localLabelWrapperNames.
-const htmlForForwarderNamesBySource = new Map();
+const htmlForForwardersBySource = new Map();
 
-function localHtmlForForwarderNames(src) {
-  const cached = htmlForForwarderNamesBySource.get(src);
+function localHtmlForForwarders(src) {
+  const cached = htmlForForwardersBySource.get(src);
   if (cached) return cached;
-  const names = new Set();
+  const forwarders = new Map();
   const re = /function\s+([A-Z][\w]*)\s*\(/g;
   let match;
   while ((match = re.exec(src))) {
@@ -478,25 +484,32 @@ function localHtmlForForwarderNames(src) {
     if (bodyEnd === -1) continue;
     const body = src.slice(bodyStart, bodyEnd);
     // The <label> has to do both jobs before the call site's attributes can be
-    // trusted: point at the forwarded `htmlFor`, and render the `label` prop as
-    // its own text. A component that forwards the id onto a <label> it never
-    // fills with text names nothing.
-    if (/<label\b[^>]*\bhtmlFor\s*=\s*\{\s*htmlFor\s*\}(?:[^>]*[^/>])?>(?:(?!<\/label>)[\s\S])*?\{\s*label\s*\}/.test(body)) names.add(match[1]);
+    // trusted: point at one prop, and render another prop as its own text. A
+    // component that forwards the id onto a <label> it never fills with text
+    // names nothing.
+    const shape = /<label\b[^>]*\bhtmlFor\s*=\s*\{\s*([A-Za-z_$][\w$]*)\s*\}(?:[^>]*[^/>])?>(?:(?!<\/label>)[\s\S])*?\{\s*([A-Za-z_$][\w$]*)\s*\}/.exec(body);
+    if (!shape) continue;
+    const [, idProp, labelProp] = shape;
+    // Both names must be parameters of this component. A <label> pointed at a
+    // module-level constant forwards nothing from the call site, so reading the
+    // call site's same-named attribute would exempt an unrelated control.
+    if (![idProp, labelProp].every((prop) => new RegExp(`\\b${prop}\\b`).test(params))) continue;
+    forwarders.set(match[1], { idProp, labelProp });
   }
-  htmlForForwarderNamesBySource.set(src, names);
-  return names;
+  htmlForForwardersBySource.set(src, forwarders);
+  return forwarders;
 }
 
 function hasMatchingForwardedLabel(src, id) {
-  for (const name of localHtmlForForwarderNames(src)) {
+  for (const [name, { idProp, labelProp }] of localHtmlForForwarders(src)) {
     const re = new RegExp(`<${name}\\b`, 'g');
     let match;
     while ((match = re.exec(src))) {
       const tag = openingTagAt(src, match.index, name.length + 1);
       if (!tag) continue;
       re.lastIndex = match.index + tag.length;
-      if (normalizedAttributeValue(attributeValue(tag, 'htmlFor')) !== id) continue;
-      if (isUsableLabelAttributeValue(normalizedAttributeValue(attributeValue(tag, 'label')))) return true;
+      if (normalizedAttributeValue(attributeValue(tag, idProp)) !== id) continue;
+      if (isUsableLabelAttributeValue(normalizedAttributeValue(attributeValue(tag, labelProp)))) return true;
     }
   }
   return false;
@@ -561,6 +574,58 @@ function hasUsableNativeInputName(tag) {
   return type === 'image' && hasUsableAccessibleNameAttribute(tag, 'alt');
 }
 
+// A FormField's only child is often a conditional rather than the control
+// itself (`{field.type === 'select' ? <select/> : <input/>}`). React still
+// clones the id onto whichever branch renders, because Children.map sees the
+// expression's single result as child 0 — so the control inside it is named.
+// Credit that only when the control really is what the expression yields:
+// directly, at the expression's top level, and not one entry of a rendered
+// list (Children.map flattens an array and clones only its FIRST element, so
+// crediting every control in a `.map()` would exempt the ones that stay
+// unnamed).
+function isEnclosedInListCall(src, start, index) {
+  const callStack = [];
+  for (let cursor = start; cursor < index; cursor++) {
+    const c = src[cursor];
+    if (c === '"' || c === "'" || c === '`') {
+      for (cursor++; cursor < index && src[cursor] !== c; cursor++) if (src[cursor] === '\\') cursor++;
+      continue;
+    }
+    // Only a call that still encloses the control disqualifies it. A `.map()`
+    // in the ternary's OTHER branch has already closed by then, so testing for
+    // the text anywhere before the control would reject the whole shape.
+    if (c === '(') callStack.push(/\.(?:map|flatMap)\s*$/.test(src.slice(start, cursor)));
+    else if (c === ')') callStack.pop();
+  }
+  return callStack.some(Boolean);
+}
+
+function isDirectElementInExpression(src, start, end, index) {
+  if (isEnclosedInListCall(src, start, index)) return false;
+  let depth = 0;
+  let cursor = start;
+  while (cursor < index) {
+    // Only an element start matters here; a bare `<` is a comparison operator
+    // (`{count < 3 ? <input/> : null}`) and must not open a phantom element.
+    if (src[cursor] !== '<' || !/^<\/?[A-Za-z]/.test(src.slice(cursor, cursor + 3))) {
+      cursor++;
+      continue;
+    }
+    if (src.startsWith('</', cursor)) {
+      const close = src.indexOf('>', cursor);
+      if (close === -1 || close > end) return false;
+      if (depth > 0) depth--;
+      cursor = close + 1;
+      continue;
+    }
+    const tag = tagBoundaryAt(src, cursor);
+    if (!tag || tag.end > end) return false;
+    if (!tag.selfClosing) depth++;
+    cursor = tag.end;
+  }
+  return depth === 0;
+}
+
 function isNestedInLabeledFormField(src, index) {
   const formRe = /<FormField\b/g;
   let formMatch;
@@ -581,7 +646,12 @@ function isNestedInLabeledFormField(src, index) {
       }
       if (src[cursor] === '{') {
         const end = matchingBraceEnd(src, cursor);
-        if (end === -1 || end >= index) break;
+        if (end === -1) break;
+        if (end >= index) {
+          // The control lives inside this expression rather than after it.
+          if (depth === 0 && firstChild === null && isDirectElementInExpression(src, cursor + 1, end, index)) return true;
+          break;
+        }
         if (src.slice(cursor + 1, end).trim()) firstChild = firstChild || 'expression';
         cursor = end + 1;
         continue;
@@ -781,22 +851,6 @@ const PREEXISTING_INPUT_NAME_ALLOWLIST = new Set([
   "src/components/calendar/ReviewTab.jsx|type=date|value=date",
   "src/components/calendar/ReviewTab.jsx|type=number|placeholder=min|value=editForm.durationMinutes|min=1|max=1440",
   "src/components/calendar/ReviewTab.jsx|type=text|placeholder=Note (optional)|value=editForm.note",
-  "src/components/cos/TaskAddForm.jsx|type=text|placeholder=Template name...|value=templateNameInput",
-  "src/components/cos/tabs/AgentCard.jsx|type=text|placeholder=Send additional context to agent...|value=btwInput",
-  "src/components/cos/tabs/AgentCard.jsx|type=text|placeholder=What made this work well or poorly?|value=feedbackComment",
-  "src/components/cos/tabs/ConfigRow.jsx|type=number|value=inputValue",
-  "src/components/cos/tabs/ConfigRow.jsx|type=checkbox",
-  "src/components/cos/tabs/JobsTab.jsx|type=text|placeholder=0 7 * * *|value=data.cronExpression || ''|title=Cron expression: minute hour dayOfMonth month dayOfWeek",
-  "src/components/cos/tabs/JobsTab.jsx|type=time|value=data.scheduledTime || ''|title=Run at specific time (leave empty for any time)",
-  "src/components/cos/tabs/JobsTab.jsx|type=text|placeholder=Job name|value=editData.name",
-  "src/components/cos/tabs/JobsTab.jsx|type=text|placeholder=Description|value=editData.description",
-  "src/components/cos/tabs/JobsTab.jsx|type=text|placeholder=Job name *|value=newJob.name",
-  "src/components/cos/tabs/JobsTab.jsx|type=text|placeholder=Category|value=newJob.category",
-  "src/components/cos/tabs/JobsTab.jsx|type=text|placeholder=Description|value=newJob.description",
-  "src/components/cos/tabs/MemoryEditModal.jsx|type=text|placeholder=Add tag...|value=newTag",
-  "src/components/cos/tabs/TaskItem.jsx|type=text|value=editData.description",
-  "src/components/cos/tabs/TaskItem.jsx|type=text|placeholder=e.g., Waiting for API access, Needs design review...|value=blockedReason|ref=blockedInputRef",
-  "src/components/cos/tabs/workflow/ScheduleEditor.jsx|type=time|value=parseSimpleCron(form.recheckCron)?.time ?? ''",
   "src/components/dashboard/LayoutEditor.jsx|id=layout-editor-window-end|type=time|value=activateWindow.end",
   "src/components/dashboard/LayoutEditor.jsx|type=text|placeholder=Name for new layout|value=dupName",
   "src/components/digital-twin/tabs/DocumentsTab.jsx|type=range|value=selectedDoc.weight || 5|min=1|max=10|occurrence=1",
@@ -811,34 +865,10 @@ const PREEXISTING_INPUT_NAME_ALLOWLIST = new Set([
   "src/components/imageGen/LoraPicker.jsx|type=number|value=sel.scale|min=0|max=2|step=0.1",
   "src/components/insights/GoalScorecardTab.jsx|type=text|placeholder=extra keywords, comma-separated|value=drafts[rule.id] ?? ''",
   "src/components/loraTraining/ImportGalleryDialog.jsx|type=text|placeholder=Search prompt, model, seed, LoRA…|value=query",
-  "src/components/meatspace/EpigeneticTracker.jsx|type=text|placeholder=Intervention name|value=customForm.name",
-  "src/components/meatspace/EpigeneticTracker.jsx|type=text|placeholder=Target dosage (e.g. 5g/day)|value=customForm.dosage",
-  "src/components/meatspace/EpigeneticTracker.jsx|type=text|placeholder=Unit (g, mg, min, etc.)|value=customForm.trackingUnit",
-  "src/components/meatspace/EpigeneticTracker.jsx|type=number|placeholder=`Amount (${intervention.trackingUnit})`|value=logAmounts[key] || ''|min=0|step=any",
-  "src/components/meatspace/post/ElementsSong.jsx|type=text|placeholder=...|value=answer|ref=inputRef",
-  "src/components/meatspace/post/ElementsSong.jsx|type=text|placeholder=`${blankedWords.length} element${blankedWords.length > 1 ? 's' : ''}...`|value=answer|ref=inputRef",
-  "src/components/meatspace/post/ElementsSong.jsx|type=text|placeholder=Search...|value=searchQuery",
-  "src/components/meatspace/post/MemoryPractice.jsx|type=text|placeholder=`${blankWords.length} word${blankWords.length > 1 ? 's' : ''} missing...`|value=answer|ref=inputRef",
-  "src/components/meatspace/post/MorseTrainer.jsx|placeholder=????|value=input|ref=inputRef",
-  "src/components/meatspace/post/MorseTrainer.jsx|type=range|value=value|min=min|max=max|step=step",
-  "src/components/meatspace/post/PostCognitiveDrillRunner.jsx|type=text|placeholder=Digits|value=input|ref=inputRef",
-  "src/components/meatspace/post/PostDrillRunner.jsx|type=isTextDrill ? 'text' : 'number'|placeholder=Answer|value=inputValue|ref=inputRef",
-  "src/components/meatspace/post/PostLlmDrillRunner.jsx|type=text|placeholder=Your answer...|value=i === items.length ? inputValue : ''|ref=i === items.length ? inputRef : undefined|autoFocus=i === items.length",
-  "src/components/meatspace/post/PostLlmDrillRunner.jsx|type=text|placeholder=Type an item and press Enter...|value=inputValue|ref=inputRef",
-  "src/components/meatspace/post/PostLlmDrillRunner.jsx|type=text|placeholder=Type a creative use and press Enter...|value=inputValue|ref=inputRef",
-  "src/components/meatspace/post/WordplayDrillUI.jsx|type=text|placeholder=Type the full compound or just the other half...|value=inputValue|ref=inputRef",
-  "src/components/meatspace/post/WordplayDrillUI.jsx|type=text|placeholder=The bridge word is...|value=inputValue|ref=inputRef",
   "src/components/media/CollectionPickerShell.jsx|type=text|placeholder=searchPlaceholder|value=query",
   "src/components/media/CollectionPickerShell.jsx|type=text|placeholder=newCollectionPlaceholder|value=newName",
   "src/components/messages/InboxTab.jsx|type=text|placeholder=Search messages...|value=search",
-  "src/components/music/AlbumsManager.jsx|placeholder=Album title|value=form.title",
-  "src/components/music/AlbumsManager.jsx|placeholder=dream pop|value=form.genre",
-  "src/components/music/AlbumsManager.jsx|type=number|placeholder=2026|value=form.releaseYear|min=ALBUM_RELEASE_YEAR_MIN|max=ALBUM_RELEASE_YEAR_MAX",
-  "src/components/music/ArtistsManager.jsx|placeholder=Nova Vale|value=form.name",
-  "src/components/music/ArtistsManager.jsx|placeholder=indie folk, dream pop|value=form.genre",
-  "src/components/music/ArtistsManager.jsx|placeholder=/images/… or https://…|value=form.portraitImageUrl",
   "src/components/music/MusicGenPanel.jsx|placeholder=org/model-repo|value=installRepo",
-  "src/components/music/TracksManager.jsx|placeholder=Track title|value=form.title",
   "src/components/pipeline/CanonCard.jsx|type=text|placeholder=Outfit name (e.g. Wedding)|value=draftFor('name')",
   "src/components/pipeline/arcCanvas/AddSeasonRow.jsx|placeholder=Volume / Season title…|value=title",
   "src/components/pipeline/arcCanvas/DeriveFromManuscriptPreview.jsx|placeholder=Volume title|value=volume.title",
@@ -852,17 +882,6 @@ const PREEXISTING_INPUT_NAME_ALLOWLIST = new Set([
   "src/components/pipeline/stages/IdeaStage.jsx|type=text|placeholder=Your answer (optional — leave blank for LLM's choice)|value=answers[i] || ''",
   "src/components/pipeline/stages/StoryboardsStage.jsx|placeholder=INT. FOUNDRY — NIGHT|value=scene.slugline || ''",
   "src/components/pipeline/stages/StoryboardsStage.jsx|type=number|value=shot.durationSeconds ?? 4|title=Duration in seconds|min=1|max=30",
-  "src/components/settings/VoiceTab.jsx|type=text|value=cfg.hotkey",
-  "src/components/settings/VoiceTab.jsx|type=number|value=cfg.tts.rate ?? 1.0|min=0.5|max=2|step=0.1",
-  "src/components/settings/VoiceTab.jsx|type=text|value=cfg.stt.endpoint",
-  "src/components/settings/VoiceTab.jsx|type=text|value=cfg.llm.personality?.name ?? ''",
-  "src/components/settings/VoiceTab.jsx|type=text|value=cfg.llm.personality?.role ?? ''",
-  "src/components/settings/VoiceTab.jsx|type=text|value=cfg.llm.personality?.speechStyle ?? ''",
-  "src/components/settings/VoiceTab.jsx|type=text|value=(cfg.llm.personality?.traits || []).join(', ')",
-  "src/components/settings/VoiceTab.jsx|type=time|value=cfg.llm.proactive?.quietHours?.start || '22:00'",
-  "src/components/settings/VoiceTab.jsx|type=time|value=cfg.llm.proactive?.quietHours?.end || '07:00'",
-  "src/components/settings/VoiceTab.jsx|type=number|value=fastPathCfg.browser?.temperature ?? 0.7|min=0|max=2|step=0.1",
-  "src/components/settings/VoiceTab.jsx|type=number|value=fastPathCfg.browser?.topK ?? 3|min=1|max=128|step=1",
   "src/components/sharing/DuplicateGroup.jsx|value=name",
   "src/components/shell/TerminalHotKeys.jsx|type=text|placeholder=Tap & paste here|ref=pasteInputRef",
   "src/components/universe/CharacterDetailEditor.jsx|type=text",
@@ -882,28 +901,8 @@ const PREEXISTING_INPUT_NAME_ALLOWLIST = new Set([
   "src/pages/AIProviders.jsx|type=isSecret ? 'password' : 'text'|value=value",
   "src/pages/AIProviders.jsx|type=text|placeholder=KEY|value=newEnvKey",
   "src/pages/AIProviders.jsx|type=newEnvSecret ? 'password' : 'text'|placeholder=value|value=newEnvValue",
-  "src/pages/Authors.jsx|placeholder=Jane Doe|value=form.name",
-  "src/pages/Authors.jsx|placeholder=/images/… or https://…|value=form.headshotImageUrl",
   "src/pages/MediaCollectionDetail.jsx|type=text|value=nameDraft",
-  "src/components/meatspace/post/PostDrillConfig.jsx|type=number|value=drillConfig[field.key] ?? ''|min=field.min|max=field.max",
-  "src/pages/AIProviders.jsx|type=text|placeholder=claude-sonnet-4-20250514|value=formData.defaultModel",
-  "src/pages/AIProviders.jsx|type=text|placeholder=haiku|value=formData.lightModel",
-  "src/pages/AIProviders.jsx|type=text|placeholder=sonnet|value=formData.mediumModel",
-  "src/pages/AIProviders.jsx|type=text|placeholder=opus|value=formData.heavyModel",
   "src/pages/AIProviders.jsx|type=text|placeholder=Use fallback provider's default|value=formData.fallbackModel",
-  "src/pages/StackerNews.jsx|id=`${prefix}-label`|value=form.label|occurrence=1",
-  "src/pages/StackerNews.jsx|id=`${prefix}-label`|value=form.label|occurrence=2",
-  "src/pages/StackerNews.jsx|id=`${prefix}-tone`|value=form.tone",
-  "src/pages/StackerNews.jsx|id=`${prefix}-allowed`|value=form.allowedThemes",
-  "src/pages/StackerNews.jsx|id=`${prefix}-disallowed`|value=form.disallowedThemes",
-  "src/pages/StackerNews.jsx|id=`${prefix}-escalation`|value=form.escalationCues",
-  "src/pages/StackerNews.jsx|id=action-title|value=draft.title",
-  "src/pages/StackerNews.jsx|id=`${prefix}-${id}`|value=form[key]",
-  "src/pages/StackerNews.jsx|id=`${prefix}-${id}`|type=number|value=form[key]|min=min|max=max",
-  "src/pages/StackerNews.jsx|id=`${prefix}-label`|value=form.label",
-  "src/pages/StackerNews.jsx|id=`${prefix}-username`|value=form.username",
-  "src/pages/StackerNews.jsx|id=`${prefix}-api-key`|type=password|value=form.apiKey",
-  "src/pages/StackerNews.jsx|id=`${prefix}-slug`|value=form.slug",
   "src/pages/VideoTimeline.jsx|type=text|placeholder=New project name…|value=name",
   "src/pages/DataDog.jsx|name=site|type=text|placeholder=e.g., api.custom-datadog.com|value=formData.site",
 ]);
@@ -1121,6 +1120,26 @@ describe('a11y conventions', () => {
     expect(offenders, `Input without an accessible name — add aria-label/aria-labelledby or an explicit/implicit <label>, or exclude type="hidden":\n${offenders.join('\n')}`).toEqual([]);
   });
 
+  it('keeps no stale entries in the pre-existing input allowlist', () => {
+    // The allowlist only shrinks. An entry whose control has since been named —
+    // or deleted, or renamed so its anchor no longer resolves — is dead weight
+    // that quietly re-exempts the next input to land on that same anchor. Fail
+    // on it so #4297's burn-down stays honest instead of drifting.
+    const offending = new Set();
+    for (const file of trackedJsxFiles()) {
+      const scanSrc = maskComments(readFileSync(join(CLIENT_ROOT, file), 'utf8'));
+      const re = /<input\b/g;
+      let m;
+      while ((m = re.exec(scanSrc))) {
+        const tag = openingTagAt(scanSrc, m.index, '<input'.length);
+        if (!tag || hasAccessibleInputName(scanSrc, tag, m.index)) continue;
+        offending.add(inputSourceAnchor(file, scanSrc, m.index));
+      }
+    }
+    const stale = [...PREEXISTING_INPUT_NAME_ALLOWLIST].filter((entry) => !offending.has(entry));
+    expect(stale, `PREEXISTING_INPUT_NAME_ALLOWLIST entries that no longer match an unnamed input — delete them:\n${stale.join('\n')}`).toEqual([]);
+  });
+
   it('only credits an htmlFor-forwarding wrapper that really names the control', () => {
     // The rule above now accepts a page-local wrapper that renders the <label>
     // and takes the control's id as a prop. That is only a real name when the
@@ -1156,6 +1175,49 @@ describe('a11y conventions', () => {
   return <div>{children}</div>;
 }`;
     expect(hasMatchingExplicitLabel(maskComments(`${commentedForwarder}\n${namedCall}`), 'sleep-hours')).toBe(false);
+
+    // The forwarded prop does not have to be called `htmlFor` — StackerNews's
+    // `Field({ id, label })` does the same job through `id`. Both halves stay
+    // required, and the id must still be read from the prop the wrapper
+    // actually forwards, not from any attribute that happens to be present.
+    const idPropForwarder = forwarder.replace('label, htmlFor, children', 'id, label, children').replace('htmlFor={htmlFor}', 'htmlFor={id}');
+    const idPropCall = `<Group id="sleep-hours" label="Sleep"><input id="sleep-hours" type="range" /></Group>`;
+    expect(hasMatchingExplicitLabel(`${idPropForwarder}\n${idPropCall}`, 'sleep-hours')).toBe(true);
+    expect(hasMatchingExplicitLabel(`${idPropForwarder}\n${idPropCall.replace(' label="Sleep"', '')}`, 'sleep-hours')).toBe(false);
+    // `htmlFor=` on the call site is not the forwarded prop here, so it must
+    // not stand in for the `id` this wrapper reads.
+    expect(hasMatchingExplicitLabel(`${idPropForwarder}\n${idPropCall.replace('id="sleep-hours" label', 'htmlFor="sleep-hours" label')}`, 'sleep-hours')).toBe(false);
+  });
+
+  it('credits a FormField whose only child is a conditional, but not a list', () => {
+    // A FormField's child is frequently a ternary rather than the control
+    // itself (`{isSelect ? <select/> : <input/>}`); React clones the generated
+    // id onto whichever branch renders, so the control really is named. The
+    // veto that matters is a rendered LIST — Children.map flattens it and
+    // clones only the first element, so crediting each control in a `.map()`
+    // would exempt every one after the first.
+    const field = (child) => `<FormField label="Rounds">\n  ${child}\n</FormField>`;
+    const index = (src) => src.indexOf('<input');
+
+    const ternary = field(`{isSelect ? (<select><option>a</option></select>) : (<input type="number" />)}`);
+    expect(isNestedInLabeledFormField(ternary, index(ternary))).toBe(true);
+
+    // A `.map()` in the OTHER branch has already closed by the time the control
+    // is reached, so it must not disqualify the shape.
+    const ternaryWithListedOptions = field(`{isSelect ? (<select>{opts.map((o) => (<option key={o}>{o}</option>))}</select>) : (<input type="number" />)}`);
+    expect(isNestedInLabeledFormField(ternaryWithListedOptions, index(ternaryWithListedOptions))).toBe(true);
+
+    const list = field(`{fields.map((f) => (<input key={f} type="number" />))}`);
+    expect(isNestedInLabeledFormField(list, index(list))).toBe(false);
+
+    // Only the element the expression yields directly is cloned; a control
+    // nested inside a wrapper element gets no id.
+    const wrapped = field(`{isSelect ? (<select />) : (<div><input type="number" /></div>)}`);
+    expect(isNestedInLabeledFormField(wrapped, index(wrapped))).toBe(false);
+
+    // An unlabeled FormField names nothing, whatever its child looks like.
+    const unlabeled = ternary.replace(' label="Rounds"', '');
+    expect(isNestedInLabeledFormField(unlabeled, index(unlabeled))).toBe(false);
   });
 
   it('meets the 44px touch-target minimum on Close buttons', () => {
diff --git a/client/src/components/cos/TaskAddForm.jsx b/client/src/components/cos/TaskAddForm.jsx
index 0ca8724a12..63c0b1eb9d 100644
--- a/client/src/components/cos/TaskAddForm.jsx
+++ b/client/src/components/cos/TaskAddForm.jsx
@@ -792,6 +792,7 @@ export default function TaskAddForm({ providers, apps, onTaskAdded, compact = fa
               onChange={e => setTemplateNameInput(e.target.value)}
               onKeyDown={e => e.key === 'Enter' && saveAsTemplate()}
               placeholder="Template name..."
+              aria-label="Template name"
               className="flex-1 px-3 py-1.5 bg-port-bg border border-port-border rounded-lg text-white text-sm min-h-[44px]"
               autoFocus
             />
diff --git a/client/src/components/cos/tabs/AgentCard.jsx b/client/src/components/cos/tabs/AgentCard.jsx
index 228e31f3ff..b3d7afda7f 100644
--- a/client/src/components/cos/tabs/AgentCard.jsx
+++ b/client/src/components/cos/tabs/AgentCard.jsx
@@ -737,6 +737,7 @@ export default function AgentCard({ agent, onPause, onKill, onDelete, onResume,
               onChange={(e) => setBtwInput(e.target.value)}
               onKeyDown={(e) => e.key === 'Enter' && !e.shiftKey && sendBtw()}
               placeholder="Send additional context to agent..."
+              aria-label="Additional context for the agent"
               className="flex-1 px-2 py-1 text-sm bg-port-bg border border-port-border rounded text-white placeholder-gray-600 focus:outline-hidden focus:border-yellow-500/50 min-h-[32px]"
               maxLength={5000}
               disabled={sendingBtw}
@@ -898,6 +899,7 @@ export default function AgentCard({ agent, onPause, onKill, onDelete, onResume,
                   value={feedbackComment}
                   onChange={(e) => setFeedbackComment(e.target.value)}
                   placeholder="What made this work well or poorly?"
+                  aria-label="Feedback comment"
                   className="flex-1 px-2 py-1 text-sm bg-port-bg border border-port-border rounded text-white placeholder-gray-500 focus:outline-hidden focus:border-port-accent min-h-[32px]"
                   maxLength={200}
                 />
diff --git a/client/src/components/cos/tabs/ConfigRow.jsx b/client/src/components/cos/tabs/ConfigRow.jsx
index ffff9fad87..7ae12d9481 100644
--- a/client/src/components/cos/tabs/ConfigRow.jsx
+++ b/client/src/components/cos/tabs/ConfigRow.jsx
@@ -1,11 +1,18 @@
+import { useId } from 'react';
+
 export default function ConfigRow({ label, value, editing, type, inputValue, onChange, suffix, tooltip }) {
+  // The row's text already reads as the control's label, so pair the two rather
+  // than duplicating it into an aria-label — that also makes the text a click
+  // target for the checkbox, which is otherwise a 16px hit area.
+  const controlId = useId();
   return (
     <div className="flex items-center justify-between p-4" title={tooltip}>
-      <span className="text-gray-400 cursor-help">{label}</span>
+      <label htmlFor={controlId} className="text-gray-400 cursor-help">{label}</label>
       {editing ? (
         <div className="flex items-center gap-2">
           {type === 'checkbox' ? (
             <input
+              id={controlId}
               type="checkbox"
               checked={inputValue}
               onChange={e => onChange(e.target.checked)}
@@ -14,6 +21,7 @@ export default function ConfigRow({ label, value, editing, type, inputValue, onC
           ) : (
             <>
               <input
+                id={controlId}
                 type="number"
                 value={inputValue}
                 onChange={e => onChange(parseInt(e.target.value, 10) || 0)}
diff --git a/client/src/components/cos/tabs/JobsTab.jsx b/client/src/components/cos/tabs/JobsTab.jsx
index 378ece467c..57ced83f07 100644
--- a/client/src/components/cos/tabs/JobsTab.jsx
+++ b/client/src/components/cos/tabs/JobsTab.jsx
@@ -229,6 +229,7 @@ function ScheduleFields({ data, onChange }) {
               className="flex-1 px-3 py-2 bg-port-bg border border-port-border rounded-lg text-white text-sm font-mono"
               placeholder="0 7 * * *"
               title="Cron expression: minute hour dayOfMonth month dayOfWeek"
+              aria-label="Cron expression"
             />
             <select
               value=""
@@ -263,6 +264,7 @@ function ScheduleFields({ data, onChange }) {
             onChange={e => onChange('scheduledTime', e.target.value || null)}
             className="px-3 py-2 bg-port-bg border border-port-border rounded-lg text-white text-sm"
             title="Run at specific time (leave empty for any time)"
+            aria-label="Run at a specific time"
           />
         </div>
       )}
@@ -458,6 +460,7 @@ function JobCard({ job, apps, providers, onToggle, onTrigger, onDelete, onUpdate
               <input
                 type="text"
                 value={editData.name}
+                aria-label="Job name"
                 onChange={e => setEditData(d => ({ ...d, name: e.target.value }))}
                 className="w-full px-3 py-2 bg-port-bg border border-port-border rounded-lg text-white text-sm"
                 placeholder="Job name"
@@ -465,6 +468,7 @@ function JobCard({ job, apps, providers, onToggle, onTrigger, onDelete, onUpdate
               <input
                 type="text"
                 value={editData.description}
+                aria-label="Job description"
                 onChange={e => setEditData(d => ({ ...d, description: e.target.value }))}
                 className="w-full px-3 py-2 bg-port-bg border border-port-border rounded-lg text-white text-sm"
                 placeholder="Description"
@@ -802,6 +806,7 @@ export default function JobsTab() {
               <input
                 type="text"
                 placeholder="Job name *"
+                aria-label="New job name"
                 value={newJob.name}
                 onChange={e => setNewJob(j => ({ ...j, name: e.target.value }))}
                 className="flex-1 px-3 py-2 bg-port-bg border border-port-border rounded-lg text-white text-sm"
@@ -818,6 +823,7 @@ export default function JobsTab() {
               <input
                 type="text"
                 placeholder="Category"
+                aria-label="New job category"
                 value={newJob.category}
                 onChange={e => setNewJob(j => ({ ...j, category: e.target.value }))}
                 className="w-40 px-3 py-2 bg-port-bg border border-port-border rounded-lg text-white text-sm"
@@ -826,6 +832,7 @@ export default function JobsTab() {
             <input
               type="text"
               placeholder="Description"
+              aria-label="New job description"
               value={newJob.description}
               onChange={e => setNewJob(j => ({ ...j, description: e.target.value }))}
               className="w-full px-3 py-2 bg-port-bg border border-port-border rounded-lg text-white text-sm"
diff --git a/client/src/components/cos/tabs/MemoryEditModal.jsx b/client/src/components/cos/tabs/MemoryEditModal.jsx
index 8e39b0b1a1..0ec1b18ab7 100644
--- a/client/src/components/cos/tabs/MemoryEditModal.jsx
+++ b/client/src/components/cos/tabs/MemoryEditModal.jsx
@@ -231,6 +231,7 @@ export default function MemoryEditModal({ memory, apps, onSave, onClose }) {
                 onChange={e => setNewTag(e.target.value)}
                 onKeyDown={handleKeyDown}
                 placeholder="Add tag..."
+                aria-label="Add tag"
                 className="flex-1 px-3 py-3 min-h-[44px] bg-port-bg border border-port-border rounded-lg text-white text-sm focus:border-port-accent focus:outline-hidden"
               />
               <button
diff --git a/client/src/components/cos/tabs/TaskItem.jsx b/client/src/components/cos/tabs/TaskItem.jsx
index c4cd53828c..8ef34e8e0b 100644
--- a/client/src/components/cos/tabs/TaskItem.jsx
+++ b/client/src/components/cos/tabs/TaskItem.jsx
@@ -354,6 +354,7 @@ export default function TaskItem({ task, isSystem, onRefresh, providers, duratio
               <input
                 type="text"
                 value={editData.description}
+                aria-label="Task description"
                 onChange={e => setEditData(d => ({ ...d, description: e.target.value }))}
                 className="w-full px-2 py-1 bg-port-bg border border-port-border rounded text-white text-sm"
               />
@@ -645,6 +646,7 @@ export default function TaskItem({ task, isSystem, onRefresh, providers, duratio
             if (e.key === 'Enter') handleConfirmBlocked();
           }}
           placeholder="e.g., Waiting for API access, Needs design review..."
+          aria-label="Reason this task is blocked"
           className="w-full px-3 py-2 bg-port-bg border border-port-border rounded-lg text-white text-sm mb-4"
         />
         <div className="flex justify-end gap-2">
diff --git a/client/src/components/cos/tabs/workflow/ScheduleEditor.jsx b/client/src/components/cos/tabs/workflow/ScheduleEditor.jsx
index 4666ef14cc..4b238b619c 100644
--- a/client/src/components/cos/tabs/workflow/ScheduleEditor.jsx
+++ b/client/src/components/cos/tabs/workflow/ScheduleEditor.jsx
@@ -208,6 +208,7 @@ export default function ScheduleEditor({ node, allNodes, timezone, onClose, onSa
             <input
               type="time"
               value={parseSimpleCron(form.recheckCron)?.time ?? ''}
+              aria-label="Perpetual recheck time"
               onChange={event => set('recheckCron', buildWeeklyCron(parseSimpleCron(form.recheckCron)?.days ?? [], event.target.value))}
               className="w-full rounded border border-port-border bg-port-bg px-3 py-2 text-sm text-white"
             />
diff --git a/client/src/components/meatspace/EpigeneticTracker.jsx b/client/src/components/meatspace/EpigeneticTracker.jsx
index 028462898b..de798db10f 100644
--- a/client/src/components/meatspace/EpigeneticTracker.jsx
+++ b/client/src/components/meatspace/EpigeneticTracker.jsx
@@ -151,6 +151,7 @@ export default function EpigeneticTracker({ markerCategories = [] }) {
               value={customForm.name}
               onChange={(e) => setCustomForm(prev => ({ ...prev, name: e.target.value }))}
               placeholder="Intervention name"
+              aria-label="Intervention name"
               className="col-span-2 px-3 py-2 bg-port-bg border border-port-border rounded text-sm text-white placeholder-gray-600 focus:outline-hidden focus:border-port-accent"
             />
             <select
@@ -176,6 +177,7 @@ export default function EpigeneticTracker({ markerCategories = [] }) {
               value={customForm.dosage}
               onChange={(e) => setCustomForm(prev => ({ ...prev, dosage: e.target.value }))}
               placeholder="Target dosage (e.g. 5g/day)"
+              aria-label="Target dosage"
               className="px-3 py-2 bg-port-bg border border-port-border rounded text-sm text-white placeholder-gray-600 focus:outline-hidden"
             />
             <input
@@ -183,6 +185,7 @@ export default function EpigeneticTracker({ markerCategories = [] }) {
               value={customForm.trackingUnit}
               onChange={(e) => setCustomForm(prev => ({ ...prev, trackingUnit: e.target.value }))}
               placeholder="Unit (g, mg, min, etc.)"
+              aria-label="Tracking unit"
               className="px-3 py-2 bg-port-bg border border-port-border rounded text-sm text-white placeholder-gray-600 focus:outline-hidden"
             />
           </div>
@@ -268,6 +271,7 @@ export default function EpigeneticTracker({ markerCategories = [] }) {
                         onChange={(e) => setLogAmounts(prev => ({ ...prev, [key]: e.target.value }))}
                         onKeyDown={(e) => e.key === 'Enter' && handleLog(key)}
                         placeholder={`Amount (${intervention.trackingUnit})`}
+                        aria-label={`Amount to log for ${intervention.name}`}
                         className="flex-1 max-w-[160px] px-3 py-1.5 bg-port-bg border border-port-border rounded text-sm text-white placeholder-gray-600 focus:outline-hidden focus:border-port-accent font-mono"
                         min="0"
                         step="any"
diff --git a/client/src/components/meatspace/post/ElementsSong.jsx b/client/src/components/meatspace/post/ElementsSong.jsx
index 11bb2c6144..a3c43ce1d5 100644
--- a/client/src/components/meatspace/post/ElementsSong.jsx
+++ b/client/src/components/meatspace/post/ElementsSong.jsx
@@ -342,7 +342,7 @@ function ElementsSongMain({ item, mastery, onSelectMode, onBack, onAttestMastery
           <div className="flex items-center gap-2">
             <div className="relative flex-1 sm:flex-none">
               <Search size={14} className="absolute left-2 top-1/2 -translate-y-1/2 text-gray-600" />
-              <input type="text" value={searchQuery} onChange={e => setSearchQuery(e.target.value)} placeholder="Search..."
+              <input type="text" value={searchQuery} onChange={e => setSearchQuery(e.target.value)} placeholder="Search..." aria-label="Search elements"
                 className="w-full sm:w-32 bg-port-bg border border-port-border rounded pl-7 pr-2 py-1.5 sm:py-1 text-xs text-white placeholder-gray-600 focus:border-port-accent focus:outline-none" />
             </div>
             <div className="flex bg-port-bg rounded border border-port-border shrink-0">
@@ -1006,6 +1006,7 @@ function ElementFlashMode({ item, mastery, onBack, onComplete }) {
             onKeyDown={e => { if (e.key === 'Enter') check(); }}
             className="mt-6 w-48 bg-port-bg border border-port-border rounded-lg px-4 py-2.5 text-white text-center text-lg placeholder-gray-600 focus:border-port-accent focus:outline-none"
             placeholder="..."
+            aria-label="Your answer"
             autoComplete="off"
           />
         )}
@@ -1156,6 +1157,7 @@ function FillBlankMode({ item, onBack, onComplete }) {
               onChange={e => setAnswer(e.target.value)}
               onKeyDown={e => { if (e.key === 'Enter') check(); }}
               placeholder={`${blankedWords.length} element${blankedWords.length > 1 ? 's' : ''}...`}
+              aria-label="Missing elements"
               className="w-full bg-port-bg border border-port-border rounded px-4 py-2.5 text-white placeholder-gray-600 focus:border-port-accent focus:outline-none"
             />
           </div>
diff --git a/client/src/components/meatspace/post/MemoryPractice.jsx b/client/src/components/meatspace/post/MemoryPractice.jsx
index 0b71c0577d..1adeaf2665 100644
--- a/client/src/components/meatspace/post/MemoryPractice.jsx
+++ b/client/src/components/meatspace/post/MemoryPractice.jsx
@@ -650,6 +650,7 @@ function MemoryPracticeRunner({ item, mode, onSelectMode, onExitMode, onBack, on
                 onChange={e => setAnswer(e.target.value)}
                 onKeyDown={e => { if (e.key === 'Enter') handleCheckFillBlank(blankWords); }}
                 placeholder={`${blankWords.length} word${blankWords.length > 1 ? 's' : ''} missing...`}
+                aria-label="Missing words"
                 className="w-full bg-port-bg border border-port-border rounded px-4 py-2.5 text-white placeholder-gray-600 focus:border-port-accent focus:outline-none"
               />
             </div>
diff --git a/client/src/components/meatspace/post/MorseTrainer.jsx b/client/src/components/meatspace/post/MorseTrainer.jsx
index c07e546adc..dfa5ebb686 100644
--- a/client/src/components/meatspace/post/MorseTrainer.jsx
+++ b/client/src/components/meatspace/post/MorseTrainer.jsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef, useCallback } from 'react';
+import { useState, useEffect, useRef, useCallback, useId } from 'react';
 import { ArrowLeft, Radio, Headphones, Hand, EyeOff, CheckCircle, XCircle, Play, RefreshCw, Volume2, GitBranch, List as ListIcon, Ruler, Eraser } from 'lucide-react';
 import useDrawerTab from '../../../hooks/useDrawerTab';
 import useAudioSessionClaim from '../../../hooks/useAudioSessionClaim.js';
@@ -642,13 +642,18 @@ function SettingsPanel({ prefs, updatePrefs, onResetProgress, trainingStats }) {
 }
 
 function SliderRow({ label, value, min, max, step = 1, onChange, suffix = '', hint }) {
+  // The row already shows the label; pair it to the slider rather than
+  // duplicating it into an aria-label. Wrapping instead would pull the live
+  // value readout beside it into the accessible name.
+  const sliderId = useId();
   return (
     <div>
       <div className="flex items-center justify-between mb-1">
-        <label className="text-xs text-gray-400 uppercase tracking-wide">{label}</label>
+        <label htmlFor={sliderId} className="text-xs text-gray-400 uppercase tracking-wide">{label}</label>
         <span className="text-sm text-white font-mono">{value}{suffix && ` ${suffix}`}</span>
       </div>
       <input
+        id={sliderId}
         type="range"
         min={min}
         max={max}
@@ -1141,6 +1146,7 @@ function CopyDrill({ prefs, updatePrefs, ensureCtx, claimSession, releaseSession
           autoFocus
           className="w-full px-4 py-3 bg-port-bg border border-port-border focus:border-port-accent rounded-lg text-white text-center font-mono text-lg uppercase tracking-widest outline-none"
           placeholder="????"
+          aria-label="Decoded characters"
         />
       )}
       {feedback && (
diff --git a/client/src/components/meatspace/post/PostCognitiveDrillRunner.jsx b/client/src/components/meatspace/post/PostCognitiveDrillRunner.jsx
index 484cb07b34..1b89e8d262 100644
--- a/client/src/components/meatspace/post/PostCognitiveDrillRunner.jsx
+++ b/client/src/components/meatspace/post/PostCognitiveDrillRunner.jsx
@@ -652,6 +652,7 @@ function DigitSpanRunner({ drill, drillIndex, drillCount, onComplete, isTraining
             value={input}
             onChange={e => setInput(e.target.value.replace(/\D/g, ''))}
             placeholder="Digits"
+            aria-label="Your answer"
             autoFocus
             className="flex-1 bg-port-bg border border-port-border rounded-lg px-4 py-3 text-2xl font-mono text-white text-center tracking-widest placeholder-gray-600 focus:border-rose-400 focus:outline-none"
           />
diff --git a/client/src/components/meatspace/post/PostDrillRunner.jsx b/client/src/components/meatspace/post/PostDrillRunner.jsx
index dc904295e8..602be6e350 100644
--- a/client/src/components/meatspace/post/PostDrillRunner.jsx
+++ b/client/src/components/meatspace/post/PostDrillRunner.jsx
@@ -215,6 +215,7 @@ export default function PostDrillRunner({ session }) {
           value={inputValue}
           onChange={e => setInputValue(e.target.value)}
           placeholder="Answer"
+          aria-label="Your answer"
           autoFocus
           className="flex-1 bg-port-bg border border-port-border rounded-lg px-4 py-3 text-xl font-mono text-white text-center placeholder-gray-600 focus:border-port-accent focus:outline-none"
         />
diff --git a/client/src/components/meatspace/post/PostLlmDrillRunner.jsx b/client/src/components/meatspace/post/PostLlmDrillRunner.jsx
index 55d98ea647..f084dc6f9e 100644
--- a/client/src/components/meatspace/post/PostLlmDrillRunner.jsx
+++ b/client/src/components/meatspace/post/PostLlmDrillRunner.jsx
@@ -634,6 +634,7 @@ function StoryRecallUI({ exercise, phase, onStartRecall, items, inputValue, setI
                   onChange={e => i === items.length && setInputValue(e.target.value)}
                   disabled={i !== items.length}
                   placeholder="Your answer..."
+                  aria-label="Your answer"
                   autoFocus={i === items.length}
                   className="flex-1 bg-port-bg border border-port-border rounded px-3 py-1.5 text-sm text-white placeholder-gray-600 focus:border-port-accent focus:outline-none disabled:opacity-50"
                 />
@@ -675,6 +676,7 @@ function VerbalFluencyUI({ category, items, inputValue, setInputValue, onAddItem
           value={inputValue}
           onChange={e => setInputValue(e.target.value)}
           placeholder="Type an item and press Enter..."
+          aria-label="Next item"
           autoFocus
           className="flex-1 bg-port-bg border border-port-border rounded-lg px-4 py-2.5 text-white placeholder-gray-600 focus:border-port-accent focus:outline-none"
         />
@@ -803,6 +805,7 @@ function AlternativeUsesUI({ object, items, inputValue, setInputValue, onAddItem
           value={inputValue}
           onChange={e => setInputValue(e.target.value)}
           placeholder="Type a creative use and press Enter..."
+          aria-label="Next creative use"
           autoFocus
           className="flex-1 bg-port-bg border border-port-border rounded-lg px-4 py-2.5 text-white placeholder-gray-600 focus:border-port-accent focus:outline-none"
         />
diff --git a/client/src/components/meatspace/post/WordplayDrillUI.jsx b/client/src/components/meatspace/post/WordplayDrillUI.jsx
index 38cd2a1f9a..ef0465bc4d 100644
--- a/client/src/components/meatspace/post/WordplayDrillUI.jsx
+++ b/client/src/components/meatspace/post/WordplayDrillUI.jsx
@@ -130,6 +130,7 @@ export function CompoundChainUI({ challenge, items, inputValue, setInputValue, o
           value={inputValue}
           onChange={e => setInputValue(e.target.value)}
           placeholder="Type the full compound or just the other half..."
+          aria-label="Your answer"
           autoFocus
           className="flex-1 bg-port-bg border border-port-border rounded-lg px-4 py-2.5 text-white placeholder-gray-600 focus:border-port-accent focus:outline-none"
         />
@@ -185,6 +186,7 @@ export function BridgeWordUI({ puzzle, inputValue, setInputValue, onSubmit, inpu
           value={inputValue}
           onChange={e => setInputValue(e.target.value)}
           placeholder="The bridge word is..."
+          aria-label="Bridge word"
           autoFocus
           className="w-full bg-port-bg border border-port-border rounded-lg px-4 py-3 text-white text-center text-lg placeholder-gray-600 focus:border-port-accent focus:outline-none"
         />
diff --git a/client/src/components/settings/VoiceTab.jsx b/client/src/components/settings/VoiceTab.jsx
index 24c02655f2..77b085ce92 100644
--- a/client/src/components/settings/VoiceTab.jsx
+++ b/client/src/components/settings/VoiceTab.jsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback, useId, Children, cloneElement, isValidElement } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { Link } from 'react-router';
 import { Save, Mic, Play, Zap, RefreshCw, Globe } from 'lucide-react';
 import toast from '../ui/Toast';
@@ -11,6 +11,7 @@ import { playWav, webSpeechSupported } from '../../services/voiceClient';
 import { nanoAvailability } from '../../services/browserLlm';
 import { readVoiceHidden, writeVoiceHidden } from '../../services/voiceVisibility';
 import { formatVoiceLabel } from '../../lib/voiceLabel';
+import FormField from '../ui/FormField';
 
 const SERVICE_LABELS = {
   whisper: 'Whisper (STT)',
@@ -70,23 +71,6 @@ const ServiceBadge = ({ label, probe }) => {
   );
 };
 
-const Field = ({ label, hint, children, className = '' }) => {
-  const id = useId();
-  // Inject `id` into the first child element so the label's htmlFor resolves.
-  const augmented = Children.map(children, (child, i) =>
-    i === 0 && isValidElement(child) && !child.props.id
-      ? cloneElement(child, { id })
-      : child
-  );
-  return (
-    <div className={`space-y-1 ${className}`}>
-      <label htmlFor={id} className="block text-sm text-gray-400">{label}</label>
-      {hint && <p className="text-xs text-gray-500">{hint}</p>}
-      {augmented}
-    </div>
-  );
-};
-
 const inputCls = 'w-full bg-port-bg border border-port-border rounded-lg px-3 py-2 text-sm text-white focus:outline-none focus:border-port-accent';
 
 export function VoiceTab() {
@@ -354,16 +338,16 @@ export function VoiceTab() {
       </div>
 
       <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <Field label="Hotkey" hint="Hold to talk (keyboard).">
+        <FormField label="Hotkey" hint="Hold to talk (keyboard).">
           <input
             type="text"
             value={cfg.hotkey}
             onChange={(e) => patch('hotkey', e.target.value)}
             className={inputCls}
           />
-        </Field>
+        </FormField>
 
-        <Field label="TTS engine" hint="Kokoro is higher quality and runs in-process. Piper is a small CLI binary.">
+        <FormField label="TTS engine" hint="Kokoro is higher quality and runs in-process. Piper is a small CLI binary.">
           <select
             value={engine}
             onChange={(e) => patch('tts.engine', e.target.value)}
@@ -373,9 +357,9 @@ export function VoiceTab() {
               <option key={opt.value} value={opt.value}>{opt.label}</option>
             ))}
           </select>
-        </Field>
+        </FormField>
 
-        <Field label={`${engine === 'kokoro' ? 'Kokoro' : 'Piper'} voice`} hint={
+        <FormField label={`${engine === 'kokoro' ? 'Kokoro' : 'Piper'} voice`} hint={
           engine === 'kokoro'
             ? 'Grade letter = Kokoro author\'s quality rating. ❤️ 🔥 🎧 mark the best-sounding voices. Click ▶ to preview without saving.'
             : 'Curated Piper catalog — selecting a ⬇ voice fetches it immediately so you can preview. Click ▶ to audition.'
@@ -423,10 +407,10 @@ export function VoiceTab() {
                 : <Play size={14} />}
             </button>
           </div>
-        </Field>
+        </FormField>
 
         {engine === 'kokoro' && (
-          <Field label="Kokoro precision" hint="Lower precision = smaller download + faster, slight quality cost.">
+          <FormField label="Kokoro precision" hint="Lower precision = smaller download + faster, slight quality cost.">
             <select
               value={cfg.tts.kokoro?.dtype || 'q8'}
               onChange={(e) => patch('tts.kokoro.dtype', e.target.value)}
@@ -436,19 +420,19 @@ export function VoiceTab() {
                 <option key={opt.value} value={opt.value}>{opt.label}</option>
               ))}
             </select>
-          </Field>
+          </FormField>
         )}
 
-        <Field label="Speech rate" hint="0.5 = slow, 1.0 = normal, 2.0 = fast">
+        <FormField label="Speech rate" hint="0.5 = slow, 1.0 = normal, 2.0 = fast">
           <input
             type="number" min="0.5" max="2" step="0.1"
             value={cfg.tts.rate ?? 1.0}
             onChange={(e) => patch('tts.rate', parseFloat(e.target.value) || 1.0)}
             className={inputCls}
           />
-        </Field>
+        </FormField>
 
-        <Field label="STT engine" hint={webSpeechSupported
+        <FormField label="STT engine" hint={webSpeechSupported
           ? 'Web Speech = browser-native, zero-latency, but quality varies by browser and only works in Chrome/Edge. Whisper = local, consistent, offline.'
           : 'Web Speech unavailable in this browser (Chrome/Edge only). Whisper it is.'}>
           <select
@@ -462,11 +446,11 @@ export function VoiceTab() {
               </option>
             ))}
           </select>
-        </Field>
+        </FormField>
 
         {sttEngine === 'whisper' && (
           <>
-            <Field label="Whisper model" hint="Bigger = more accurate, slower, larger download.">
+            <FormField label="Whisper model" hint="Bigger = more accurate, slower, larger download.">
               <select
                 value={cfg.stt.model || 'base.en'}
                 onChange={(e) => handleWhisperModel(e.target.value)}
@@ -476,20 +460,20 @@ export function VoiceTab() {
                   <option key={m.value} value={m.value}>{m.label}</option>
                 ))}
               </select>
-            </Field>
+            </FormField>
 
-            <Field label="Whisper endpoint">
+            <FormField label="Whisper endpoint">
               <input
                 type="text"
                 value={cfg.stt.endpoint}
                 onChange={(e) => patch('stt.endpoint', e.target.value)}
                 className={inputCls}
               />
-            </Field>
+            </FormField>
           </>
         )}
 
-        <Field label="LLM provider" hint="Voice streams tokens, so only API providers (LM Studio, Ollama, OpenAI-compatible) are listed. Configure providers under Settings → Providers.">
+        <FormField label="LLM provider" hint="Voice streams tokens, so only API providers (LM Studio, Ollama, OpenAI-compatible) are listed. Configure providers under Settings → Providers.">
           <select
             value={llmProvider}
             onChange={(e) => {
@@ -511,11 +495,12 @@ export function VoiceTab() {
             ))}
             {apiProviders.length === 0 && <option value={llmProvider}>{llmProvider}</option>}
           </select>
-        </Field>
+        </FormField>
 
-        {/* Not wrapped in <Field>: the select sits beside a refresh button, so
-            the id must land on the <select> (Field injects it onto the first
-            child, which would be the flex wrapper — orphaning the label). */}
+        {/* Not wrapped in <FormField>: the select sits beside a refresh button,
+            so the id must land on the <select> (FormField injects it onto the
+            first child, which would be the flex wrapper — orphaning the
+            label). */}
         <div className="space-y-1">
           <label htmlFor="voice-llm-model" className="block text-sm text-gray-400">LLM model</label>
           <p className="text-xs text-gray-500">'auto' uses the provider's default model, or the fastest loaded model for LM Studio / Ollama.</p>
@@ -591,31 +576,31 @@ export function VoiceTab() {
 
         {cfg.llm.usePersonality !== false ? (
           <>
-            <Field label="Name" hint="What the assistant calls itself.">
+            <FormField label="Name" hint="What the assistant calls itself.">
               <input
                 type="text"
                 value={cfg.llm.personality?.name ?? ''}
                 onChange={(e) => patch('llm.personality.name', e.target.value)}
                 className={inputCls}
               />
-            </Field>
-            <Field label="Role" hint="The role it plays for you.">
+            </FormField>
+            <FormField label="Role" hint="The role it plays for you.">
               <input
                 type="text"
                 value={cfg.llm.personality?.role ?? ''}
                 onChange={(e) => patch('llm.personality.role', e.target.value)}
                 className={inputCls}
               />
-            </Field>
-            <Field label="Speech style" hint="e.g. 'casual and brief', 'formal and precise'.">
+            </FormField>
+            <FormField label="Speech style" hint="e.g. 'casual and brief', 'formal and precise'.">
               <input
                 type="text"
                 value={cfg.llm.personality?.speechStyle ?? ''}
                 onChange={(e) => patch('llm.personality.speechStyle', e.target.value)}
                 className={inputCls}
               />
-            </Field>
-            <Field label="Traits (comma-separated)" hint="e.g. 'concise, warm, proactive'.">
+            </FormField>
+            <FormField label="Traits (comma-separated)" hint="e.g. 'concise, warm, proactive'.">
               <input
                 type="text"
                 value={(cfg.llm.personality?.traits || []).join(', ')}
@@ -623,25 +608,25 @@ export function VoiceTab() {
                   e.target.value.split(',').map((s) => s.trim()).filter(Boolean))}
                 className={inputCls}
               />
-            </Field>
-            <Field label="Custom prompt (optional)" className="md:col-span-2" hint="Any extra context or instructions appended to the system prompt.">
+            </FormField>
+            <FormField label="Custom prompt (optional)" className="md:col-span-2" hint="Any extra context or instructions appended to the system prompt.">
               <textarea
                 value={cfg.llm.personality?.customPrompt ?? ''}
                 onChange={(e) => patch('llm.personality.customPrompt', e.target.value)}
                 rows={2}
                 className={`${inputCls} font-mono text-xs`}
               />
-            </Field>
+            </FormField>
           </>
         ) : (
-          <Field label="System prompt" className="md:col-span-2">
+          <FormField label="System prompt" className="md:col-span-2">
             <textarea
               value={cfg.llm.systemPrompt}
               onChange={(e) => patch('llm.systemPrompt', e.target.value)}
               rows={2}
               className={`${inputCls} font-mono text-xs`}
             />
-          </Field>
+          </FormField>
         )}
 
         <label className="flex items-start gap-3 cursor-pointer md:col-span-2">
@@ -676,7 +661,7 @@ export function VoiceTab() {
 
         {cfg.llm.codeAgent?.enabled === true && (
           <div className="md:col-span-2 grid grid-cols-1 sm:grid-cols-2 gap-3 pl-7">
-            <Field label="Coding agent" hint="Which CLI/TUI agent runs the task. 'System default' uses your active AI provider (Settings → Providers).">
+            <FormField label="Coding agent" hint="Which CLI/TUI agent runs the task. 'System default' uses your active AI provider (Settings → Providers).">
               <select
                 value={codeProvider}
                 onChange={(e) => {
@@ -696,8 +681,8 @@ export function VoiceTab() {
                   </option>
                 ))}
               </select>
-            </Field>
-            <Field label="Model" hint="'System default' lets the agent pick per task complexity.">
+            </FormField>
+            <FormField label="Model" hint="'System default' lets the agent pick per task complexity.">
               <select
                 value={codeModel}
                 onChange={(e) => patch('llm.codeAgent.model', e.target.value)}
@@ -709,7 +694,7 @@ export function VoiceTab() {
                   <option key={m} value={m}>{m}</option>
                 ))}
               </select>
-            </Field>
+            </FormField>
             <label className="flex items-start gap-3 cursor-pointer sm:col-span-2">
               <input
                 type="checkbox"
@@ -753,7 +738,7 @@ export function VoiceTab() {
               />
               <span className="text-sm text-white">Quiet hours</span>
             </label>
-            <Field label="Start (HH:MM)" hint="Local time">
+            <FormField label="Start (HH:MM)" hint="Local time">
               <input
                 type="time"
                 value={cfg.llm.proactive?.quietHours?.start || '22:00'}
@@ -761,8 +746,8 @@ export function VoiceTab() {
                 disabled={!cfg.llm.proactive?.quietHours?.enabled}
                 className="w-full px-3 py-2 bg-port-bg border border-port-border rounded text-white text-sm disabled:opacity-50"
               />
-            </Field>
-            <Field label="End (HH:MM)" hint="Local time">
+            </FormField>
+            <FormField label="End (HH:MM)" hint="Local time">
               <input
                 type="time"
                 value={cfg.llm.proactive?.quietHours?.end || '07:00'}
@@ -770,7 +755,7 @@ export function VoiceTab() {
                 disabled={!cfg.llm.proactive?.quietHours?.enabled}
                 className="w-full px-3 py-2 bg-port-bg border border-port-border rounded text-white text-sm disabled:opacity-50"
               />
-            </Field>
+            </FormField>
           </div>
         )}
 
@@ -867,7 +852,7 @@ export function VoiceTab() {
                     </p>
                   )}
                   <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
-                    <Field label="Temperature" hint="0 = deterministic, higher = more varied. Default 0.7.">
+                    <FormField label="Temperature" hint="0 = deterministic, higher = more varied. Default 0.7.">
                       <input
                         type="number"
                         min="0"
@@ -880,8 +865,8 @@ export function VoiceTab() {
                         }}
                         className={inputCls}
                       />
-                    </Field>
-                    <Field label="Top-K" hint="Sampling breadth. Default 3.">
+                    </FormField>
+                    <FormField label="Top-K" hint="Sampling breadth. Default 3.">
                       <input
                         type="number"
                         min="1"
@@ -894,7 +879,7 @@ export function VoiceTab() {
                         }}
                         className={inputCls}
                       />
-                    </Field>
+                    </FormField>
                   </div>
                 </div>
               )}

From 21c75472e336d871b9f83090fbf6dfd552a28344 Mon Sep 17 00:00:00 2001
From: "[._.]/ Adam Eivy" <atomantic@gmail.com>
Date: Sat, 15 Aug 2026 20:17:29 +0000
Subject: [PATCH 2/2] address /simplify review: verify the FormField name,
 share the scan, label JobsTab's forms (#4156)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Review of the previous commit surfaced two defects in its own fixes and three
cleanups:

- JobsTab's create/edit forms are stacked full-width fields whose only visible
  affordance was a placeholder. Naming them with aria-label satisfied the guard
  while leaving sighted users with no label the moment they typed — the
  placeholder-as-label defect preserved and certified as fixed. They now use
  FormField, like the rest of the diff.
- Two aria-labels truncated the `title` text that was already serving as the
  accessible name ("Cron expression" for "Cron expression: minute hour
  dayOfMonth month dayOfWeek"). Folded the detail back in.
- isNestedInLabeledFormField credited any element literally spelled
  <FormField>, unverified, across 313 call sites — the guard's widest
  exemption. It now requires the file to import the shared component.
- The two allowlist rules re-scanned every tracked file independently. They
  share one memoized scan: same question, opposite comparison. Suite time for
  the file drops ~30%, and the two can no longer drift on what "unnamed" means.
- localLabelWrapperNames and localHtmlForForwarders had byte-identical
  declaration-walking prologues; both now consume forEachLocalComponent.
  isEnclosedInListCall reuses balancedCallAt instead of hand-rolling a fourth
  string-aware paren scanner.

Follow-ups filed: #4317 (unify the wrapper recognizers; arrow-function and
imported wrappers are both invisible today) and #4318 (an apostrophe in JSX
text breaks matchingBraceEnd, which is why one AIProviders field stays on the
allowlist while its four identical siblings came off).
---
 client/src/a11yConventions.test.js         | 148 ++++++++++++---------
 client/src/components/cos/tabs/JobsTab.jsx | 101 +++++++-------
 2 files changed, 136 insertions(+), 113 deletions(-)

diff --git a/client/src/a11yConventions.test.js b/client/src/a11yConventions.test.js
index 4b1af047e4..d0a61efe29 100644
--- a/client/src/a11yConventions.test.js
+++ b/client/src/a11yConventions.test.js
@@ -472,30 +472,21 @@ function localHtmlForForwarders(src) {
   const cached = htmlForForwardersBySource.get(src);
   if (cached) return cached;
   const forwarders = new Map();
-  const re = /function\s+([A-Z][\w]*)\s*\(/g;
-  let match;
-  while ((match = re.exec(src))) {
-    const parenIndex = match.index + match[0].length - 1;
-    const params = balancedCallAt(src, parenIndex);
-    if (!params) continue;
-    const bodyStart = src.indexOf('{', parenIndex + params.length);
-    if (bodyStart === -1) continue;
-    const bodyEnd = matchingBraceEnd(src, bodyStart);
-    if (bodyEnd === -1) continue;
-    const body = src.slice(bodyStart, bodyEnd);
+  forEachLocalComponent(src, (name, body, params) => {
     // The <label> has to do both jobs before the call site's attributes can be
     // trusted: point at one prop, and render another prop as its own text. A
     // component that forwards the id onto a <label> it never fills with text
     // names nothing.
     const shape = /<label\b[^>]*\bhtmlFor\s*=\s*\{\s*([A-Za-z_$][\w$]*)\s*\}(?:[^>]*[^/>])?>(?:(?!<\/label>)[\s\S])*?\{\s*([A-Za-z_$][\w$]*)\s*\}/.exec(body);
-    if (!shape) continue;
+    if (!shape) return;
     const [, idProp, labelProp] = shape;
     // Both names must be parameters of this component. A <label> pointed at a
     // module-level constant forwards nothing from the call site, so reading the
     // call site's same-named attribute would exempt an unrelated control.
-    if (![idProp, labelProp].every((prop) => new RegExp(`\\b${prop}\\b`).test(params))) continue;
-    forwarders.set(match[1], { idProp, labelProp });
-  }
+    const parameterNames = new Set(params.match(/[A-Za-z_$][\w$]*/g));
+    if (!parameterNames.has(idProp) || !parameterNames.has(labelProp)) return;
+    forwarders.set(name, { idProp, labelProp });
+  });
   htmlForForwardersBySource.set(src, forwarders);
   return forwarders;
 }
@@ -584,23 +575,18 @@ function hasUsableNativeInputName(tag) {
 // crediting every control in a `.map()` would exempt the ones that stay
 // unnamed).
 function isEnclosedInListCall(src, start, index) {
-  const callStack = [];
-  for (let cursor = start; cursor < index; cursor++) {
-    const c = src[cursor];
-    if (c === '"' || c === "'" || c === '`') {
-      for (cursor++; cursor < index && src[cursor] !== c; cursor++) if (src[cursor] === '\\') cursor++;
-      continue;
-    }
-    // Only a call that still encloses the control disqualifies it. A `.map()`
-    // in the ternary's OTHER branch has already closed by then, so testing for
-    // the text anywhere before the control would reject the whole shape.
-    if (c === '(') callStack.push(/\.(?:map|flatMap)\s*$/.test(src.slice(start, cursor)));
-    else if (c === ')') callStack.pop();
+  // Only a call that STILL encloses the control disqualifies it — a `.map()`
+  // in the ternary's other branch has already closed by then, so testing for
+  // the text anywhere before the control would reject the whole shape.
+  for (const call of src.slice(start, index).matchAll(/\.(?:map|flatMap)\s*\(/g)) {
+    const openParen = start + call.index + call[0].length - 1;
+    const args = balancedCallAt(src, openParen);
+    if (!args || openParen + args.length > index) return true;
   }
-  return callStack.some(Boolean);
+  return false;
 }
 
-function isDirectElementInExpression(src, start, end, index) {
+function isDirectElementInExpression(src, start, index) {
   if (isEnclosedInListCall(src, start, index)) return false;
   let depth = 0;
   let cursor = start;
@@ -613,20 +599,33 @@ function isDirectElementInExpression(src, start, end, index) {
     }
     if (src.startsWith('</', cursor)) {
       const close = src.indexOf('>', cursor);
-      if (close === -1 || close > end) return false;
+      if (close === -1) return false;
       if (depth > 0) depth--;
       cursor = close + 1;
       continue;
     }
     const tag = tagBoundaryAt(src, cursor);
-    if (!tag || tag.end > end) return false;
+    if (!tag) return false;
     if (!tag.selfClosing) depth++;
     cursor = tag.end;
   }
   return depth === 0;
 }
 
+// The other two recognizers read a wrapper's own source before trusting it.
+// This one cannot — FormField is imported, not declared here — so at minimum
+// require that the name really is the shared component. Without the check a
+// file that declares or imports its own `FormField` exempts every control
+// under it, and that is the guard's widest exemption by far.
+// Matches every specifier the tree actually uses — `../ui/FormField`,
+// `../components/ui/FormField`, the one `.jsx`-suffixed import, and
+// `./FormField` from inside components/ui itself.
+function importsSharedFormField(src) {
+  return /\bfrom\s+['"](?:[^'"]*\/)?(?:ui\/)?FormField(?:\.jsx?)?['"]/.test(src);
+}
+
 function isNestedInLabeledFormField(src, index) {
+  if (!importsSharedFormField(src)) return false;
   const formRe = /<FormField\b/g;
   let formMatch;
   while ((formMatch = formRe.exec(src)) && formMatch.index < index) {
@@ -649,7 +648,7 @@ function isNestedInLabeledFormField(src, index) {
         if (end === -1) break;
         if (end >= index) {
           // The control lives inside this expression rather than after it.
-          if (depth === 0 && firstChild === null && isDirectElementInExpression(src, cursor + 1, end, index)) return true;
+          if (depth === 0 && firstChild === null && isDirectElementInExpression(src, cursor + 1, index)) return true;
           break;
         }
         if (src.slice(cursor + 1, end).trim()) firstChild = firstChild || 'expression';
@@ -718,12 +717,14 @@ function isNestedInLabeledFormField(src, index) {
 // from elsewhere stays unknown (FormField has its own dedicated check), and
 // only `function` declarations are matched — a missed wrapper is a false
 // negative that simply leaves its controls on the allowlist.
-const labelWrapperNamesBySource = new Map();
-
-function localLabelWrapperNames(src) {
-  const cached = labelWrapperNamesBySource.get(src);
-  if (cached) return cached;
-  const names = new Set();
+// Both wrapper recognizers below need the same three things out of a same-file
+// component — its name, its body, and (for one of them) its parameter list —
+// so they walk
+// declarations through this one iterator rather than each re-deriving the
+// boundaries. Only `function` declarations are matched; an arrow-function
+// component stays invisible, which is a false negative that simply leaves its
+// controls on the allowlist (tracked in #4317).
+function forEachLocalComponent(src, visit) {
   const re = /function\s+([A-Z][\w]*)\s*\(/g;
   let match;
   while ((match = re.exec(src))) {
@@ -737,14 +738,24 @@ function localLabelWrapperNames(src) {
     if (bodyStart === -1) continue;
     const bodyEnd = matchingBraceEnd(src, bodyStart);
     if (bodyEnd === -1) continue;
-    const body = src.slice(bodyStart, bodyEnd);
+    visit(match[1], src.slice(bodyStart, bodyEnd), params);
+  }
+}
+
+const labelWrapperNamesBySource = new Map();
+
+function localLabelWrapperNames(src) {
+  const cached = labelWrapperNamesBySource.get(src);
+  if (cached) return cached;
+  const names = new Set();
+  forEachLocalComponent(src, (name, body) => {
     // {children} must sit inside a <label> — no </label> may intervene, or a
     // component rendering `<label>Header</label>{children}<label>Footer</label>`
     // would register as a wrapper and exempt controls it never labels. The
     // opening tag must also not be self-closing (`<label … />` wraps nothing,
     // so anything after it is outside the label).
-    if (/<label\b(?:[^>]*[^/>])?>(?:(?!<\/label>)[\s\S])*?\{\s*children\s*\}/.test(body)) names.add(match[1]);
-  }
+    if (/<label\b(?:[^>]*[^/>])?>(?:(?!<\/label>)[\s\S])*?\{\s*children\s*\}/.test(body)) names.add(name);
+  });
   labelWrapperNamesBySource.set(src, names);
   return names;
 }
@@ -1100,23 +1111,33 @@ describe('a11y conventions', () => {
     expect(offenders, `Icon-only <button> with no aria-label/aria-labelledby — title alone isn't touch-discoverable and isn't reliably read as the accessible name; see media/MediaCard.jsx's Annotate button for the convention:\n${offenders.join('\n')}`).toEqual([]);
   });
 
-  it('gives every input an accessible name', () => {
-    // These controls live in compact peer-management rows where visible labels
-    // would break the layout. Keep explicit names on each input so placeholders
-    // never become their only screen-reader context.
-    const offenders = [];
+  // Both rules below ask the same question of every tracked file and differ
+  // only in which direction they compare the answer against the allowlist, so
+  // they share one scan. Two copies would each re-lex ~11MB of source, and —
+  // worse — could drift on what "unnamed" means, which would quietly turn the
+  // burn-down check vacuously green.
+  let unnamedAnchors = null;
+  const unnamedInputAnchors = () => {
+    if (unnamedAnchors) return unnamedAnchors;
+    unnamedAnchors = new Set();
     for (const file of trackedJsxFiles()) {
-      const src = readFileSync(join(CLIENT_ROOT, file), 'utf8');
-      const scanSrc = maskComments(src);
+      const scanSrc = maskComments(readFileSync(join(CLIENT_ROOT, file), 'utf8'));
       const re = /<input\b/g;
       let m;
       while ((m = re.exec(scanSrc))) {
         const tag = openingTagAt(scanSrc, m.index, '<input'.length);
-        const location = inputSourceAnchor(file, scanSrc, m.index);
-        if (!tag || hasAccessibleInputName(scanSrc, tag, m.index) || PREEXISTING_INPUT_NAME_ALLOWLIST.has(location)) continue;
-        offenders.push(location);
+        if (!tag || hasAccessibleInputName(scanSrc, tag, m.index)) continue;
+        unnamedAnchors.add(inputSourceAnchor(file, scanSrc, m.index));
       }
     }
+    return unnamedAnchors;
+  };
+
+  it('gives every input an accessible name', () => {
+    // These controls live in compact peer-management rows where visible labels
+    // would break the layout. Keep explicit names on each input so placeholders
+    // never become their only screen-reader context.
+    const offenders = [...unnamedInputAnchors()].filter((anchor) => !PREEXISTING_INPUT_NAME_ALLOWLIST.has(anchor));
     expect(offenders, `Input without an accessible name — add aria-label/aria-labelledby or an explicit/implicit <label>, or exclude type="hidden":\n${offenders.join('\n')}`).toEqual([]);
   });
 
@@ -1125,18 +1146,8 @@ describe('a11y conventions', () => {
     // or deleted, or renamed so its anchor no longer resolves — is dead weight
     // that quietly re-exempts the next input to land on that same anchor. Fail
     // on it so #4297's burn-down stays honest instead of drifting.
-    const offending = new Set();
-    for (const file of trackedJsxFiles()) {
-      const scanSrc = maskComments(readFileSync(join(CLIENT_ROOT, file), 'utf8'));
-      const re = /<input\b/g;
-      let m;
-      while ((m = re.exec(scanSrc))) {
-        const tag = openingTagAt(scanSrc, m.index, '<input'.length);
-        if (!tag || hasAccessibleInputName(scanSrc, tag, m.index)) continue;
-        offending.add(inputSourceAnchor(file, scanSrc, m.index));
-      }
-    }
-    const stale = [...PREEXISTING_INPUT_NAME_ALLOWLIST].filter((entry) => !offending.has(entry));
+    const unnamed = unnamedInputAnchors();
+    const stale = [...PREEXISTING_INPUT_NAME_ALLOWLIST].filter((entry) => !unnamed.has(entry));
     expect(stale, `PREEXISTING_INPUT_NAME_ALLOWLIST entries that no longer match an unnamed input — delete them:\n${stale.join('\n')}`).toEqual([]);
   });
 
@@ -1196,7 +1207,9 @@ describe('a11y conventions', () => {
     // veto that matters is a rendered LIST — Children.map flattens it and
     // clones only the first element, so crediting each control in a `.map()`
     // would exempt every one after the first.
-    const field = (child) => `<FormField label="Rounds">\n  ${child}\n</FormField>`;
+    // The wrapper is only credited when the file really imports the shared
+    // component, so every fixture carries the import a real call site would.
+    const field = (child) => `import FormField from '../ui/FormField';\n<FormField label="Rounds">\n  ${child}\n</FormField>`;
     const index = (src) => src.indexOf('<input');
 
     const ternary = field(`{isSelect ? (<select><option>a</option></select>) : (<input type="number" />)}`);
@@ -1218,6 +1231,13 @@ describe('a11y conventions', () => {
     // An unlabeled FormField names nothing, whatever its child looks like.
     const unlabeled = ternary.replace(' label="Rounds"', '');
     expect(isNestedInLabeledFormField(unlabeled, index(unlabeled))).toBe(false);
+
+    // This recognizer trusts a component it cannot read the source of, so the
+    // name alone must not be enough — a file with its own local `FormField`
+    // would otherwise exempt every control under it, and that is the widest
+    // exemption the guard grants.
+    const foreign = ternary.replace("from '../ui/FormField'", "from './LocalFormField'");
+    expect(isNestedInLabeledFormField(foreign, index(foreign))).toBe(false);
   });
 
   it('meets the 44px touch-target minimum on Close buttons', () => {
diff --git a/client/src/components/cos/tabs/JobsTab.jsx b/client/src/components/cos/tabs/JobsTab.jsx
index 57ced83f07..930878f07a 100644
--- a/client/src/components/cos/tabs/JobsTab.jsx
+++ b/client/src/components/cos/tabs/JobsTab.jsx
@@ -9,6 +9,7 @@ import { effectiveModelFor, effortAwareModelOptions } from '../../../utils/provi
 import ProviderModelSelector from '../../ProviderModelSelector';
 import EffortSelect from '../EffortSelect';
 import InlineConfirmRow from '../../ui/InlineConfirmRow';
+import FormField from '../../ui/FormField';
 import { useConfirmDelete } from '../../../hooks/useConfirmDelete';
 
 const INTERVAL_OPTIONS = [
@@ -229,7 +230,7 @@ function ScheduleFields({ data, onChange }) {
               className="flex-1 px-3 py-2 bg-port-bg border border-port-border rounded-lg text-white text-sm font-mono"
               placeholder="0 7 * * *"
               title="Cron expression: minute hour dayOfMonth month dayOfWeek"
-              aria-label="Cron expression"
+              aria-label="Cron expression: minute hour dayOfMonth month dayOfWeek"
             />
             <select
               value=""
@@ -264,7 +265,7 @@ function ScheduleFields({ data, onChange }) {
             onChange={e => onChange('scheduledTime', e.target.value || null)}
             className="px-3 py-2 bg-port-bg border border-port-border rounded-lg text-white text-sm"
             title="Run at specific time (leave empty for any time)"
-            aria-label="Run at a specific time"
+            aria-label="Run at a specific time (leave empty for any time)"
           />
         </div>
       )}
@@ -457,22 +458,22 @@ function JobCard({ job, apps, providers, onToggle, onTrigger, onDelete, onUpdate
         <div className="border-t border-port-border p-4 space-y-3">
           {editing ? (
             <>
-              <input
-                type="text"
-                value={editData.name}
-                aria-label="Job name"
-                onChange={e => setEditData(d => ({ ...d, name: e.target.value }))}
-                className="w-full px-3 py-2 bg-port-bg border border-port-border rounded-lg text-white text-sm"
-                placeholder="Job name"
-              />
-              <input
-                type="text"
-                value={editData.description}
-                aria-label="Job description"
-                onChange={e => setEditData(d => ({ ...d, description: e.target.value }))}
-                className="w-full px-3 py-2 bg-port-bg border border-port-border rounded-lg text-white text-sm"
-                placeholder="Description"
-              />
+              <FormField label="Job name" labelClassName="block text-xs text-gray-400 mb-1">
+                <input
+                  type="text"
+                  value={editData.name}
+                  onChange={e => setEditData(d => ({ ...d, name: e.target.value }))}
+                  className="w-full px-3 py-2 bg-port-bg border border-port-border rounded-lg text-white text-sm"
+                />
+              </FormField>
+              <FormField label="Description" labelClassName="block text-xs text-gray-400 mb-1">
+                <input
+                  type="text"
+                  value={editData.description}
+                  onChange={e => setEditData(d => ({ ...d, description: e.target.value }))}
+                  className="w-full px-3 py-2 bg-port-bg border border-port-border rounded-lg text-white text-sm"
+                />
+              </FormField>
               <div className="flex gap-3">
                 <select
                   value={editData.type}
@@ -803,40 +804,42 @@ export default function JobsTab() {
         <div className="bg-port-card border border-port-accent/50 rounded-lg p-4">
           <div className="space-y-3">
             <div className="flex gap-3">
+              <FormField label="Job name *" className="flex-1" labelClassName="block text-xs text-gray-400 mb-1">
+                <input
+                  type="text"
+                  value={newJob.name}
+                  onChange={e => setNewJob(j => ({ ...j, name: e.target.value }))}
+                  className="w-full px-3 py-2 bg-port-bg border border-port-border rounded-lg text-white text-sm"
+                />
+              </FormField>
+              <FormField label="Type" labelClassName="block text-xs text-gray-400 mb-1">
+                <select
+                  value={newJob.type}
+                  onChange={e => setNewJob(j => ({ ...j, type: e.target.value }))}
+                  className="px-3 py-2 bg-port-bg border border-port-border rounded-lg text-white text-sm"
+                >
+                  {JOB_TYPE_OPTIONS.map(opt => (
+                    <option key={opt.value} value={opt.value}>{opt.label}</option>
+                  ))}
+                </select>
+              </FormField>
+              <FormField label="Category" labelClassName="block text-xs text-gray-400 mb-1">
+                <input
+                  type="text"
+                  value={newJob.category}
+                  onChange={e => setNewJob(j => ({ ...j, category: e.target.value }))}
+                  className="w-40 px-3 py-2 bg-port-bg border border-port-border rounded-lg text-white text-sm"
+                />
+              </FormField>
+            </div>
+            <FormField label="Description" labelClassName="block text-xs text-gray-400 mb-1">
               <input
                 type="text"
-                placeholder="Job name *"
-                aria-label="New job name"
-                value={newJob.name}
-                onChange={e => setNewJob(j => ({ ...j, name: e.target.value }))}
-                className="flex-1 px-3 py-2 bg-port-bg border border-port-border rounded-lg text-white text-sm"
-              />
-              <select
-                value={newJob.type}
-                onChange={e => setNewJob(j => ({ ...j, type: e.target.value }))}
-                className="px-3 py-2 bg-port-bg border border-port-border rounded-lg text-white text-sm"
-              >
-                {JOB_TYPE_OPTIONS.map(opt => (
-                  <option key={opt.value} value={opt.value}>{opt.label}</option>
-                ))}
-              </select>
-              <input
-                type="text"
-                placeholder="Category"
-                aria-label="New job category"
-                value={newJob.category}
-                onChange={e => setNewJob(j => ({ ...j, category: e.target.value }))}
-                className="w-40 px-3 py-2 bg-port-bg border border-port-border rounded-lg text-white text-sm"
+                value={newJob.description}
+                onChange={e => setNewJob(j => ({ ...j, description: e.target.value }))}
+                className="w-full px-3 py-2 bg-port-bg border border-port-border rounded-lg text-white text-sm"
               />
-            </div>
-            <input
-              type="text"
-              placeholder="Description"
-              aria-label="New job description"
-              value={newJob.description}
-              onChange={e => setNewJob(j => ({ ...j, description: e.target.value }))}
-              className="w-full px-3 py-2 bg-port-bg border border-port-border rounded-lg text-white text-sm"
-            />
+            </FormField>
             <div className="flex gap-3">
               <select
                 value={newJob.priority}