label-content-name-mismatch wrongly includes invisible text

[jribbens]

Product

axe-core

Product Version

4.10.2

Latest Version

• I have tested the issue with the latest version of the product

Issue Description

Expectation

Given the following HTML code, axe should not report an label-content-name-mismatch violation:

<a aria-label="deque are great" href="https://www.deque.com/">
  deque <span class="visually-hidden">labs</span> are great
</a>

Given the following HTML code, axe should report an label-content-name-mismatch violation:

<a href="https://www.deque.com/">
  deque <span class="visually-hidden">labs</span> are great
</a>

Actual

It emits a diagnostic on the code which is correct, and does not emit one on the code which is incorrect.

How to Reproduce

See above. Or also: https://unequivocal.eu/label-content-name-mismatch.html

Additional context

The rule is supposed to be comparing the accessible name with the visible text of the item, but it seems to be comparing all of the text. Also it only checks elements with an aria-label or aria-labelledby, which is incorrect as the rule can fail even without an ARIA label (i.e. the second example above). See https://www.w3.org/WAI/WCAG21/Techniques/failures/F96 for example.

[dylanb]

@jribbens what is the CSS for the visually-hidden class in both cases?

[jribbens]

It's on the example page I linked - it's the standard Bootstrap CSS for the class of that name, so occurs in the wild a great deal:

.visually-hidden {
  position: absolute !important;
  width: 1px!important;
  height: 1px!important;
  padding: 0!important;
  margin: -1px!important;
  overflow: hidden!important;
  clip: rect(0,0,0,0)!important;
  white-space: nowrap!important;
  border: 0!important;
}