fix(form-core): improve validation feedback message for screen reader… #2471
Conversation
🦋 Changeset detectedLatest commit: 3217c94 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
| : nothing} | ||
| </div> | ||
| </span> |
There was a problem hiding this comment.
Wouldn't this break some style if consumers styled it assuming this is a block?
There was a problem hiding this comment.
Then we can never break any tiny bit of code.
<div> makes it a separate element the Screen reader can focus on. While it should be one sentence.
packages/ui/components/form-core/src/validate/LionValidationFeedback.js
Outdated
Show resolved
Hide resolved
…s to make it one sentence
71d673c to
3217c94
Compare
|
|
||
| el.feedbackData = [{ message: 'hello', type: 'info', validator: new AlwaysInvalid() }]; | ||
| await el.updateComplete; | ||
|
|
||
| expect(validationFeedbackType?.textContent?.trim()).to.equal('Info'); | ||
| expect(validationFeedbackType?.textContent?.trim()).to.equal('Info,'); |
There was a problem hiding this comment.
Is , (comma) better than : (colon) ?
(In an older iteration of a design system we worked on we also had the sr-only "Error:" prefix)
There was a problem hiding this comment.
I haven't tried that one. Will see whats the difference.
There was a problem hiding this comment.
No difference. Either way is fine with me.
| validationWarning: 'Предупреждение', | ||
| validationSuccess: 'Успех', | ||
| validationInfo: 'Информация', | ||
| validationError: 'Грешка,', |
There was a problem hiding this comment.
Maybe it's cleaner to add this inside .validation-feedback__type?
There was a problem hiding this comment.
That was my first thought, @ryubro suggested to put it inside the translations :)
#2471 (comment)
…s to make it one sentence
What I did