Hiding default radio buttons precents browser error messages

[symroe]

For a minimal example without the design system:

<form>
  <input type="radio" name="foo" value="1" required>
  <input type="radio" name="foo" value="2" required>
  <button type="submit">submit</button>
</form>

Without selecting either option, when submitting the browser shows an error message.

Adding the below, as we do in the design system, prevents the browser from showing this message

input[type="radio"] {
  visibility: hidden;
}

I _think _ this is because the browser is attaching the message to a pseudo-element of the inputs, and inheriting the visibility.

Changing this to opacity: 0; does show the in-browser error message.

@Heydon I'm not expecting you to dive in and fix this at all, but I thought you might be interested in the bug report.

Tested on Firefox developer edition (96.0b10) on Ubuntu 20.04.

[symroe]

GOV.UK use opacity on their design system:

https://govuk-elements.herokuapp.com/form-elements/example-radios-checkboxes/

I'd like to know more about what this means for accessibility though. I'm going to assume Heydon picked visibility for a reason.