Does the Select component add an aria-required attribute when the isRequired prop is supplied as true?

[douglas-r-cole]

Hi, we've been using the the Select component and noticed that the aria-required attribute does not seem to added to the "top level" div for the Select component when isRequired={true} is supplied as a property.

In addition, when an aria-required attribute was supplied, it was "swallowed" by the component and not visible in the DOM.

We were wondering if this is by design, a potential bug, or we're not using the component correctly?

thanks - Doug

[snowystinger]

It should be added to the hidden input that backs up the Select and allows it to be natively submitted within a form. See https://react-spectrum.adobe.com/react-aria/Select.html#validation

If you're not seeing this, can you please provide a minimal reproduction and steps to reproduce?

[douglas-r-cole]

Many thanks for the rapid response, very much appreciated.

Yes, I saw the required attribute being added to the DOM on the hidden Select as expected, without an aria-required attribute (as expected as per "aria rules" as I recall).

I was expecting an aria-required attribute on the top level div (when isRequired={true}), I assume it's not there by design?

Please can you confirm that for form validation, we'd need to "reach" into the hidden html select to determine is the field is required?

Many thanks again

[snowystinger]

I'm not sure you need to "reach into", but I'm not sure what you're trying to do. Maybe a concrete example in a codesandbox or stackblitz would help.

You should have a few places where you can determine if a given Select is required, the top level prop, data-required (as you highlighted), and in the renderprops.

Native form validation will already see and interpret the required and prevent form submission if it's empty.

See https://react-spectrum.adobe.com/react-aria/forms.html#forms for more information.