Improve a11y in form example #1917
Conversation
MewenLeHo
added
accessibility
docs
✅ Deploy Preview for boosted ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
see with @MewenLeHo, ok for me ! |
There was a problem hiding this comment.
Haven't noticed before but seems that the Prefers not to say is a bit too much for the width we provide. I don't know if it's mandatory to fix but might done later on.
General feeling: Seems maybe a bit too static for me but seems great as a first step! I'd like to see a real dynamic form later 😄
Still few changes to bring and we're good to go!
| // Add the id of the corresponding invalid message to each invalid field | ||
| invalidItems.forEach(element => { | ||
| const linkedLabel = element.getAttribute('aria-labelledby') | ||
| const closestInvalidFeedback = element.closest('.mb-3').querySelector('.invalid-feedback').getAttribute('id') |
There was a problem hiding this comment.
| const closestInvalidFeedback = element.closest('.mb-3').querySelector('.invalid-feedback').getAttribute('id') | |
| const closestInvalidFeedback = element.parentElement.querySelectorAll('.invalid-feedback') |
My point above but just recalling it here, We should have a way to display several feedbacks if needed.
There was a problem hiding this comment.
What happen when a field has multiple invalid feeddbacks will be discussed in the next specs meeting.
| <div class="valid-feedback"> | ||
| Looks good! | ||
| </div> | ||
| <div id="messageFeedback" class="invalid-feedback"> | ||
| <div id="messageFeedback" class="invalid-feedback" role="alert"> |
There was a problem hiding this comment.
We should add the role="alert" in the doc as well as in the migration guide.
There was a problem hiding this comment.
That's one of the point Vincent and I want to bring to the next specs meeting.
But it will probably be on Bootstrap's side first.
There was a problem hiding this comment.
Ah yes you're right, Bs first for documentation!
|
On hold until the incoming meeting about form validation in the next few days. |
|
Kudos, SonarCloud Quality Gate passed!
|
|
To do list:
|
Related issues
Closes #1599
Description
Improve accessibility by removing the
idof the invalid message feedback in thearia-labelledbyattribute of eachinputandselect.This id is added on submit for invalid fields and remove when fields become valid.
Motivation & Context
Improve a11y for screen reader users.
Types of change
Live previews
Checklist
Contribution
Accessibility
Design
Development
Documentation
Checklist (for Core Team only)
After the merge