Link-in-text-block problems

[straker]

The recent changes to link-in-text-block rule has a few problems. First, the data is not converting the colors into hex, so the failureSummary is using [Object object] instead of the hex color. Also, the contrast is not being truncated so the contrast is very long decimal number.

"Fix any of the following:
The link has insufficient color contrast of 1.6620953314177012:1 with the surrounding text. (Minimum contrast is 3:1, link text: [object Object], surrounding text: [object Object])
The link has no styling (such as underline) to distinguish it from the surrounding text"

Lastly, the issue is reporting false positives for the following HTML:

<p>hello world, goodbye world
  <a href="#" style="text-decoration: none; background: #eee;">
    <style>a { color: #333 }</style>
    <img src="https://randomuser.me/api/portraits/men/54.jpg" alt=""/>
  </a>
</p>

The matches function uses textContent to determine if the link has text, but textContext grabs the text of the style element so it passes the matches.

[padmavemulapati]

Validated with the latest code base,
for textContent in the link-in-text-block should grab the text of <style> and <script> elements. Should not give like link text: [object Object], surrounding text: [object Object]
Test Script:

<p style="color: black">
    paragraph of text (fail: text color has insufficient contrast against
    paragraph)
    <a
      style="text-decoration: none; color: blue"
      href="#"
      id="fail-insufficient-text-contrast"
    >
      Link text</a
    >
  </p>
  
  <p style="color: black">
    paragraph of text (fail: background color has insufficient contrast against
    paragraph)
    <a
      style="text-decoration: none; color: black; background-color: pink"
      href="#"
      id="fail-insufficient-background-contrast"
    >
      Link text</a
    >
  </p>

So now in the fix we can see the failure summary grabbing the style text content with proper color value

"Fix any of the following:
  The link has insufficient color contrast of 2.44:1 with the surrounding text. (Minimum contrast is 3:1, link text: #0000ff, surrounding text: #000000)
  The link has no styling (such as underline) to distinguish it from the surrounding text"

"Fix any of the following:
  The link background has insufficient color contrast of 1.53 (Minimum contrast is 3:1, link background color: #ffc0cb, surrounding background color: #ffffff)
  The link has no styling (such as underline) to distinguish it from the surrounding text"

We can see the issue reproduced in the old version:

"Fix any of the following:
  The link has insufficient color contrast of 2.444:1 with the surrounding text. (Minimum contrast is 3:1, link text: [object Object], surrounding text: [object Object])
  The link has no styling (such as underline) to distinguish it from the surrounding text"

"Fix any of the following:
  The link background has insufficient color contrast of 1.5379867185268434 (Minimum contrast is 3:1, link background color: [object Object], surrounding background color: [object Object])
  The link has no styling (such as underline) to distinguish it from the surrounding text"