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?
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?
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
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?
Yes you can, in fact, Testing Library's
getByLabelTextwill actually check thearia-labelandaria-labelledbyattributes 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-busyattribute 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?