fix(color-contrast): process non-rgb color functions (#4092)

* fix(color-contrast): process non-rgb color functions * Update lib/commons/color/parse-text-shadows.js Co-authored-by: Steven Lambert <2433219+straker@users.noreply.github.com> * 🤖 Automated formatting fixes --------- Co-authored-by: Steven Lambert <2433219+straker@users.noreply.github.com>
dequelabs · Jul 27, 2023 · 9634282 · 9634282
1 parent a202b69
commit 9634282
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 5 deletions.
diff --git a/lib/commons/color/parse-text-shadows.js b/lib/commons/color/parse-text-shadows.js
@@ -16,9 +16,8 @@ export default function parseTextShadows(textShadow) {
 
   while (str) {
     const colorMatch =
-      str.match(/^rgba?\([0-9,.\s]+\)/i) ||
-      str.match(/^[a-z]+/i) ||
-      str.match(/^#[0-9a-f]+/i);
+      // match a color name or function (e.g. `oklch(39.2% 0.4 0 / 0.5)`) or a hex value
+      str.match(/^[a-z]+(\([^)]+\))?/i) || str.match(/^#[0-9a-f]+/i);
     const pixelMatch = str.match(/^([0-9.-]+)px/i) || str.match(/^(0)/);
 
     if (colorMatch) {
@@ -48,7 +47,7 @@ export default function parseTextShadows(textShadow) {
       shadows.push(current);
       str = str.substr(1).trim();
     } else {
-      throw new Error(`Unable to process text-shadows: ${textShadow}`);
+      throw new Error(`Unable to process text-shadows: ${str}`);
     }
   }
 

diff --git a/test/commons/color/parse-text-shadows.js b/test/commons/color/parse-text-shadows.js
@@ -33,6 +33,35 @@ describe('axe.commons.color.parseTextShadows', () => {
     });
   });
 
+  it('accepts named colors', () => {
+    const shadows = parseTextShadows('red 1px 2px 3px, blue 4px 5px 6px');
+    assert.deepEqual(shadows[0], {
+      pixels: [1, 2, 3],
+      colorStr: 'red'
+    });
+    assert.deepEqual(shadows[1], {
+      pixels: [4, 5, 6],
+      colorStr: 'blue'
+    });
+  });
+
+  it('accepts different color functions', () => {
+    const shadows = parseTextShadows(`
+      rgb(0, 202, 148) 0px 0px,
+      hsl(165.58deg 100% 35.07% / .5) 0px 0px,
+      lch(65 49.19 167.45) 0px 0px,
+      oklch(60% 0.57 181) 0px 0px,
+      lab(65 -48.01 10.69) 0px 0px,
+      color(xyz-d65 0.26 0.44 0.35 / 1) 0px 0px,
+    `);
+    assert.equal(shadows[0].colorStr, 'rgb(0, 202, 148)');
+    assert.equal(shadows[1].colorStr, 'hsl(165.58deg 100% 35.07% / .5)');
+    assert.equal(shadows[2].colorStr, 'lch(65 49.19 167.45)');
+    assert.equal(shadows[3].colorStr, 'oklch(60% 0.57 181)');
+    assert.equal(shadows[4].colorStr, 'lab(65 -48.01 10.69)');
+    assert.equal(shadows[5].colorStr, 'color(xyz-d65 0.26 0.44 0.35 / 1)');
+  });
+
   it('sets default blur to 0 when omitted', () => {
     const shadows = parseTextShadows('1px 2px #000, 4px 5px #fff');
     assert.deepEqual(shadows[0], {

diff --git a/test/integration/rules/color-contrast/color-contrast.html b/test/integration/rules/color-contrast/color-contrast.html
@@ -448,3 +448,14 @@
     <div id="ignore12" style="background: #000; color: #333">hello</div>
   </div>
 </div>
+
+<div
+  id="pass23"
+  style="
+    color: #000;
+    background: #737373;
+    text-shadow: color(display-p3 1 1 1 / 1) 0 0 3px;
+  "
+>
+  Hello world
+</div>
diff --git a/test/integration/rules/color-contrast/color-contrast.json b/test/integration/rules/color-contrast/color-contrast.json
@@ -36,7 +36,8 @@
     ["#pass19"],
     ["#pass20"],
     ["#pass21"],
-    ["#pass22"]
+    ["#pass22"],
+    ["#pass23"]
   ],
   "incomplete": [
     ["#canttell1"],