In the previous post, we created an accessible React accordion component. Let's test it. I don't see much sense of writing unit tests for this kind...
For further actions, you may consider blocking this person and/or reporting abuse
We're just writing tests for a really popular accessible page on the Internet. We have found an interesting one, checking for "accessible" content. If we have an element that's hidden by the zero'd dimensions trick so that it's still visible by a screen reader, cypress still think it's hidden, so a :visible or should('be.visible',...) isn't really a sufficient test. I'm wondering if you've determined a good practice for testing something like this?
I thought
hidden(html5 attribute) means hidden to everyone. I need to double check, because I'm not sureI went looking myself, found webaim.org/techniques/css/invisibl.... However, I was wrong about which trick we were using, they're 1px blocks with overflow and the content is pushed away into the overflow. I'm not near my cypress at the mo, so I'll check and if there's still an issue, put up some proper detail on it :)
I think some custom
shouldrules could really help with a11y.There is a great package to test a11y with cypress , you can follow the guide here.
However when I am trying to integrate , I get error : cy.injectAxe() is not a function.
Very nice. We do something similar at my company. I wrote a Cypress command to run the aXe engine against our components as a sanity check as the final step. Here's a gist if you're interested.
Instead of using
cy.wait(100), change the default timeout property of the next command.It will keep retrying and solve as soon as possible, instead of waiting a fixed amount of time.
Nice to know. Thanks
Thanks for this. I started to recently use Cypress and I never thought about accessibility testing with it :)