Fixed checkbox accessibility

[felixgirault]

This fix targets the issue #104

I'm opening a draft because it is in progress, but so we don't work on it in parallel :)

To summarize :

• All status texts (I'm not a robot, verifying, verified) are displayed within the label
• The checkbox is never truly hidden, only visually hidden
• The loading animation is hidden from the assistive technologies

A demo is available here https://eloquent-blini-37b81a.netlify.app/

I'm waiting for a test by our accessibility experts to discuss this further.

[1st8]

The checkbox not being accessible by clicking the label is something else I noticed immediately. Wrapping it inside the label would be my preferred solution, but setting a unique id on the input and corresponding for on the label would work, too.

Maybe that is something that fits into this scope?

Edit: Nevermind... you implemented the for-attribute. Nice!

[felixgirault]

@1st8 Actually, the for/id was there in the first place, but it was working only in the intitial state of the form. This would break afterwards because of the label disappearance. But yes, this PR should fix that by using the label systematically :)

[1st8]

I just had another look. We accidentally used altcha as id on the web component, which then collided with the checkbox.
Sooo... nevermind ^^

Cheers!

[ovx]

Hi, accessibility is now improved in the latest version v2 and implements suggested changes with additional improvements.

Since this is still a draft, I'll close this PR soon, unless you want to finish it and it's going to be merge into v1.