Repository navigation
fix(date-input): announce errors with the shared error prefix - #314
Conversation
Render the error through ErrorMessage so screen readers hear the visually hidden "Error:" prefix, as they do for every other field. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
|
⏳ I'm reviewing this pull request for security vulnerabilities and code quality issues. I'll provide an update when I'm done |
|
✅ I finished the code review, and didn't find any security or code quality issues. |
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
🎨 Design system previewPreview torn down (PR closed). |
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
phrogwrld
left a comment
phrogwrld
left a comment
There was a problem hiding this comment.
Reviewed commit 69a5256. No actionable findings.
The switch to the shared ErrorMessage preserves the outer span, CSS class, error ID and role="alert". The fieldset's aria-describedby and all three inputs' invalid states remain unchanged. The regression tests check the exact prefixed text and error association; the shared component's tests cover the visually hidden prefix, and the new axe test covers the error state.
Independently verified against the PR snapshot:
- React tests: 226/226 passed
- Frontend tests: 53/53 passed
- React typecheck, lint and formatting checks: passed
Not checked: Actual screen-reader announcements. The manual acceptance check from #308 remains outstanding; automated checks cannot confirm it.
Approved from code review.
Closes #308
DateInputrendered its error in its owngovbb-error-messagespan, so the error text didn't include the visually hiddenError:prefix that the sharedErrorMessageadds. Screen readers heard the message without being told it was an error. Every other field (Input, TextArea, Select, Checkbox, Radio) already usesErrorMessage.DateInputnow does too. The error id,role="alert", the fieldset'saria-describedbyandaria-invalidon day, month and year stay the same.Verification
Error: Enter a valid date, so the prefix appears once, and that the fieldset still points to the error. Against the old component it fails withReceived: "Enter a valid date".alertrole, because searching for the bare message text no longer matches once the prefix is nested inside.pnpm -r test(frontend 53/53, react 225/225), the react typecheck,pnpm lintand Prettier all pass.Out of scope
The plain HTML error examples on the docs site have the same gap. That's tracked separately in #313.
🤖 Generated with Claude Code