Axe-core: Disabled Button with child element triggering contrast violation

[sethkane]

When running aXe on a object that is has a attribute and value of disabled=true the color contrast checker is producing a false positive.

<button class="button-tertiary" disabled="true"><span>Sample Button</span></button>

` Elements must have sufficient color contrast

1. ["body > main > section > div:nth-of-type(26) > div:nth-of-type(1) > .button-tertiary > span"]
   Fix any of the following:
   • Element has insufficient color contrast of 2.85 (foreground color: #999999, background color: #ffffff, font size: 10.5pt, font weight: bold)
   `

But as I read the W3C criteria on this I assume that because this item is disabled "inactive" it does not need to be checked as part of 1.4.3.

Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.

[marcysutton]

@mkivikoski asked about solving this on Twitter (thanks, Mike!).

Looks like the span is causing the false positive based on the node tree. The code controlling this can be found here: https://github.com/dequelabs/axe-core/blob/master/lib/rules/color-contrast-matches.js#L27

This could be solved by adding a little extra logic to check for child elements of the disabled button so they are also ignored with a false value, instead of letting it fall through to report about the span. It seems like whatever style was on that span would be irrelevant based on the parent element being disabled.

[mkivikoski]

Whoa! Thanks for such a speedy response (and for putting it in the proper channel, my bad about that)!

Thanks for the direct link to the color-contrast-matches.js , super helpful, really appreciate it. 👍

[marcysutton]

I've fixed this internally, it will be a part of our next axe-core release. Stay tuned.

[marcysutton]

Fixed with https://github.com/dequelabs/axe-core/commit/cec54c13887e852dcfe83754a463b01ed595c5c6.