fix(a11y): Field and InlineField — wrap in <label> for implicit form control association by hungdqdesign · Pull Request #1538 · paperclipai/paperclip

hungdqdesign · 2026-03-22T06:36:26Z

Summary

Trước: Field và InlineField dùng <label> chỉ bọc text label, không có htmlFor → không có programmatic association với form control bên trong
Sau: outer <div> → <label className=\"block\"> (Field) / <label className=\"flex items-center gap-3\"> (InlineField) → implicit label association với form control đầu tiên bên trong children

Root cause

HTML spec: <label> chỉ tạo association khi:

Nó bọc trực tiếp form control (implicit), HOẶC
Nó có htmlFor trỏ tới id của form control

Field đang dùng cách 1 nhưng <label> chỉ bọc text, không bọc control → screen readers không biết label này thuộc về control nào.

Scope

Fix ảnh hưởng tất cả <Field> và <InlineField> usages:

All adapter config-fields: claude, codex, cursor, gemini, opencode, pi, http, process, openclaw-gateway
AgentConfigForm, CompanySettings, CompanyImport, runtime-json-fields

A11Y Compliance

WCAG 2.1 AA: 1.3.1 Info and Relationships + 4.1.2 Name, Role, Value
Screen readers sẽ announce label text khi form control được focus

Safety

<label> với interactive children (button): clicking button activates button only, không kích hoạt label's focus behavior
Tailwind class-based styling → không có CSS selector breakage khi đổi từ <div> sang <label>
npx tsc --noEmit pass ✅

Test plan

npx tsc --noEmit pass ✅
Manual: Tab vào các fields trong AgentConfigForm → screen reader announces label text
Visual: Layout không thay đổi (label có block class)

Closes QUA-199

🤖 Generated with Claude Code

… and add missing models (#1357) Cursor CLI now rejects "auto" as a model selection with "Cannot use this model: auto". Change the default to "composer-2" and add "composer-2" + "composer-2-fast" to the fallback model list. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

…awbot.vn Add allowedHosts: "all" to vite server config so that requests from custom domain behind Cloudflare are not blocked. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

…udflare Access

…ers from agent worktree modifications

… production deployments

Break the monolithic AgentDetail page into focused, maintainable modules: - AgentDetail.tsx: slim orchestrator (593 LOC, down from 3988) - agent-detail/OverviewTab.tsx: dashboard with charts, issues, costs - agent-detail/InstructionsTab.tsx: instructions bundle editor - agent-detail/ConfigurationTab.tsx: agent config form + permissions + keys - agent-detail/SkillsTab.tsx: skill management - agent-detail/RunsTab.tsx: run list + run detail (lazy loaded via React.lazy) - agent-detail/LogViewer.tsx: live transcript/log viewer - agent-detail/KeysTab.tsx: API key management - agent-detail/WorkspaceOperations.tsx: workspace operation UI - agent-detail/utils.ts: shared utilities and types RunsTab is lazy-loaded for better initial page performance. No functional changes — pure extraction refactor. QUA-123 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

…calls When /agents/:id/wakeup is called directly (not via the checkout route), the contextSnapshot lacks issueId/projectId/workspaceId, causing the run to fall back to agent_home instead of the project workspace. Now enqueueWakeup auto-detects the agent's in-progress checked-out issue and enriches the context with issueId, projectId, and projectWorkspaceId. Also persists resolved projectId to contextSnapshot when only issueId was provided. Fixes #1387 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

… locks (QUA-12) release() now clears executionRunId, executionAgentNameKey, and executionLockedAt alongside checkoutRunId. Previously these fields persisted after release, causing permanent stale locks that blocked re-checkout by other agents. Adds unit tests verifying all execution fields are nulled on release. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

…nsert (#QUA-91) Gemini adapter output sometimes contains null bytes (0x00) which PostgreSQL rejects in TEXT and JSONB columns. Add stripNullBytes() sanitization at the DB write layer (setRunStatus + appendRunEvent) to protect against any adapter. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

On Windows with WIN1252 system locale, child process stdout/stderr default to the system encoding, causing crashes when adapter output contains Unicode characters. Add setEncoding("utf8") on streams immediately after spawn, matching the pattern used in codex-local. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

…ng-Macmini

…#1465) Users running adapters like codex_local with non-standard models (e.g. grok-4.20-beta) were blocked by the hardcoded model dropdown. Now: - ModelDropdown shows a "Use <custom>" option when search doesn't match any known model - InlineEntitySelector gains allowCustomValue prop for the same behavior - NewIssueDialog model override selector enables custom values - Custom model values display correctly in trigger buttons Closes #1465 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

…rver crash (#1461) When the codex binary is not installed, spawning it emits an unhandled 'error' event that crashes the entire server process. Add an error handler on the child process to catch spawn failures gracefully, and short-circuit subsequent RPC requests with the captured error. The existing try/catch in getQuotaWindows() then returns a proper error response instead of crashing. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

…ssibility (#1473) - Fix sw.js caches.match() returning undefined causing TypeError on offline fallback - Add onError toast to createIssue mutation so users see API errors - Add sr-only DialogTitle to NewIssueDialog, NewGoalDialog, NewProjectDialog, NewAgentDialog, and Routines to suppress Radix UI accessibility warnings Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

cancelActiveForAgentInternal now matches cancelRunInternal's escalation pattern: SIGTERM → grace period → SIGKILL. The runningProcesses entry is deferred until after the grace window to prevent orphaned processes. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

…#1391) Commander.js .requiredOption() validates before the action handler runs, preventing resolveCommandContext() from applying the context profile fallback (PAPERCLIP_COMPANY_ID env var or saved profile companyId). Changed to .option() in all affected commands (dashboard, activity, issue create, agent list, agent local-cli, approval list, approval create). The requireCompany: true check in resolveCommandContext() still ensures companyId is present, with a helpful error message listing all fallback options. Closes #1391 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

CodexRpcClient spawns the codex binary in its class initializer but never listens for the 'error' event. When codex is not installed, Node emits an unhandled ENOENT error that crashes the entire server. Added a proc.on('error') handler that rejects all pending RPC requests, allowing the existing try-catch in getQuotaWindows() to gracefully surface the error instead of crashing. Closes #1461 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

…udflare Access

…ers from agent worktree modifications

… production deployments

…nsert (#QUA-91) Gemini adapter output sometimes contains null bytes (0x00) which PostgreSQL rejects in TEXT and JSONB columns. Add stripNullBytes() sanitization at the DB write layer (setRunStatus + appendRunEvent) to protect against any adapter. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

On Windows with WIN1252 system locale, child process stdout/stderr default to the system encoding, causing crashes when adapter output contains Unicode characters. Add setEncoding("utf8") on streams immediately after spawn, matching the pattern used in codex-local. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

… and add missing models (#1357) Cursor CLI now rejects "auto" as a model selection with "Cannot use this model: auto". Change the default to "composer-2" and add "composer-2" + "composer-2-fast" to the fallback model list. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

…awbot.vn Add allowedHosts: "all" to vite server config so that requests from custom domain behind Cloudflare are not blocked. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

cancelActiveForAgentInternal now matches cancelRunInternal's escalation pattern: SIGTERM → grace period → SIGKILL. The runningProcesses entry is deferred until after the grace window to prevent orphaned processes. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

…1461) The codex adapter's getQuotaWindows spawns the codex CLI in its class constructor. If codex is not installed, spawn emits ENOENT which can crash the server when the Costs → Providers page is loaded. Wrap each adapter.getQuotaWindows() call in try-catch to handle both synchronous throws and async rejections gracefully. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

…s equivalents - packages/db: replaced `cp -r` with `fs.cpSync(..., {recursive: true})` - cli: replaced `chmod +x` with a Node.js platform check that only runs chmodSync on darwin/linux, skipping Windows entirely Closes #1462 Closes #1463 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

…#1165) enqueueWakeup can throw (budget blocked, agent state conflict, etc). Without a try-catch inside the tickTimers loop, one failing agent aborts the entire tick — silently stopping all scheduled heartbeats. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

…ory leak (QUA-87, QUA-89) - budgets.ts: batch-fetch observed amounts to avoid N+1 queries in evaluateBudgetPolicies - heartbeat.ts: convert activeRunExecutions from Set to Map<runId, timestamp> with 4h TTL cleanup to prevent unbounded memory growth if entries are never removed Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

- docs/plans/sdlc-flowchart.md: Mermaid flowchart of intake → spec → dev → QA → release - docs/templates/spec-template.md: Implementation spec template for issue comments - docs/templates/qa-ux-a11y-checklist.md: QA/UX/A11Y review checklist template Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

# Conflicts: # ui/src/pages/IssueDetail.tsx

…e (QUA-192) - FilterBar: add aria-label to remove-filter icon button - PackageFileTree: add aria-label + aria-expanded to chevron toggle button; add aria-label to dir checkbox input - GoalTree: add role=button, tabIndex, onKeyDown to interactive div when onSelect is provided Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

…bBar, InlineEditor, PackageFileTree (QUA-193) Batch 16 A11Y fixes: - AgentIconPicker: add aria-label to icon picker buttons (title alone not sufficient) - StatusIcon: wrap circle span in button with aria-label when !showLabel - PageTabBar: add aria-label="Select page" to mobile select element - InlineEditor: add role/tabIndex/onKeyDown to display mode clickable element - PackageFileTree: add aria-label to file row checkbox input Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

…structionsTab, PluginSettings, CompanySkills, PluginManager (QUA-194) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

…structionsTab, PluginSettings, CompanySkills, PluginManager (QUA-194) Batch 17 A11Y fixes: - AgentDetail: aria-label="More options" on overflow menu button - KeysTab: aria-label for show/hide token and copy token buttons - InstructionsTab: aria-label="Add file" on add file button - PluginSettings: aria-label="Back to plugins" on back button - CompanySkills: aria-label on scan project workspaces button - PluginManager: aria-label for enable/disable and uninstall plugin buttons Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

…s (QUA-195) Batch 18 A11Y fixes: - Companies: aria-label="Save changes" and "Cancel editing" for inline edit buttons - NewIssueDialog: aria-label for execution workspace mode and existing workspace selects - IssueProperties: aria-label for workspace mode and existing workspace selects Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

…9 (QUA-196) - PluginSettings.tsx: aria-label="Back to plugins" on back arrow button - InstructionsTab.tsx: aria-label="Add new file" on "+" icon button - AgentConfigForm.tsx: aria-label for value type select, secret select, and X remove button - PageTabBar.tsx: aria-label prop (default "Page navigation") for mobile select fallback Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

# Conflicts: # ui/src/components/PageTabBar.tsx

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

…-197) - Agent adapter type select: aria-label="Adapter type for {agent.name}" - Import target select: aria-label="Import target" - Collision strategy select: aria-label="Collision strategy" Field component's <label> lacks htmlFor association; these aria-labels ensure screen readers announce the correct purpose for each select. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

…198) - agent-config-primitives.tsx: HintIcon button aria-label={text} (tooltip hint text as label) - NewIssueDialog.tsx: MoreHorizontal date options button aria-label="More date options" - AgentDetail.tsx: Agent icon picker trigger aria-label="Change agent icon" - openclaw-gateway/config-fields.tsx: Session strategy select aria-label="Session strategy" Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

# Conflicts: # ui/src/components/agent-config-primitives.tsx

# Conflicts: # ui/src/pages/agent-detail/InstructionsTab.tsx

…control association Before: <label> chỉ bọc text label → không có programmatic association với form control. After: outer <div> → <label className="block/flex"> → implicit association với form control đầu tiên bên trong. WCAG 2.1 AA: 1.3.1 Info and Relationships + 4.1.2 Name, Role, Value Fixes all Field/InlineField usages across: - All adapter config-fields (claude, codex, cursor, gemini, opencode, pi, http, process, openclaw-gateway) - AgentConfigForm, CompanySettings, CompanyImport, runtime-json-fields Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

greptile-apps · 2026-03-22T06:36:30Z

Too many files changed for review. (137 files found, 100 file limit)

Resolved conflict: AgentDetail.tsx was refactored into smaller components. Applied scope="col" fix to OverviewTab.tsx where table headers were moved. aria-label="More options" was already present in master. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

…hecked, aria-label, type=button ToggleField button: - type="button" — prevent accidental form submission - role="switch" — correct ARIA role for a two-state toggle - aria-checked={checked} — communicate on/off state to screen readers - aria-label={label} — describe what this toggle controls ToggleWithNumber button: same fixes as above. ToggleWithNumber number input: aria-label="${label} value in ${numberLabel}" e.g. "Heartbeat on interval value in sec" WCAG 2.1 AA: 4.1.2 Name, Role, Value Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

hungdqdesign and others added 30 commits March 21, 2026 00:24

Manual sync 2026-03-21 $(date '+%H:%M')

0f6b0f3

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

fix(vite): allow all hosts to fix blocked request on paperclip.opencl…

1c36df6

…awbot.vn Add allowedHosts: "all" to vite server config so that requests from custom domain behind Cloudflare are not blocked. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

fix: allow all Vite hosts in dev middleware - security handled by Clo…

0030168

…udflare Access

fix(dev): disable dev watcher intervals to prevent false restart bann…

2f45e99

…ers from agent worktree modifications

chore(ui): permanently hide dev restart banner for pm2/cron scheduled…

7cf68c8

… production deployments

Merge branch 'master' of https://github.com/hungdqdesign/paperclip-Hu…

2111d1e

…ng-Macmini

fix: allow all Vite hosts in dev middleware - security handled by Clo…

c1e960a

…udflare Access

fix(dev): disable dev watcher intervals to prevent false restart bann…

1f18752

…ers from agent worktree modifications

chore(ui): permanently hide dev restart banner for pm2/cron scheduled…

7540618

… production deployments

Manual sync 2026-03-21 $(date '+%H:%M')

7f625ec

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

fix(vite): allow all hosts to fix blocked request on paperclip.opencl…

e7796c3

…awbot.vn Add allowedHosts: "all" to vite server config so that requests from custom domain behind Cloudflare are not blocked. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

hungdqdesign and others added 24 commits March 22, 2026 12:09

Merge branch 'fix/icon-buttons-aria-label-qua-183'

b9f7048

# Conflicts: # ui/src/pages/IssueDetail.tsx

Merge branch 'fix/dialog-sidebar-aria-label-qua-189'

ff5a9b1

fix(a11y): add aria-label to icon buttons in AgentDetail, KeysTab, In…

bb6b99a

…structionsTab, PluginSettings, CompanySkills, PluginManager (QUA-194) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Merge branch 'fix/a11y-batch17-aria-labels-qua-194'

4133461

Merge branch 'fix/a11y-batch18-aria-label-qua-195'

85aca98

Merge branch 'fix/a11y-filterbar-packagefiletree-goaltree-qua-192'

49f2fea

Merge branch 'fix/a11y-batch16-aria-attrs-qua-193'

e3f353c

# Conflicts: # ui/src/components/PageTabBar.tsx

fix(a11y): remove duplicate aria-label in InstructionsTab

07cd05c

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Merge branch 'fix/orgchart-svg-hinticon-a11y-qua-173'

082afae

# Conflicts: # ui/src/components/agent-config-primitives.tsx

Merge branch 'fix/a11y-batch17-aria-label-qua-194'

a79972b

# Conflicts: # ui/src/pages/agent-detail/InstructionsTab.tsx

Merge branch 'fix/stale-queued-run-lock-1390'

f1573ea

Merge branch 'fix/create-issue-button-gh-1473'

01a8b68

Merge branch 'fix/codex-spawn-enoent-1461'

9092326

Merge branch 'fix/cli-required-option-company-id-1391'

996baa4

hungdqdesign requested review from cryppadotta and devinfoley as code owners March 22, 2026 06:36

hungdqdesign and others added 2 commits March 22, 2026 13:39

hungdqdesign closed this by deleting the head repository Mar 23, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(a11y): Field and InlineField — wrap in <label> for implicit form control association#1538

fix(a11y): Field and InlineField — wrap in <label> for implicit form control association#1538
hungdqdesign wants to merge 140 commits intopaperclipai:masterfrom
hungdqdesign:fix/a11y-field-label-association-qua-199

hungdqdesign commented Mar 22, 2026

Uh oh!

greptile-apps bot commented Mar 22, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

hungdqdesign commented Mar 22, 2026

Summary

Root cause

Scope

A11Y Compliance

Safety

Test plan

Uh oh!

greptile-apps bot commented Mar 22, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant