Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Disabling transitions and animations while running axe tests #511

Merged
merged 3 commits into from
Jun 21, 2023

Conversation

tgvrssanthosh
Copy link
Contributor

@tgvrssanthosh tgvrssanthosh commented Jun 17, 2023

Copying the proposal that is added in #505

With animations and transitions in place, the a11y tests can non-deterministically fail.

For eg., lets say we have a disabled button and on certain action (click of another button) we enable the button. Lets say we have a transition property set on the button to transition the background-color of the button.

Now, lets say the disabled button contrast ratio doesn't meet the AA guidelines. The a11y tests will continue to pass since the axe-core doesn't run the tests on disabled elements. In the example that i mentioned above, when the axe-core tests run as soon as the button gets enabled, it can lead to a11y violation error since the background transition might not have completed yet.

In this PR, we are disabling animation and transition so that the transitions/animations will not affect any of the axe tests

.axe-running * {
  animation: none !important;
  transition: none !important;
}

content-for/test-head-footer.html Outdated Show resolved Hide resolved
content-for/test-head-footer.html Outdated Show resolved Hide resolved
@tgvrssanthosh tgvrssanthosh changed the title Setting duration to zero for transitions and animations Disabling transitions and animations while running axe tests Jun 21, 2023
@drewlee
Copy link
Contributor

drewlee commented Jun 21, 2023

This change looks good. I'd like to cut a new major 6.0.0 release before merging this change so that it's disassociated from the TypeScript-related work rolled up into v6. Then we can roll this out as 6.1.0.

@void-mAlex
Copy link

this is fine to do in app code and even to provide an opt in to have it be done for you, but as is, the change in this pr breaks any app that uses animation/transition events
tests that were passing just fine without it now fail

I would propose that a different way to handle running a11y tests after animation is to hook into the events associated with them animation(start/end)
or alternatively reduce the timing to 0 so events still fire but I can imagine even that breaking people's tests that are timing dependant (intentionally or otherwise)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants