Fix new behavior of pa11y-ci

[MewenLeHo]

Related issues

Closes #2386

Description

Aria-hidden elements must not contain focusable elements (https://dequeuniversity.com/rules/axe/4.0/aria-hidden-focus).
Even if the fieldset was disabled, all focusable fields inside it must be properly disabled too.

Motivation & Context

Fix pa11y-ci and improve accessibility of the project.

Types of change

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

Live previews

• https://deploy-preview-2399--boosted.netlify.app/docs/5.3/forms/checks-radios/#disabled-2

Checklist

Contribution

• I have read the contributing guidelines

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 a 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

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

Checklist (for Core Team only)

• My change introduces changes to the migration guide
• (na) My new component is well displayed in Storybook
• (na) My new component is compatible with RTL
• (na) Manually run BrowserStack tests
• (na) 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

• Manually launch Percy tests

[netlify]

✅ Deploy Preview for boosted ready!

Name	Link
🔨 Latest commit	9382326
🔍 Latest deploy log	https://app.netlify.com/sites/boosted/deploys/6572c436bd857a0007c20a81
😎 Deploy Preview	https://deploy-preview-2399--boosted.netlify.app/docs/5.3/migration
📱 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.

[julien-deramond]

Thanks @MewenLeHo for tackling this issue! LGTM.
I've just added a migration note for it. This PR will be double-checked by the a11y core team and good to merge 🚀

[MewenLeHo]

I wanted to be sure that this solution is ok before writing the migration note but ok for me.
The only weird thing is that for me we shouldn't need to do it:

disabled
If this Boolean attribute is set, all form controls that are descendants of the fieldset, are disabled, meaning they are not editable and won't be submitted along with the form. They won't receive any browsing events, like mouse clicks or focus-related events.

But it seems that pa11y-ci needs the disabled attribute to consider it properly disabled even if the inputs are already disabled according to the accessibility tree. 🤔
Maybe @Aniort will have more informations about this weird behavior...

[julien-deramond]

Hmm OK, I thought the change was justified even without taking into account pa11y-ci which can be wrong here.
I'll let @Aniort check on his side if it is maybe an error on pa11y-ci side (so it means that we should keep the current implementation), or if this is really useful (and in this case, we'll merge this PR).
Thanks for these new elements.

[Aniort]

according to html specifications and the result in the accessible tree, Pa11y is wrong, u don't need disabled attribut on child input of a fieldset tag disabled

[julien-deramond]

Thanks a lot @Aniort
So let's close this PR and the corresponding issue.

[MewenLeHo]

It may be worth it to submit this edge case to pa11y-ci: https://github.com/pa11y/pa11y-ci/issues

[julien-deramond]

It may be worth it to submit this edge case to pa11y-ci: https://github.com/pa11y/pa11y-ci/issues

Yep, @MewenLeHo. We'd need to dig where it comes from exactly in the middle of all the tools: pa11y-ci, pa11y, aXe, etc.