fix(designer): Add role="alert" to MessageBar for screen reader announcements #8731
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
Screen readers now announce error messages like 'Trigger condition cannot be empty' when they appear in the Settings tab. Uses role=alert for error/warning intents to ensure immediate announcement when the message is added to the DOM.
🤖 AI PR Validation ReportPR Review ResultsThank you for your submission! Here's detailed feedback on your PR title and body compliance:✅ PR Title
✅ Commit Type
✅ Risk Level
✅ What & Why
✅ Impact of Change
✅ Test Plan
✅ Contributors
|
| Section | Status | Recommendation |
|---|---|---|
| Title | ✅ | Title is clear and follows convention. |
| Commit Type | ✅ | Correct commit type selected. |
| Risk Level | ✅ | Low risk is appropriate based on changes. |
| What & Why | ✅ | Good concise explanation. |
| Impact of Change | ✅ | Accurate and small-scope. |
| Test Plan | ✅ | Unit tests added and manual testing noted. |
| Contributors | ✅ | Contributor listed; add others if applicable. |
| Screenshots/Videos | N/A is fine for accessibility change. |
Final message: This PR passes the PR-body/title compliance checks. The advised risk level is "low" which matches the submitter's selection and the repo label. The code diff shows a minimal, focused accessibility improvement (adding role="alert" to MessageBar for error/warning) plus unit tests added in both libs — everything required by the template is present.
Please ensure CI completes successfully and the new unit tests pass in the pipeline. Optionally: call out the exact screen readers/OS used for manual verification (VoiceOver/NVDA) in the Test Plan or check the corresponding checkbox to make it explicit. Otherwise, no further changes are required. Thank you for improving accessibility!
Last updated: Mon, 26 Jan 2026 18:52:02 GMT
ccastrotrejo
changed the title
Contributor
There was a problem hiding this comment.
Pull request overview
This PR improves accessibility for screen reader users by adding role="alert" to error and warning MessageBar components in the settings validation UI. This ensures that important error messages (like "Trigger condition cannot be empty") are immediately announced by screen readers when they appear.
Changes:
- Added
role="alert"attribute to MessageBar component for error and warning intents in both designer and designer-v2 libraries - Cleaned up localization strings.json by reorganizing a concurrency setting description key
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| libs/designer/src/lib/ui/settings/validation/errorbar.tsx | Added role="alert" for error/warning MessageBar intents to enable immediate screen reader announcements |
| libs/designer-v2/src/lib/ui/settings/validation/errorbar.tsx | Same accessibility improvement as designer library for consistency |
| Localize/lang/strings.json | Reorganized localization key for concurrency setting description (RvT4mt → 6ylGHb) |
|
📊 Coverage check completed. See workflow run for details. |
Tests verify: - role=alert is applied for error and warning types - role=alert is not applied for info and success types - dismiss button renders and functions correctly
github-actions
bot
added
needs-pr-update
pr-validated
and removed
pr-validated
needs-pr-update
labels
ccastrotrejo
changed the title
|
📊 Coverage check completed. See workflow run for details. |
1 similar comment
|
📊 Coverage check completed. See workflow run for details. |
rllyy97
approved these changes
Jan 26, 2026
ccastrotrejo
changed the title
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.
Commit Type
Risk Level
What & Why
Adds
role="alert"attribute toMessageBarcomponents in the Settings tab validation for error and warning messages. This ensures screen readers immediately announce error/warning messages (like "Trigger condition cannot be empty") when they appear in the DOM.Problem: Users relying on screen readers were not being notified when validation errors or warnings appeared in the Settings tab, making it difficult for them to understand that an action was required.
Solution: Applied
role="alert"toMessageBarcomponents witherrororwarningintent types. This ARIA role tells assistive technologies to announce the content immediately when it appears, without requiring the user to navigate to it.Impact of Change
Test Plan
Unit Tests Added
Added comprehensive unit tests for
CustomizableMessageBarcomponent in bothlibs/designerandlibs/designer-v2:role="alert"is applied for error and warning typesrole="alert"is NOT applied for info and success typesContributors
@ccastrotrejo
Screenshots/Videos
N/A - Accessibility improvement (audible, not visual)