fix(web): label six forms for screen readers - #6068
Open
maphew wants to merge 5 commits into
Open
Conversation
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.
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.
RadioGroup now forwards ARIA props. Set role only where the group has a label, so unnamed groups are not announced.
maphew
marked this pull request as ready for review
September 11, 2026 04:40
![kilo-code-bot[bot]](https://avatars.githubusercontent.com/in/2193792?s=60&v=4){kind=small}
Contributor
Code Review SummaryStatus: 2 Issues Found | Recommendation: Address before merge Executive SummaryThe new Overview
Issue Details (click to expand)WARNING
SUGGESTION
Files Reviewed (9 files)
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 |
- 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>
…form-labels Co-authored-by: kiloconnect[bot] <240665456+kiloconnect[bot]@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
Issue #4172 asks for accessible labels on web forms. Six of the listed forms still fail the acceptance criteria:
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. Addaria-label,aria-pressed, andaria-controls. Link the length rule to the password input.CreateTownDialog: link the label to the input withhtmlForandid.InviteMemberDialog: setaria-invalidandaria-describedbyon the email input. Name the role trigger.PromptInput: name the text area and the icon-only send and stop buttons.TtfbAlertingContentandAddModelDialog: 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 oxlintpasses on all changed files.oxfmtpasses on all changed files.renderToStaticMarkupundertsx. All assertions pass. CI runs the full suite.RadioGrouplabel, 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.