fix(color-contrast): check for pseudo elements on element itself, not…

… just parents (#2980)
dequelabs · Jun 22, 2021 · 3122550 · 3122550
1 parent a6fcb75
commit 3122550
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 6 deletions.
diff --git 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
@@ -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>