From 9b6ccd0c2948e7036ef3984810909f59d1e65f27 Mon Sep 17 00:00:00 2001
From: Cassey Lottman <clottman@users.noreply.github.com>
Date: Mon, 7 Jun 2021 07:19:50 -0500
Subject: [PATCH] fix(color-contrast): check for pseudo elements on element
 itself, not just parents (#2980)

---
 lib/checks/color/color-contrast-evaluate.js    | 12 ++++++------
 .../full/incomplete/color-contrast.html        | 18 ++++++++++++++++++
 2 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/lib/checks/color/color-contrast-evaluate.js b/lib/checks/color/color-contrast-evaluate.js
index 638f81bec1..4bfb19d794 100644
--- a/lib/checks/color/color-contrast-evaluate.js
+++ b/lib/checks/color/color-contrast-evaluate.js
@@ -99,20 +99,20 @@ function colorContrastEvaluate(node, options, virtualNode) {
 
   // if element or a parent has pseudo content then we need to mark
   // as needs review
-  let parentNode = node.parentElement;
-  while (parentNode) {
+  let nodeToCheck = node;
+  while (nodeToCheck) {
     if (
-      hasPsuedoElement(parentNode, ':before') ||
-      hasPsuedoElement(parentNode, ':after')
+      hasPsuedoElement(nodeToCheck, ':before') ||
+      hasPsuedoElement(nodeToCheck, ':after')
     ) {
       this.data({
         messageKey: 'pseudoContent'
       });
-      this.relatedNodes(parentNode);
+      this.relatedNodes(nodeToCheck);
       return undefined;
     }
 
-    parentNode = parentNode.parentElement;
+    nodeToCheck = nodeToCheck.parentElement;
   }
 
   // ratio is outside range
diff --git a/test/integration/full/incomplete/color-contrast.html b/test/integration/full/incomplete/color-contrast.html
index 1afde31d13..b7f333048c 100644
--- a/test/integration/full/incomplete/color-contrast.html
+++ b/test/integration/full/incomplete/color-contrast.html
@@ -43,7 +43,25 @@
       <div style="background-image:linear-gradient(red, orange); color:#fff;">
         Text over gradient
       </div>
+
+      <style type="text/css">
+        #pseudoOnButton::before {
+          background-color: #000;
+          content: '';
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          z-index: -1;
+        }
+      </style>
+      <button
+        id="pseudoOnButton"
+        style="position: relative; background-color: transparent; color: #ffffaa"
+      >
+        Button with ::before
+      </button>
     </div>
+
     <div id="mocha"></div>
     <script src="/test/testutils.js"></script>
     <script src="color-contrast.js"></script>