component-driven / cypress-axe

Test accessibility with axe-core in Cypress
MIT License
622 stars 86 forks source link

"Links must have discernible text" on asynchronous content #138

Closed MattTreichelYeah closed 1 year ago

MattTreichelYeah commented 2 years ago

This may be a more conceptual question than a direct issue with the tool per-say, but we have an Angular app that's using Transloco for asynchronous translated content. When we call checkA11y(), it reports "Links must have discernible text" on all buttons and links in the app because I guess it runs immediately without the "retryability" we're used to in Cypress.

Simple example of flagged content, the translate pipe happens asynchronously.

<a href="example.com">{{ 'some.content.key' | translate }}</a>

We use asynchronous content throughout our entire app so it's not really something that can be handled on a case-by-case basis, we would essentially have to add in an arbitrary wait time to every call of checkA11y(). It also took some investigation to zero in on the asynchronous content being the issue rather than an actual accessibility issue and I'm sure other devs will trip over the same thing in the future.

I guess I'm wondering if this tool would ever support "retryability" or if there's a natural way to do this with this tool I've missed.

MattTreichelYeah commented 2 years ago

...also wondering in the back of my head if asynchronous content is inherently inaccessible 🙃 It should never take more than a split-second to be loaded, but it does seem like more trouble than it's worth sometimes. It just seems to be a common practice going by these modern translation libraries.

github-actions[bot] commented 1 year ago

:tada: This issue has been resolved in version 1.4.0 :tada:

The release is available on:

Your semantic-release bot :package::rocket: