fix(link-in-text-block): allow links with identical colors (#3861)

doc/check-options.md

@@ -36,6 +36,7 @@
   - [region](#region)
   - [inline-style-property](#inline-style-property)
   - [invalid-children](#invalid-children)
+  - [link-in-text-block](#link-in-text-block)
 
 ## How Checks Work
 
@@ -538,3 +539,12 @@ This evaluation method is used in the `list` and `definition-list` rule to deter
 | `validNodeNames` | Nodes without role allowed as children                                              |
 | `validRoles`     | Roles allowed on child elements                                                     |
 | `divGroups`      | Whether the child nodes can be grouped in a div without any role (false by default) |
+
+### link-in-text-block
+
+This evaluation method is used in the `link-in-text-block` rule and tests that either the foreground color or the background color has sufficient contrast between the link text and the surrounding text.
+
+| Option                  | Default | Description                                                                 |
+| ----------------------- | :------ | :-------------------------------------------------------------------------- |
+| `requiredContrastRatio` | `3`     | Minimum contrast needed to pass the check between text or background colors |
+| `allowSameColor`        | `true`  | Whether links with colors identical to its surroundings should pass         |

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

@@ -25,7 +25,7 @@ function isBlock(elm) {
 }
 
 function linkInTextBlockEvaluate(node, options) {
-  const { requiredContrastRatio } = options;
+  const { requiredContrastRatio, allowSameColor } = options;
 
   if (isBlock(node)) {
     return false;
@@ -86,6 +86,10 @@ function linkInTextBlockEvaluate(node, options) {
     return undefined;
   }
 
+  if (allowSameColor && textContrast === 1 && backgroundContrast === 1) {
+    return true;
+  }
+
   // Report bgContrast only if the background changes but text color stays the same
   if (textContrast === 1 && backgroundContrast > 1) {
     this.data({

lib/checks/color/link-in-text-block.json

@@ -2,7 +2,8 @@
   "id": "link-in-text-block",
   "evaluate": "link-in-text-block-evaluate",
   "options": {
-    "requiredContrastRatio": 3
+    "requiredContrastRatio": 3,
+    "allowSameColor": true
   },
   "metadata": {
     "impact": "serious",

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

@@ -98,7 +98,7 @@ describe('link-in-text-block', function () {
 
     it('passes the selected node and closest ancestral block element', function () {
       fixture.innerHTML =
-        '<div> <span style="display:block; color: #100" id="parent">' +
+        '<div> <span style="display:block; color: #010" id="parent">' +
         '	<p style="display:inline"><a href="" id="link">' +
         '		 link text ' +
         '	</a> inside block </p> inside block' +
@@ -192,24 +192,6 @@ describe('link-in-text-block', function () {
       assert.equal(checkContext._relatedNodes[0], linkElm.parentNode);
     });
 
-    it('returns false with fgContrast key if nodes have same foreground color and same background color', function () {
-      var linkElm = getLinkElm(
-        {
-          color: 'black'
-        },
-        {
-          color: '#000'
-        }
-      );
-      assert.isFalse(
-        axe.testUtils
-          .getCheckEvaluate('link-in-text-block')
-          .call(checkContext, linkElm)
-      );
-      assert.equal(checkContext._data.messageKey, 'fgContrast');
-      assert.equal(checkContext._relatedNodes[0], linkElm.parentNode);
-    });
-
     it('returns false with fgContrast key if nodes have insufficient foreground contrast and same background color', function () {
       var linkElm = getLinkElm(
         {
@@ -353,5 +335,42 @@ describe('link-in-text-block', function () {
         parentBackgroundColor: '#f0f0f0'
       });
     });
+
+    describe('options.allowSameColor', () => {
+      it('when true, passes when link and text colors are identical', () => {
+        var linkElm = getLinkElm(
+          {
+            color: 'black'
+          },
+          {
+            color: '#000'
+          }
+        );
+        assert.isTrue(
+          axe.testUtils
+            .getCheckEvaluate('link-in-text-block')
+            .call(checkContext, linkElm, { allowSameColor: true })
+        );
+        assert.equal(checkContext._relatedNodes[0], linkElm.parentNode);
+      });
+
+      it('when false, fails when link and text colors are identical', () => {
+        var linkElm = getLinkElm(
+          {
+            color: 'black'
+          },
+          {
+            color: '#000'
+          }
+        );
+        assert.isFalse(
+          axe.testUtils
+            .getCheckEvaluate('link-in-text-block')
+            .call(checkContext, linkElm, { allowSameColor: false })
+        );
+        assert.equal(checkContext._data.messageKey, 'fgContrast');
+        assert.equal(checkContext._relatedNodes[0], linkElm.parentNode);
+      });
+    });
   });
 });

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

@@ -105,6 +105,13 @@ <h1>Color change tests</h1>
   >
 </p>
 
+<p style="color: black">
+  paragraph of text (pass: text color has sufficient contrast against paragraph)
+  <a style="text-decoration: none; color: black" href="#" id="pass-same-colors">
+    Link text</a
+  >
+</p>
+
 <p style="color: black">
   paragraph of text (fail: text color has insufficient contrast against
   paragraph)

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

@@ -11,7 +11,8 @@
     ["#pass-different-weight"],
     ["#pass-different-size"],
     ["#pass-background-color"],
-    ["#pass-text-color"]
+    ["#pass-text-color"],
+    ["#pass-same-colors"]
   ],
   "incomplete": [["#incomplete-low-contrast-parent-has-gradient"]]
 }