Fix UAs required message position on grouped radio buttons #12794
This PR fixes the positioning of the required error message shown by user agents when using the
JSFiddle example showcasing the problem. On Firefox the required message is rendered in bizarre places:
And on Chrome the message is not shown. An error is logged to the console instead: "An invalid form control with name='options' is not focusable."
JSFiddle example with fix. On firefox:
And on Chrome:
The fix/hack is basically, instead of not rendering the element at all with
Disclaimer: i only tested this in Firefox and Chrome on Ubuntu, and i don't know if those CSS properties are the best to "make an element have a position but be invisible"
Instead of not rendering the element at all with display:none, use opacity:0 and z-index:-1 so the radio element has a defined position on the document and user agents can show the required message in the right place.