false positive on label-content-name-mismatch rule

[devaradhanm]

The rule seems to evaluate the innerText value & compares it with the aria-label value. This results in false positive, when we have icon as a child element that has some content, even though visually the user only sees icon instead of text.
eg where it fails:

<a id="link1" tabindex="0" href="./some-link" aria-label="Favorites">
  <div><span aria-hidden="true" class="some-icon"></span></div>
  <div><span aria-hidden="true">Favorites</span></div>
</a>

https://codepen.io/devaradhanm/pen/xoZdmd

including @iamrafan , for his inputs too.

[straker]

I'm not very familiar with this rule so am not sure what the purpose of it is. The issue where it was proposed links out to a 404 page, so I'll have to get back to you on if this is a bug or works as intended.

[dylanb]

@straker the link in that issue is broken

[WilcoFiers]

IMO we should include that icon character. Things that can't be pronounced should be ignored for the purpose of checking if things match.

[devaradhanm]

@WilcoFiers , we also saw this issue in news.google.com. The left pane icons have readable text that gets rendered as icon.

[straker]

With the help of @mfairchild365 we were able to determine that emoji/unicode inside of a control with aria-label set to the visible non-emoji/unicode will allow Dragon Naturally Speaking to activate the control. With that in mind, we'll fix the rule to take them into account.

[jeankaplansky]

This goes in the release notes.

[chandana7393]

Tested, working as expected.

Tested Environment:
Axe-coconut - 4.0.0.28804v
Axe chrome - 4.0.0.28714v
Axe-Firefox - 4.0.0.28714v
Chrome - 77.0.3865.120v
Firefox - 69.0.3 v
OS - Windows 10 64 bit.