Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve a11y in form example #1917

Open
wants to merge 21 commits into
base: main
Choose a base branch
from

Conversation

MewenLeHo
Copy link
Contributor

@MewenLeHo MewenLeHo commented Mar 22, 2023

Related issues

Closes #1599

Description

Improve accessibility by removing the id of the invalid message feedback in the aria-labelledby attribute of each input and select.
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

  • Bug fix (non-breaking which fixes an issue)

Live previews

Checklist

Contribution

Accessibility

  • My change follows accessibility good practices; I have at least run axe

Design

  • (NA) My change respects the design guidelines defined in Orange Design System
  • (NA) My change is compatible with responsive display

Development

  • My change follows the developer guide
  • (NA) I have added JavaScript unit tests to cover my changes
  • (NA) I have added SCSS unit tests to cover my changes

Documentation

  • (NA) My change introduces changes to the documentation and/or I have updated the documentation accordingly

Checklist (for Core Team only)

  • (NA) My change introduces changes to the migration guide
  • (NA) My new component is added in Storybook
  • (NA) My new component is compatible with RTL
  • Manually run BrowserStack tests
  • Manually test browser compatibility with BrowserStack (Chrome >= 60, Firefox >= 60 (+ ESR), Edge, Safari >= 12, iOS Safari, Chrome & Firefox on Android)
  • Code review
  • (NA) Design review
  • A11y review

After the merge

@MewenLeHo MewenLeHo added accessibility docs Improvements or additions to documentation examples fix needs-example labels Mar 22, 2023
@netlify
Copy link

netlify bot commented Mar 22, 2023

Deploy Preview for boosted ready!

Name Link
🔨 Latest commit 40037e2
🔍 Latest deploy log https://app.netlify.com/sites/boosted/deploys/6596be99d7ec7200080f080e
😎 Deploy Preview https://deploy-preview-1917--boosted.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link
Member

@louismaximepiton louismaximepiton left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

At least one thing to tackle before approval !

site/content/docs/5.3/examples/form/form.js Outdated Show resolved Hide resolved
site/content/docs/5.3/examples/form/form.js Outdated Show resolved Hide resolved
@MewenLeHo MewenLeHo marked this pull request as draft March 29, 2023 07:41
@MewenLeHo MewenLeHo marked this pull request as ready for review March 29, 2023 14:16
@Aniort
Copy link
Contributor

Aniort commented Mar 31, 2023

see with @MewenLeHo, ok for me !

Copy link
Member

@louismaximepiton louismaximepiton left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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!

site/content/docs/5.3/examples/form/form.js Outdated Show resolved Hide resolved
// 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')
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
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.

Copy link
Contributor Author

@MewenLeHo MewenLeHo Apr 3, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What happen when a field has multiple invalid feeddbacks will be discussed in the next specs meeting.

site/content/docs/5.3/examples/form/form.js Outdated Show resolved Hide resolved
site/content/docs/5.3/examples/form/form.js Outdated Show resolved Hide resolved
<div class="valid-feedback">
Looks good!
</div>
<div id="messageFeedback" class="invalid-feedback">
<div id="messageFeedback" class="invalid-feedback" role="alert">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should add the role="alert" in the doc as well as in the migration guide.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah yes you're right, Bs first for documentation!

@MewenLeHo
Copy link
Contributor Author

On hold until the incoming meeting about form validation in the next few days.

@sonarcloud
Copy link

sonarcloud bot commented May 22, 2023

Kudos, SonarCloud Quality Gate passed!    Quality Gate passed

Bug A 0 Bugs
Vulnerability A 0 Vulnerabilities
Security Hotspot A 0 Security Hotspots
Code Smell A 0 Code Smells

No Coverage information No Coverage information
0.0% 0.0% Duplication

@MewenLeHo
Copy link
Contributor Author

MewenLeHo commented Aug 7, 2023

To do list:

  • Add role="alert" on error message? If yes, we need to be sure to have a good story to convince Patrick.
  • Add focus on first error (see Focus on first error in forms twbs/bootstrap#37323)? Should we revamp it and send it to Bootstrap again? Or do something on our side?
  • Keep validation on submit like it is or switch/add somme validation on the fly?
  • Decide what to do when we have more than one error message for the same field, for instance a required email field with a 'must not be empty' and a 'invalid format' messages.
  • How to add it in our documentation? It can's be only in the form example page, it need to be in the form page and/or in the form validation page and/or in the accessibility page.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
Status: Dev Review In Progress
Development

Successfully merging this pull request may close these issues.

Valid feedback in form validation are not accessible for assistive technologies
3 participants