react-doctor: label the notification channel field controls (control-has-associated-label)#159
Open
stonexer wants to merge 1 commit into
Open
react-doctor: label the notification channel field controls (control-has-associated-label)#159stonexer wants to merge 1 commit into
stonexer wants to merge 1 commit into
Conversation
…has-associated-label) The New-channel form rendered a visible <label> with no htmlFor next to either a <select> (Slack channel picker) or an <input>, so the control had no accessible name at all - a screen reader announced nothing for it. Give each field one id (notif-field-<key>) shared by the two mutually exclusive control branches and point the label at it. Same family as the merged #125 and #157. Verified: control-has-associated-label fully cleared (1 to 0), label-has-associated-control 11 to 10, Accessibility 13 to 11 warnings, no new findings; pnpm -r typecheck clean, server suite 702 passed.
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.
Daily React Doctor pass. Health score 37/100 on
main(194 issues: 15 err / 179 warn).The finding
control-has-associated-label@NotificationsModal.tsx:270— the only control in the app with no accessible name at all, so this was the most severe safely-actionable finding on the board.The New-channel form's field loop rendered a visible
<label>with nohtmlFornext to either a<select>(the Slack channel picker) or an<input>. Sighted users see the label; a screen reader announced nothing for the control.The fix
One id per field (
notif-field-<key>), shared by the two mutually exclusive control branches (only one ever renders, so the id is never duplicated), with the label pointing at it. Field keys are already unique within a spec — they key the wrapping<div>— so no collisions across fields.Purely additive markup: no behavior, styling, or state change.
Same family as the merged #125 (
control-has-associated-label×6 viaaria-label) and #157 (placeholder-only fields ×4 viahtmlFor/id).Verification
control-has-associated-labelfully cleared (×1 → 0)label-has-associated-control11 → 10 (this site is one DOM pair in both families)pnpm -r typecheckcleanpnpm --filter @loopany/server test— 702 passed, 3 skippedScope note
This is a deliberate single-site fix, not a migration. The label-side
label-has-associated-controlfamily (10 remaining, 8 of them inLoopForm.tsx) stays untouched — it's migration-scale and still awaiting owner sign-off on the approach.