fix(a11y): error message announcement in form elements (VIV-1593) #1662
Conversation
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #1662 +/- ##
===========================================
Coverage 100.00% 100.00%
===========================================
Files 123 322 +199
Lines 1562 5411 +3849
Branches 108 667 +559
===========================================
+ Hits 1562 5411 +3849
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. |
| role="${config.messageProperty === 'errorValidationMessage' | ||
| ? 'status' | ||
| : 'none'}" |
There was a problem hiding this comment.
Why not make it part of the config?
| role="${config.messageProperty === 'errorValidationMessage' | |
| ? 'status' | |
| : 'none'}" | |
| role="${config.status ?? 'none'}" |
| 'message', | ||
| `${config.className}-message`, | ||
| ['message--visible', shouldShow(x)], | ||
| ['sr-only', !shouldShow(x)] |
There was a problem hiding this comment.
Is this needed? Because when the error is not visually displayed it also shouldn't be accessible to SR, right?
| ['sr-only', !shouldShow(x)] |
There was a problem hiding this comment.
When it is hidden with display: none the message is not announced.
| &.error-message { | ||
| display: flex; | ||
| } |
There was a problem hiding this comment.
Kind of confusing, maybe better to always apply message--visible for error message through code instead
| &.error-message { | |
| display: flex; | |
| } |
This can be tested by dynamically adding the
error-textand the screen reader should announce it.