Improve a11y in form example

[MewenLeHo]

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

• https://deploy-preview-1917--boosted.netlify.app/docs/5.3/examples/form/

Checklist

Contribution

• [x] I have read the contributing guidelines

Accessibility

• [x] 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

• [x] 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
• [x] Manually run BrowserStack tests
• [x] 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
• [x] A11y review

After the merge

• [ ] Manually launch Percy tests

[netlify[bot]]

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	40037e292575dabaeb02cff1a0f55bbf1f2d9368
🔍 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... Use your smartphone camera to open QR code link.

---

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

[Aniort]

see with @MewenLeHo, ok for me !

[MewenLeHo]

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

[sonarqubecloud[bot]]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[MewenLeHo]

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 https://github.com/twbs/bootstrap/pull/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.