Open HeartSquared opened 3 days ago
Hi @HeartSquared, thanks for the detailed explanation.
I looked at the spec and IIUC, it looks like we're compliant with it and the browser is actually behaving a bit differently.
the aria-label
shouldn't be added there because it's already in use to calculate the accessible name. Having said that, I might be wrong here with my understanding of the spec, attaching it here for anyone else who wants to have a look: https://www.w3.org/TR/accname-1.2/#mapping_additional_nd_description
I'll tag @eps1lon also who might have an opinion here. I'm moving this to DTL as this isn't related to React specifically :)
Uh oh! @HeartSquared, the image you shared is missing helpful alt text. Check your issue body.
Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.
Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.
@testing-library/react
version:16.0.1
vitest@2.0.5
@testing-library/jest-dom@6.5.0
(6.4.5
also found in our lock file, likely from other deps)Relevant code or config:
What you did:
Found discrepancy between browser results and unit test using the exact same snippet. The snippet is a simpler version of our TextField component, where the validation message is prefixed with a font icon with an
aria-label
.What happened:
Reproduction:
See snippet
Problem description:
Not reflective of the real result.
Suggested solution: