fix(dashboard): name unlabeled controls on Contacts, Privacy, Quick Replies - #6
Conversation
…cts, Privacy, Quick Replies The session <select> on all three pages, the full/first name inputs on Contacts, the field selects on Privacy, and the message textarea on Quick Replies rendered with no accessible name — a screen reader announced an anonymous control. Session pickers get aria-label (messageTester.session, already-translated and generic enough to reuse); the rest already had a sibling <label> with real text, so they just needed id/htmlFor wired up.
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Team Run ID: 📒 Files selected for processing (4)
Included review availability: Your plan provides up to 8 included reviews per hour; 6 remain after this review. 📝 WalkthroughWalkthroughDashboard session selectors and form controls now expose accessible names through ChangesDashboard accessibility
Estimated code review effort: 1 (Trivial) | ~5 minutes Merge Risk: ⚪ Minimal · up to This change adds accessible names and label associations to dashboard form controls without altering their behavior. No merge-blocking risk remains. 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
Full details: Docstring CoverageExplanation Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 3 functions across 3 files. (1 skipped: 1 unsupported.)
✨ Finishing Touches 💡 1📝 Generate docstrings 💡
🧪 Generate unit tests (beta)
Warning Some tools did not complete. Review the errors below. 🔧 ESLint
dashboard/src/pages/Contacts.tsxESLint skipped: missing config or dependency (missing-dependency). The ESLint configuration references a package that is not available in the sandbox. dashboard/src/pages/Privacy.tsxESLint skipped: the matched ESLint configuration already failed (missing-dependency). dashboard/src/pages/QuickReplies.tsxESLint skipped: the matched ESLint configuration already failed (missing-dependency). Comment |
Found while dry-running a rebase onto upstream: upstream carries an
a11y-controls.test.tsguard this fork doesn't have, and running it against fork's own pages surfaced real, pre-existing gaps in 3 fork-only pages.<select>had no accessible name; the full-name and first-name<input>s had a visible sibling<label>with nohtmlFor/idlink.<select>had no accessible name; the 7 field<select>s (lastSeen/profilePicture/status/online/readReceipts/groupsAdd/call/messages/defaultDisappearingMode) each had a visible sibling<label>with nohtmlFor/idlink.<select>had no accessible name; the message<textarea>had a visible sibling<label>with nohtmlFor/idlink.Fix: the session pickers (no visible caption at all) get
aria-label={t('messageTester.session')}— reusing the existing, already-translated, generic "Session" string rather than adding new copy. Everything else already had real caption text next to it, so it's just wiringid/htmlFor— no new content.Verified against upstream's actual test file (not committed here — adopting the whole a11y guard is a separate decision): after these changes, zero findings remain for these 3 pages. The test's remaining failures are all in other, unrelated fork pages (FilterBuilder, ChatSidebar, Infrastructure, MessageTester, Plugins, Templates, Webhooks, ApiKeys, StatusComposeModal) — out of scope here.
Also noticed, not fixed here
Contacts.tsx,Privacy.tsxandQuickReplies.tsxcallt()with keys undercontacts.*/privacy.*/quickReplies.*namespaces that don't exist in ANY locale file, includingen.json— the pages currently render raw translation keys instead of text for their own content. Not touched in this PR (would mean authoring ~800 lines of new UI copy across 3 pages); flagging since it's a real, separate gap.Validation
npm run build(dashboard:tsc -b && vite build) — cleannpm run lint— cleannpm run i18n:check— passesnpm run test:unit— 266/266 passedSummary by CodeRabbit