Skip to content

fix(web): label six forms for screen readers - #6068

Merged
intentionally-left-nil merged 5 commits into
Kilo-Org:mainfrom
maphew:fix/web-accessible-form-labels
Sep 18, 2026
Merged

intentionally-left-nil merged 5 commits into
Kilo-Org:mainfrom
maphew:fix/web-accessible-form-labels

Conversation

@maphew

@maphew maphew commented Sep 11, 2026 •

Copy link
Copy Markdown
Contributor

Problem

Issue #4172 asks for accessible labels on web forms. Six of the listed forms still fail the acceptance criteria:

  • The password show/hide buttons are outside the keyboard tab order. They have no name.
  • The password length rule is not linked to the password input.
  • The Create Town name label is not linked to its input.
  • The Invite Member email error is not linked to the email input.
  • The app prompt and TTFB search inputs have no accessible name.
  • The Wasteland name error and organization selector are not linked.

Change

This class of defect shares one cause: a control has no programmatic identity, or its validation text is not linked. This PR fixes the six forms together.

  • PasswordFormFields: keep the show/hide buttons in the tab order. Add aria-label, aria-pressed, and aria-controls. Link the length rule to the password input.
  • CreateTownDialog: link the label to the input with htmlFor and id.
  • InviteMemberDialog: set aria-invalid and aria-describedby on the email input. Name the role trigger.
  • PromptInput: name the text area and the icon-only send and stop buttons.
  • TtfbAlertingContent and AddModelDialog: name the search inputs.
  • NewWastelandWizardClient: link the name and organization errors. Add a named ownership radiogroup.
  • RadioGroup: forward ARIA props. This lets callers label a group.

Tests

Add a server-render test for the password fields. It checks both toggle buttons, the keyboard reachability, the toggle state, the linked length rule, and the hidden state when protection is off.

Verification

  • pnpm exec tsgo --noEmit (apps/web) passes.
  • pnpm exec oxlint passes on all changed files.
  • oxfmt passes on all changed files.
  • The new Jest test needs a local Postgres database. This sandbox has none. I re-ran the same assertions with renderToStaticMarkup under tsx. All assertions pass. CI runs the full suite.
  • Two independent adversarial reviews examined the first revision. This revision fixes their findings: a missing React import for the Jest JSX transform, the dropped RadioGroup label, an unnamed role trigger, a select label that hid the selected value, unnamed icon buttons, and a missing live region on the setup error.

Refs #4172.

@maphew
maphew marked this pull request as ready for review September 11, 2026 04:40
Comment thread apps/web/src/components/organizations/members/InviteMemberDialog.tsx Outdated
Comment thread apps/web/src/components/deployments/PasswordFormFields.tsx Outdated
@kilo-code-bot

kilo-code-bot Bot commented Sep 11, 2026 •

Copy link
Copy Markdown
Contributor

Code Review Summary

Status: No Issues Found | Recommendation: Merge

Executive Summary

The accessibility fixes for the six forms are sound at HEAD: the two findings from the prior review are resolved (the Radix trigger id override is removed and the password toggle keeps a constant accessible name), and the remaining ARIA wiring on changed lines is correct.

Files Reviewed (9 files)
  • apps/web/src/app/(app)/wasteland/new/NewWastelandWizardClient.tsx
  • apps/web/src/app/admin/alerting-ttfb/TtfbAlertingContent.tsx
  • apps/web/src/app/admin/alerting/AddModelDialog.tsx
  • apps/web/src/components/app-builder/PromptInput.tsx
  • apps/web/src/components/deployments/PasswordFormFields.test.ts
  • apps/web/src/components/deployments/PasswordFormFields.tsx
  • apps/web/src/components/gastown/CreateTownDialog.tsx
  • apps/web/src/components/organizations/members/InviteMemberDialog.tsx
  • apps/web/src/components/ui/radio-group.tsx
Previous Review Summary (commit c0e738d)

Current summary above is authoritative. Previous snapshots are kept for context only.

Previous review (commit c0e738d)

Status: 2 Issues Found | Recommendation: Address before merge

Executive Summary

The new id="role" on the Invite Member role trigger overrides Radix's internal trigger id and leaves the dropdown menu's aria-labelledby dangling, while the password visibility toggles pair a changing label with aria-pressed.

Overview

Severity Count
CRITICAL 0
WARNING 1
SUGGESTION 1
Issue Details (click to expand)

WARNING

File Line Issue
apps/web/src/components/organizations/members/InviteMemberDialog.tsx 276 id="role" overrides Radix's generated trigger id, dangling the menu's aria-labelledby

SUGGESTION

File Line Issue
apps/web/src/components/deployments/PasswordFormFields.tsx 111 Toggle label changes while aria-pressed is used; keep the accessible name constant
Files Reviewed (9 files)
  • apps/web/src/app/(app)/wasteland/new/NewWastelandWizardClient.tsx - no issues
  • apps/web/src/app/admin/alerting-ttfb/TtfbAlertingContent.tsx - no issues
  • apps/web/src/app/admin/alerting/AddModelDialog.tsx - no issues
  • apps/web/src/components/app-builder/PromptInput.tsx - no issues
  • apps/web/src/components/deployments/PasswordFormFields.test.ts - no issues
  • apps/web/src/components/deployments/PasswordFormFields.tsx - 1 issue
  • apps/web/src/components/gastown/CreateTownDialog.tsx - no issues
  • apps/web/src/components/organizations/members/InviteMemberDialog.tsx - 1 issue
  • apps/web/src/components/ui/radio-group.tsx - no issues

Fix these issues in Kilo Cloud


Reviewed by deepseek-v4.1-flash · Input: 0 · Output: 0 · Cached: 0

Review guidance: REVIEW.md from base branch main

maphew and others added 4 commits September 18, 2026 05:11
Add accessible names and error links to six forms. Follow issue Kilo-Org#4172.

The password show/hide buttons now stay in the keyboard tab order. They have aria-label, aria-pressed, and aria-controls. The length rule is linked to the password input.

The other changes link a label to its input in the Create Town dialog, mark the Invite Member email input invalid and link its error, name the app prompt and TTFB search inputs, and link the Wasteland name error and organization selector.

Add a server-render test for the password fields.

Co-authored-by: kiloconnect[bot] <240665456+kiloconnect[bot]@users.noreply.github.com>
The first pass had defects. This commit corrects them.

- Add the React import that the Jest JSX transform needs. The new test now runs.

- Make RadioGroup a real radiogroup. It now forwards aria props. The ownership label works.

- Name the Invite Member role trigger and the app builder icon buttons.

- Remove the fixed aria-label from the Wasteland organization select. It hid the selected value.

- Announce the Wasteland setup error with role alert.

- Name the Add Model search input.

- Drop the redundant aria-required attribute from the Create Town input.

- Check both password visibility toggles in the test.

Co-authored-by: kiloconnect[bot] <240665456+kiloconnect[bot]@users.noreply.github.com>
RadioGroup now forwards ARIA props. Set role only where the group has a label, so unnamed groups are not announced.

Co-authored-by: kiloconnect[bot] <240665456+kiloconnect[bot]@users.noreply.github.com>
- Stop overriding the Radix DropdownMenuTrigger id in InviteMemberDialog; the
  menu popup's aria-labelledby now resolves. The trigger keeps its aria-label,
  and the visible Role caption is no longer a dangling label.
- Keep the password visibility toggle's accessible name constant ('Show
  password') and let aria-pressed convey state, per the WAI-ARIA APG.

Co-authored-by: kiloconnect[bot] <240665456+kiloconnect[bot]@users.noreply.github.com>
@maphew
maphew force-pushed the fix/web-accessible-form-labels branch from 191b994 to ef7402e Compare September 18, 2026 05:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants