color-contrast false positive on element styled as screen-reader-only

[dbjorge]

Product: axe-core

Expectation: Elements using the following sr-only CSS should be detected as inapplicable to the color-contrast rule:

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0px;
  border: 0px;
  overflow: hidden;
}

Gist containing a full self-contained repro

Actual: Elements with that sr-only styling can fail the color-contrast rule.

Motivation: An Accessibility Insights for Web user reported this as a false positive.

Notes:

As a workaround, we've recommended that the user add a clip: rect(0,0,0,0); property to their sr-only class, similar to Bootstrap's sr-only implementation. This causes axe-core to understand that the element should be ineligible for the color-contrast test.

However, the item is still invisible without the clip property (the combination of other properties is sufficient), so it would be ideal for axe-core to understand that.

This technically caused a false positive, but one that has a straightforward workaround and which is straightforward for a user to "fix" by adding noop color CSS according to the color-contrast instructions, so I'd consider this to be lower priority than most other false positive issues.

axe-core version: 4.2.1
axe-webdriver, extension or other integration version: Accessibility Insights for Web 2.26.1

Browser and Assistive Technology versions: Microsoft Edge Version 90.0.818.66 (Official build) (64-bit), no AT

For Tooling issues:
- Node version: n/a
- Platform:  n/a

[dbjorge]

(context: #2171 discusses a similar symptom with a different root cause)

[WilcoFiers]

I thought axe-core did exclude these... I'll have to take a closer look. Thank you for reporting Dan!

[straker]

I believe our sr-only exclusion was based on a few things:

• clipPath
• width/height set to 0
• moves text offscreen

Our code is saying this version of sr-only is visible since it doesn't do any of those things. I'm not sure what would be the best approach to say that this element is hidden (width/height set to 1 maybe?).

[WilcoFiers]

Still needs to go to QA.

[padmavemulapati]

Verified with the latest develop branch axe-core code base, test snippet
have an element with failing color contrast colors and add that sr-only class no longer fails