[listbox] required prop does not work properly

[wojtekmaj]

🐛 Bug report

Current Behavior

While required prop is correctly passed to ListboxInput, the presence of readOnly prop pretty much cancels it.

reach-ui/packages/listbox/src/index.tsx

Lines 311 to 312 in 0c21334

	readOnly
	required={required}

As per MDN article "HTML attribute: readonly":

Because a read-only field cannot have it's value changed by a user interaction, required does not have any effect on inputs with the readonly attribute also specified.

Expected behavior

When required prop is passed to Listbox/ListboxInput, without selecting value in said Listbox form submission should not happen; instead, native form error message should pop up and field should be focused.

Reproducible example

https://codesandbox.io/s/reach-listbox-validation-6dikr7

Suggested solution(s)

Your environment

Software	Name(s)	Version
Reach Package	@react/listbox	0.17.0
React		16.12.0
Browser	Chrome	102
Assistive tech	n/a	n/a
Node	n/a	n/a
npm/yarn	n/a	n/a
Operating System	macOS	12.4