Contrast analysis running during an animation

[WilcoFiers]

I just integrated agnostic-axe into a Vue app I'm working on. One thing I keep seeing is contrast errors of text that get tested while it is fading in. Agnostic-axe basically just doesn't wait long enough for the content to be fully rendered.

I'm wondering if this could be done a little smarter. Instead of immediately running, if an element has a opacity value of less than 1, perhaps a timeout can be set that checks back in on the element after 100ms (or something), if at that time the opacity is at 1, or hasn't changed, test it, if not defer again until that condition is met, or perhaps until some maximum timeout has been reached.

[jul-sh]

Thanks for raising the issue! In order to favor the simplicity and maintainability, my intuition would be to take the pragmatic way of looking at the larger concern. In essence that seems to be "We're ok if things are inaccessible for very short periods of time".

An easy way to achieve that w/o adding too much logic could be to simply hardcode a short delay of all audits. Waiting say 500ms after an element has changed to audit seems like a reasonable amount that wouldn't affect the user experience, but would prevent flagging issues during most animations/transitions. (A bit like react-axe's debounce option)

What do you think? If you feel it's good and it solves the issue, I'd be more than happy to merge any PR for that