fix: radio accessiblity

[jsomsanith-tlnd]

What is the problem this PR is trying to solve?
Radio component is not accessible

1. non focusable and ignored by SR because of visibility: hidden
2. label is not required
3. errors are set as labels
4. checkbox with errors are not set as invalid
5. missing focus visual aspect for keyboard navigation
6. subLabels are set as labels

What is the chosen solution to this problem?

1. make input visible again, but outside of viewport
2. label is required, introducing hideLabel props. Be careful to give a clear context when you hide the label in the designs
3. errors are in a div next to the label, associated with input via aria-describedby
4. use aria-invalid on input when there is an error
5. use the same style as checkbox for focus state
6. subLabels are not linked as descriptions. Should we rename it ?

[kylesuss]

🎉

Thanks for another contribution @jsomsanith ! This is great.

I see a slight difference in the alignment of the description (the old subLabel):

https://www.chromaticqa.com/snapshot?appId=5ccbc373887ca40020446347&id=5d0fee6c77b75e0020f10492

Looks left aligned now vs offset from the left. Is that something you can take a look at before we merge this?

[kylesuss]

Were these !important tags necessary to make the styles apply correctly? Or are they more for being explicit about the behavior? Does look to me like they should work without !important, but maybe I am missing something.

[domyen]

This is extra safety to make sure no inherited styles collide. 👍

[jsomsanith]

@kylesuss Just for extra info, this part has !important which is usually veeeeery bad, but this is a standard trick to make it rendered out of the viewport, but still visible by screen readers.
Every css framework has a class with this type of css, for example bootstrap has sr-only.

[kylesuss]

Nice. Thanks for the explanation @jsomsanith . Makes sense!

[kylesuss]

💯

[kylesuss]

🚀 PR was released in v0.0.26 🚀