Input with invalid type does not have textbox role

[florian-milky]

Problem description:

According to spec:

input type=text or with a missing or invalid type, with no list attribute should have role=textbox
https://www.w3.org/TR/html-aria/

see repro https://codesandbox.io/s/react-testing-library-demo-forked-6mh5f

Suggested solution:

[MatanBobi]

Hi @florian-milky, thanks for opening this issue :)
If I understand the issue correctly, testing-library is only the testing framework and not the rendering engine, for issues with the rendering engine you should file an issue in jsdom.
I see that they had an issue about something related to this already. I'm keeping this open cause I may have missed something so feel free to comment.
Thanks!

[eps1lon]

This is likely an issue with how we leverage aria-query or how aria-query maps elements. They probably declare that input is mapped based on the type attribute when it should be the type property:

const input = document.createElement('input');
input.setAttribute('type', '123');

console.log(input.getAttribute('type'), input.type); // 123, text

In that example input[type="text"] would not match but the input's type is actually text.

[marcosvega91]

I have created a small example on jsfiddle https://jsfiddle.net/zw5401b8/1/

If the input has a not defined type or an invalid type the selector input[type="text"] will not work. Are we sure that it's our problem?

[florian-milky]

I used a screenreader to test out, and it recognized the input type="123" as a text field. I am not sure what to take from this but it was really crazy to use a screenreader 😆

[eps1lon]

input[type="text"] will not work. Are we sure that it's our problem?

"will not work" needs some clarification. If you want to select textboxes then the selector is incorrect. If you want to select <input /> with the type attribute set to text then it works.

Two possible solutions to get textboxes:

1. get by type property
2. query with input:not([type="number"]):not([type="password"])...etc
   Though that might still not be robust enough (are attribute values case-sensitive? what about whitespace? )

[marcosvega91]

Yes, I think is better the first case. We can add here, instead of you the selector for this case

[florian-milky]

This is likely an issue with how we leverage aria-query or how aria-query maps elements. They probably declare that input is mapped based on the type attribute when it should be the type property:

const input = document.createElement('input');
input.setAttribute('type', '123');

console.log(input.getAttribute('type'), input.type); // 123, text

In that example input[type="text"] would not match but the input's type is actually text.

Super interesting! I played a bit with that actually, to try to debug, but I didn't find the input.type, good to know! That's why I went all the way to using a screenreader

Thanks for the PR, it might save some headache to future developers :)

[github-actions]

🎉 This issue has been resolved in version 7.26.7 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[CarlosHdez]

Hi, I'm seeing this behavior, although I'm not using dom-testing-library I only have @testing-library/react v11.2.2 and @testing-library/jest-dom v5.11.6, do I need to add this one to dependencies or does this fix needs to be implemented in one of those packages.
Thanks