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.

[douglas-r-cole]

Many thanks for the response, much appreciated and sorry for not replying sooner - I really wanted to have crystal clear understanding of the issue before coming back to you.

Turns out the issue is with the screen reader announcement (after the “a11y focus event” on the component):
when a Select component isRequired, this information is not included in the screen reader announcement

I have tested this with:

• Narrator on windows, via Chrome
  
 
 (does not include ANY reference to “required” in announcement)
• Talkback on Android, via Chrome
  
 
 (does not include ANY reference to “required” in announcement)
• VoiceOver on Mac, via Safari
  
 
 (does not include ANY reference to “required” in announcement)

If you’d like versions of the various softwares / OSs, please let me know and I’ll pass this on.


So, I tried this with a standard html select tag with a required attribute. On the “a11y focus event”, I got:

• Narrator on windows, via Chrome
  
 
 (adds “required” to the end of the announcement)
• Talkback on Android, via Chrome
  
 
 (does not include ANY reference to “required” in announcement - yay)
• VoiceOver on Mac, via Safari
  
 
 (adds “required” to the beginning of the announcement)

Hope this makes sense and any help / pointers would be much appreciated

[snowystinger]

Thank you, I think this could be considered a bug if you'd like to open an issue. You can work around it with an aria-label/aria-labelledby or just something in your visible label since I assume there is an indication for sighted users as well.