Proposal to disable animations and transitions while running a11y tests

[tgvrssanthosh]

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.

I would like to propose to disable animations and transitions while running the a11y tests. We can add the following styles to disable transitions/animations in test-head-footer file that already contain few style overrides.

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

Or we can set transition and animation durations to 0 while running the a11y tests as below.

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

[drewlee]

I'm fine with this addition since it's something we end up adding as overrides in host applications anyway. Would be good to get @MelSumner's input as well from the wider open source Ember community.

[tgvrssanthosh]

@MelSumner Can you please let me know if you are fine with proposal? If so, I can create a PR for the same.

[drewlee]

Completed via PR #511.