adobe/react-spectrum

Prefer using `aria-errormessage` above `aria-describedby`

fredrikssongustav opened this issue · 3 comments

fredrikssongustav commented

Provide a general summary of the issue here

Looking at https://w3c.github.io/aria/#aria-errormessage it seems this is the preferred way to reference an error. React aria is using aria-describedby instead to reference errors.

🤔 Expected Behavior?

I expect the error reference to use aria-errormessage as it's more accessible.

😯 Current Behavior

Looking at https://react-spectrum.adobe.com/react-aria/TextField.html#html-forms, the dom looks like this:

<div class="react-aria-TextField" data-rac="" data-invalid="true">
   <label class="react-aria-Label"id="react-aria8585958893-:r1m:" for="react-aria8585958893-:r1l:">
   Email
   </label>
   <input type="email" name="email" id="react-aria8585958893-:r1l:" aria-labelledby="react-aria8585958893-:r1m:" class="react-aria-Input" data-rac="" value="asdasd" title="" aria-invalid="true" data-invalid="true" 
      aria-describedby="react-aria8585958893-:r1p:">
   <span class="react-aria-FieldError" slot="errorMessage" data-rac="" id="react-aria8585958893-:r1p:">
   Please include an '@' in the email address. 'asdasd' is missing an '@'.
   </span>
</div>

💁 Possible Solution

Use aria-errormessage. This may be a breaking change.

🔦 Context

This is not playing nicely with Jest selectors: https://github.com/testing-library/jest-dom#toHaveAccessibleErrorMessage, which is probably the most common way to assert your app is accessible.

🖥️ Steps to Reproduce

  1. Go to example https://react-spectrum.adobe.com/react-aria/TextField.html#html-forms
  2. Inspect the DOM

Version

react aria components@latest

What browsers are you seeing the problem on?

Firefox, Chrome, Safari, Microsoft Edge, Other

If other, please specify.

All likely

What operating system are you using?

MacOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

LFDanLu commented

@fredrikssongustav was this purely driven by testing-library/spec or did you also notice any situations where the current aria-described by strategy wasn't announcing well? We could perhaps look into testing the differences on our end as well, but as @stefanprobst mentioned, the screen reader support doesn't seem to quite be there yet

fredrikssongustav commented

Gotcha, wasn't aware of the current screen reader status–I relied on https://w3c.github.io/aria/#aria-errormessage and by that it felt closer to the purpose compared to aria-describedby.

Thank you for the explanation.