From 6761f36bb7c9a2f05cea75ca88c8e0f199c032df Mon Sep 17 00:00:00 2001 From: Wilco Fiers Date: Fri, 20 Jan 2023 11:56:32 +0100 Subject: [PATCH] fix(link-in-text-block): allow links with identical colors (#3861) --- doc/check-options.md | 10 ++++ .../color/link-in-text-block-evaluate.js | 6 +- lib/checks/color/link-in-text-block.json | 3 +- test/checks/color/link-in-text-block.js | 57 ++++++++++++------- .../link-in-text-block.html | 7 +++ .../link-in-text-block.json | 3 +- 6 files changed, 64 insertions(+), 22 deletions(-) diff --git a/doc/check-options.md b/doc/check-options.md index 0f6c60d027..87c6adda42 100644 --- a/doc/check-options.md +++ b/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 | diff --git a/lib/checks/color/link-in-text-block-evaluate.js b/lib/checks/color/link-in-text-block-evaluate.js index df9b03f446..acadb1aec5 100644 --- a/lib/checks/color/link-in-text-block-evaluate.js +++ b/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({ diff --git a/lib/checks/color/link-in-text-block.json b/lib/checks/color/link-in-text-block.json index 767697de31..04c21841cb 100644 --- a/lib/checks/color/link-in-text-block.json +++ b/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", diff --git a/test/checks/color/link-in-text-block.js b/test/checks/color/link-in-text-block.js index 9811041797..46fe3e362a 100644 --- a/test/checks/color/link-in-text-block.js +++ b/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 = - '
' + + '
' + '

' + ' link text ' + ' inside block

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); + }); + }); }); }); diff --git a/test/integration/rules/link-in-text-block/link-in-text-block.html b/test/integration/rules/link-in-text-block/link-in-text-block.html index f8f79e02fa..260a259e4f 100644 --- a/test/integration/rules/link-in-text-block/link-in-text-block.html +++ b/test/integration/rules/link-in-text-block/link-in-text-block.html @@ -105,6 +105,13 @@

Color change tests

>

+

+ paragraph of text (pass: text color has sufficient contrast against paragraph) + + Link text +

+

paragraph of text (fail: text color has insufficient contrast against paragraph) diff --git a/test/integration/rules/link-in-text-block/link-in-text-block.json b/test/integration/rules/link-in-text-block/link-in-text-block.json index fec07c6d6f..366b5f07dd 100644 --- a/test/integration/rules/link-in-text-block/link-in-text-block.json +++ b/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"]] }