DEV Community

Discussion on: Accessibility will make your code better

messerli90 profile image
Michael Messerli

I'm pretty inexperienced with JS testing & just bad about including accessibility tags, so this may be an uneducated question: Could you kill two birds with one stone by using accessibility tags in your query selector?

If it's readable enough for you to write your tests wouldn't that also help you make sure screen readers, etc are getting the correct information?

reyronald profile image
Ronald Rey Author

Yes you can, in fact, Testing Library's getByLabelText will actually check the aria-label and aria-labelledby attributes of elements when searching for nodes with the given label (see part of the magic in the source here)

In some cases it can make perfect sense to include the ARIA attributes in your query selectors, in others not so much. Think of the assertion error message you would be getting in your terminal when running the test and evaluate if it is a clear representation of what's going on.

Also think of what it is that you are trying to assert, if we go back to one of the examples in the post, you could try to find an element with the aria-busy attribute with just one query selector and kill two birds with one stone, like you said, but in reality, the presence of the element, and whether the element is busy or not are two separate points of failure that should have two separate expectations, instead of a combined one.

Does it make sense?