False positives "Elements must have sufficient color contrast"

[wildpow]

I have a tab component in a Gatsby project. After clicking a tab React-Ace throws "Elements must have sufficient color contrast" with color values I'm assuming are in transition. Not sure if I'm just missing a config option or something. I did set the debouncing argument to 8000 but, no dice.

const Button = styled.button`
  color: ${(props) => (props.isActive ? "white" : "#4a5568" )};
  font-size: 17px;
  padding: 10px 15px;
  font-family: ${(props) => props.theme.MainFont1};
  text-decoration: none;
  background-color: none;
  background: ${(props) => (props.isActive ? "#9b2c2c" : "white")};
  border: none;
  transition: all 0.2s ease;
  :hover {
    background-color: "#742a2a";
    color: white;
  }
`;

error: Fix any of the following: Element has insufficient color contrast of 3.29 (foreground color: #d7d9de, background color: #b15b5b, font size: 12.8pt (17px), font weight: normal). Expected contrast ratio of 4.5:1

[straker]

Thanks for the issue. Is the project publicly available that I could take a look at? Otherwise it's going to be difficult to see what's going on and figure out the problem.

Also, the debounce argument triggers on the rising edge of the changes, so if the problem is happening at the start of a transition the argument won't prevent that.

[wildpow]

It is a public project but, it won't run without our CDN API keys and I also had to fork the Gatsby plug-in to be able to change the debounce parameter PR: 11. I'll get you a code example repo as soon as I can.

[wildpow]

Example repo

When clicking on tabs I'm getting these color contrast errors. If I had to guess I would say react-axe is firing before the opacity transitions finish between tabs. Not sure if this only affects react-move, all CSS animations, animation libraries, or because of how Gatsby does things.

Let me know if you have any questions or there is something wrong with the example I provided. I hope this helps.

[straker]

Thanks for the example. Looking at the code I believe you are correct that the errors are happening due to the transitions. When I click on a tab, I get two issues:

The first issue is the button that you clicked away from. I'm guessing the resolved background color of #a9635e is due to opacity being applied. The second issue is the button you click on and is an actual failure as the background color of #c8645d is applied due to the hover.

As for what to do with the first issue, I'm not sure. We had to make the debounce fire on the rising edge to fix an issue with elements being unmounted before axe would run on them, so we can't change that back to be the falling edge.

[straker]

We have moved this package to be under our axe-core-npm monorepo for easier management. As a result, this repository will be deprecated in the coming weeks.

I have transferred this issue so we can continue to keep track of it.