link-in-text-block needs to take in to account other ways to underline links within text.

[curtbellew]

Product

axe-core

Product Version

4.10.0

Latest Version

• [X] I have tested the issue with the latest version of the product

Issue Description

Expectation

If I remove text decoration and use box shadow to underline link text within a paragraph of other text I should not the "Links must be distinguishable without relying on color" error from "link-in-text-block".

Actual

when I remove text decoration from a link that is other wise default and visually create an underline using box shadow I do get the error "Links must be distinguishable without relying on color" back from axe-core

How to Reproduce

Use this code to reproduce the issue --

<p>
  This is some text in a paragraph before a link. And this is
  <a href="#" style="box-shadow: rgb(0, 104, 140) 0px -1px 0px 0px inset;
    text-decoration-line: none;">a link with class="oj-link-embedded"</a>
  in a sentence. This is some text in a paragraph after a link
</p>

Additional context

Sometimes we need to do some animation effects so we aren't able to rely on text decoration for the underline. We have to do something more custom using box shadow. In the end the effect is the same visually in that that link appears as it would by default, complete with an underline. I think axe-core must be looking for text decoration among other variables to determine if the link looks different than the surrounding text. Could it also look for a box shadow effect?

[v-viyada]

We have a similar scenario, where instead of underline text decoration we are using link icon. It also makes the link visually differentiated from the surrounding text but gets flagged with error "Links must be distinguishable without relying on color".

image of sample code

use this code to reproduce

<p
  style="
    color: rgb(36, 36, 36);
    font-family: 'Segoe UI', sans-serif;
    font-size: 14px;
    box-sizing: border-box;
    margin-block: 8px;
    margin-bottom: 8px;
    margin-top: 8px;
  "
>
  Some text with
  <a href="#" style="color: rgb(0, 108, 190); text-decoration: none">
    link
    <svg link icon></svg> </a
  >.
</p>

[WilcoFiers]

@curtbellew @v-viyada Thank you for reporting these. I agree these shouldn't fail. That's a false positive. I've never seen box-shadow used for underline, but it makes sense. That's going to require a change to lib/commons/color/element-is-distinct.js. For the SVG icon I'm not sure what the best solution is. Quite possible this rule needs another check that looks at distinguishing content inside the link such as an SVG or img element. But I agree that's shouldn't fail either.