Issue/1745 #1749
Open
Issue/1745 #1749
Conversation
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
Contributor
There was a problem hiding this comment.
Pull Request Overview
This PR enhances accessibility by wrapping feedback messages in an AccessibleFeedback component that uses ARIA live regions to announce validation messages to screen reader users.
Key Changes:
- Introduces a new
AccessibleFeedbackcomponent withrole="alert"andaria-live="assertive" - Wraps all feedback/helper text throughout form field components with this new component
- Adds
aria-describedbyattributes linking form controls to their feedback messages - Renames
StyledRequiredTypographytoStyledFeedbackTypographyfor clarity
Reviewed Changes
Copilot reviewed 19 out of 19 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| AccessibleFeedback.tsx | New component that wraps feedback in ARIA live region for screen reader announcements |
| Item.styles.ts | Renames styled component from StyledRequiredTypography to StyledFeedbackTypography |
| TextField.tsx, StringField.tsx, UrlField.tsx, IntegerField.tsx, DecimalField.tsx, QuantityField.tsx, CustomDateField.tsx | Wraps helperText prop with AccessibleFeedback component |
| SliderField.tsx, RadioFormGroup.tsx, CheckboxFormGroup.tsx, BooleanField.tsx, AttachmentField.tsx | Adds feedbackId, aria-describedby attribute, and wraps feedback with AccessibleFeedback |
| OpenChoice*.tsx, ChoiceSelect*.tsx | Migrates feedback from separate Typography element to helperText prop wrapped in AccessibleFeedback |
| CustomTimeField.tsx | Wraps existing Typography feedback element with AccessibleFeedback component |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
packages/smart-forms-renderer/src/components/FormComponents/ItemParts/RadioFormGroup.tsx
Outdated
Show resolved
Hide resolved
...orms-renderer/src/components/FormComponents/ChoiceItems/ChoiceSelectAnswerValueSetFields.tsx
Outdated
Show resolved
Hide resolved
packages/smart-forms-renderer/src/components/FormComponents/BooleanItem/BooleanField.tsx
Outdated
Show resolved
Hide resolved
Contributor
Author
|
@MaryamMehd I have done some brief initial work here but wasn't able to get the non-text fields (with Seems like the text fields are working (the ones with Also it looks like screen reader announcements are interrupted by the field's values announcements sometimes, at least on Mac's Voiceover. It can be inconsistent sometimes. I'm not too sure how to fix that in a clean way - i'm trying to avoid the usage of timeouts. Maybe(?) this can help: https://stackoverflow.com/questions/52427632/aria-live-is-interrupted-by-other-labels-how-to-stop-this-behavior |
- Created AccessibilityErrors.stories.tsx with 3 test stories - Tests verify role='alert' and aria-live='assertive' attributes - Covers String (regex), Integer (minValue), and Text (maxLength) validations - All tests manually verified with VoiceOver on macOS - Errors are announced dynamically without focus change Related to #1745
Apply role='alert' and aria-live='assertive' via slotProps.formHelperText instead of wrapping in AccessibleFeedback component. This ensures the ARIA attributes are on the MUI FormHelperText element that tests query for, fixing the failing AccessibilityErrors Storybook tests.
Change test assertion from 'does not match' to 'should match' to align with the actual regex validation error message: 'Input should match the specified regex'.
… components
- Replace slotProps.formHelperText with helperText={<AccessibleFeedback>{feedback}</AccessibleFeedback>}
- Apply to StringField, IntegerField, and TextField to fix Storybook test failures
- MUI's FormHelperText doesn't forward custom role/aria-live props, so we use the wrapper component
- VoiceOver confirmed to announce error messages properly
Fixes #1745 Storybook test failures
…s tests - Replace conditional if(alertElement) with expect(alertElement).not.toBeNull() - Prevents silent test passes and timeout errors - Ensures tests fail properly if error element is not found This fixes the timeout errors in AccessibilityErrors.stories.tsx Storybook tests.
MaryamMehd
approved these changes
Nov 14, 2025
- Wrap error messages with AccessibleFeedback component using role='alert' and aria-live='assertive' - Apply to StringField, IntegerField, and TextField components - Add StyledRequiredTypography export alias for backward compatibility - Update AccessibilityErrors tests to verify ARIA attributes - Remove unused state variables in OpenChoiceAutocompleteField - Ensure error messages are announced by screen readers per WCAG 2.1 SC 4.1.3
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Resolves #1745.
Might need more work to test if screen readers are actually announcing these error messages properly in every component.