fix(link-in-text-block): don't match style or script text (dequelabs#3775)

* fix(link-in-text-block): don't match style or script text

* fake img

Author: straker

lib/checks/color/link-in-text-block-evaluate.js

@@ -51,6 +51,9 @@ function linkInTextBlockEvaluate(node, options) {
   // Compute contrasts, giving preference to foreground color and doing as little work as possible
   var textContrast =
     nodeColor && parentColor ? getContrast(nodeColor, parentColor) : undefined;
+  if (textContrast) {
+    textContrast = Math.floor(textContrast * 100) / 100;
+  }
 
   if (textContrast && textContrast >= requiredContrastRatio) {
     return true;
@@ -61,6 +64,10 @@ function linkInTextBlockEvaluate(node, options) {
       ? getContrast(nodeBackgroundColor, parentBackgroundColor)
       : undefined;
 
+  if (backgroundContrast) {
+    backgroundContrast = Math.floor(backgroundContrast * 100) / 100;
+  }
+
   if (backgroundContrast && backgroundContrast >= requiredContrastRatio) {
     return true;
   }
@@ -80,13 +87,17 @@ function linkInTextBlockEvaluate(node, options) {
   }
 
   // Report bgContrast only if the background changes but text color stays the same
-  if (textContrast === 1.0 && backgroundContrast > 1.0) {
+  if (textContrast === 1 && backgroundContrast > 1) {
     this.data({
       messageKey: 'bgContrast',
       contrastRatio: backgroundContrast,
       requiredContrastRatio,
-      nodeBackgroundColor,
-      parentBackgroundColor
+      nodeBackgroundColor: nodeBackgroundColor
+        ? nodeBackgroundColor.toHexString()
+        : undefined,
+      parentBackgroundColor: parentBackgroundColor
+        ? parentBackgroundColor.toHexString()
+        : undefined
     });
     return false;
   }
@@ -95,8 +106,8 @@ function linkInTextBlockEvaluate(node, options) {
     messageKey: 'fgContrast',
     contrastRatio: textContrast,
     requiredContrastRatio,
-    nodeColor,
-    parentColor
+    nodeColor: nodeColor ? nodeColor.toHexString() : undefined,
+    parentColor: parentColor ? parentColor.toHexString() : undefined
   });
   return false;
 }

lib/rules/link-in-text-block-matches.js

@@ -2,7 +2,7 @@ import { sanitize } from '../commons/text';
 import { isVisibleOnScreen, isInTextBlock } from '../commons/dom';
 
 function linkInTextBlockMatches(node) {
-  var text = sanitize(node.textContent);
+  var text = sanitize(node.innerText);
   var role = node.getAttribute('role');
 
   if (role && role !== 'link') {

test/checks/color/link-in-text-block.js

@@ -303,5 +303,55 @@ describe('link-in-text-block', function () {
       );
       assert.equal(checkContext._relatedNodes[0], linkElm.parentNode);
     });
+
+    it('should return the proper values stored in data (fgContrast)', function () {
+      fixture.innerHTML =
+        '<div> <span style="display:block; color: #100" id="parent">' +
+        ' <p style="display:inline"><a href="" id="link">' +
+        '    link text ' +
+        ' </a> inside block </p> inside block' +
+        '</span> outside block </div>';
+
+      axe.testUtils.flatTreeSetup(fixture);
+      var linkElm = document.getElementById('link');
+
+      axe.testUtils
+        .getCheckEvaluate('link-in-text-block')
+        .call(checkContext, linkElm);
+
+      assert.deepEqual(checkContext._data, {
+        messageKey: 'fgContrast',
+        contrastRatio: 2.18,
+        requiredContrastRatio: 3,
+        nodeColor: '#0000ee',
+        parentColor: '#110000'
+      });
+    });
+
+    it('should return the proper values stored in data (bgContrast)', function () {
+      var linkElm = getLinkElm(
+        {
+          color: 'black',
+          backgroundColor: 'white'
+        },
+        {
+          color: 'black',
+          backgroundColor: '#F0F0F0'
+        }
+      );
+      assert.isFalse(
+        axe.testUtils
+          .getCheckEvaluate('link-in-text-block')
+          .call(checkContext, linkElm)
+      );
+
+      assert.deepEqual(checkContext._data, {
+        messageKey: 'bgContrast',
+        contrastRatio: 1.13,
+        requiredContrastRatio: 3,
+        nodeBackgroundColor: '#ffffff',
+        parentBackgroundColor: '#f0f0f0'
+      });
+    });
   });
 });

test/integration/rules/link-in-text-block/link-in-text-block.html

@@ -26,6 +26,18 @@ <h1>General applicability tests</h1>
   <a href="#" id="ignore9">Link text</a>
 </p>
 
+<p>
+  hello world, goodbye world
+  <a href="#" id="ignore10" style="text-decoration: none; background: #eee">
+    <style>
+      a {
+        color: #333;
+      }
+    </style>
+    <img width="50px" height="50px" src="some-img.png" alt="" />
+  </a>
+</p>
+
 <h1>Default styling tests</h1>
 
 <p style="color: black">

test/rule-matches/link-in-text-block-matches.js

@@ -1,67 +1,82 @@
-describe('link-in-text-block-matches', function () {
+describe('link-in-text-block-matches', () => {
   'use strict';
 
-  var fixture = document.getElementById('fixture');
-  var fixtureSetup = axe.testUtils.fixtureSetup;
-  var rule;
+  const { fixtureSetup } = axe.testUtils;
+  const rule = axe.utils.getRule('link-in-text-block');
 
-  beforeEach(function () {
-    rule = axe.utils.getRule('link-in-text-block');
-  });
-
-  afterEach(function () {
-    fixture.innerHTML = '';
-  });
-
-  it('should return true if link is in text block', function () {
+  it('should return true if link is in text block', () => {
     fixtureSetup(
       '<p>Some paragraph with text <a id="target" href="#">world</a></p>'
     );
-    var node = document.getElementById('target');
+    const node = document.getElementById('target');
     assert.isTrue(rule.matches(node));
   });
 
-  it('should return false if element has a non-link role', function () {
+  it('should return false if element has a non-link role', () => {
     fixtureSetup(
       '<p>Some paragraph with text <a id="target" href="#" role="button">hello</a></p>'
     );
-    var node = document.getElementById('target');
+    const node = document.getElementById('target');
     assert.isFalse(rule.matches(node));
   });
 
-  it('should should return false if element does not have text', function () {
+  it('should should return false if element does not have text', () => {
     fixtureSetup(
       '<p>Some paragraph with text <a id="target" href="#"></a></p>'
     );
-    var node = document.getElementById('target');
+    const node = document.getElementById('target');
+    assert.isFalse(rule.matches(node));
+  });
+
+  it('should return false if element has <style>', () => {
+    fixtureSetup(`
+      <p>Some paragraph with text
+        <a id="target" href="#">
+          <style>a { color: #333 }</style>
+        </a>
+      </p>
+    `);
+    const node = document.getElementById('target');
+    assert.isFalse(rule.matches(node));
+  });
+
+  it('should return false if element has <script>', () => {
+    fixtureSetup(`
+      <p>Some paragraph with text
+        <a id="target" href="#">
+          <script>console.log('foo')</script>
+        </a>
+      </p>
+    `);
+    const node = document.getElementById('target');
     assert.isFalse(rule.matches(node));
   });
 
-  it('should return false if element is hidden', function () {
+  it('should return false if element is hidden', () => {
     fixtureSetup(
       '<p>Some paragraph with text <a id="target" href="#"" style="display: none">hello</a></p>'
     );
-    var node = document.getElementById('target');
+    const node = document.getElementById('target');
     assert.isFalse(rule.matches(node));
   });
 
-  it('should return false if link is not in text block', function () {
+  it('should return false if link is not in text block', () => {
     fixtureSetup('<a id="target" href="#">hello</a>');
-    var node = document.getElementById('target');
+    const node = document.getElementById('target');
     assert.isFalse(rule.matches(node));
   });
 
-  it('should return false if link is only text in block', function () {
+  it('should return false if link is only text in block', () => {
     fixtureSetup('<p><a id="target" href="#">world</a></p>');
-    var node = document.getElementById('target');
+    const node = document.getElementById('target');
     assert.isFalse(rule.matches(node));
   });
 
-  it('should return false if link is display block', function () {
+  it('should return false if link is display block', () => {
     fixtureSetup(
       '<p>Some paragraph with text <a id="target" href="#" style="display: block">world</a></p>'
     );
-    var node = document.getElementById('target');
+    const node = document.getElementById('target');
     assert.isFalse(rule.matches(node));
   });
 });