fix(color-contrast): correctly compute color contrast of <slot> eleme…

…nts (#3847) * fix(color-contrast): correctly compute color contrast of <slot> elements * Update lib/commons/dom/create-grid.js Co-authored-by: Wilco Fiers <WilcoFiers@users.noreply.github.com> Co-authored-by: Wilco Fiers <WilcoFiers@users.noreply.github.com>
dequelabs · Jan 23, 2023 · 844cea1 · 844cea1
1 parent e92edc3
commit 844cea1
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 1 deletion.
diff --git a/lib/commons/dom/create-grid.js b/lib/commons/dom/create-grid.js
@@ -54,10 +54,17 @@ export default function createGrid(
   while (node) {
     let vNode = getNodeFromTree(node);
 
+    if (vNode && vNode.parent) {
+      parentVNode = vNode.parent;
+    }
+    // elements with an assigned slot need to be a child of the slot element
+    else if (node.assignedSlot) {
+      parentVNode = getNodeFromTree(node.assignedSlot);
+    }
     // an svg in IE11 does not have a parentElement but instead has a
     // parentNode. but parentNode could be a shadow root so we need to
     // verify it's in the tree first
-    if (node.parentElement) {
+    else if (node.parentElement) {
       parentVNode = getNodeFromTree(node.parentElement);
     } else if (node.parentNode && getNodeFromTree(node.parentNode)) {
       parentVNode = getNodeFromTree(node.parentNode);

diff --git a/test/checks/color/color-contrast.js b/test/checks/color/color-contrast.js
@@ -906,6 +906,29 @@ describe('color-contrast', function () {
     }
   );
 
+  (shadowSupported ? it : xit)('handles <slot> elements', () => {
+    fixture.innerHTML =
+      '<div id="container" style="height: 100px;"><p id="target" style="color: #333;">Slotted text</p></div>';
+    const container = fixture.querySelector('#container');
+    const shadow = container.attachShadow({ mode: 'open' });
+
+    shadow.innerHTML =
+      '<div id="shadowContainer" style="position: absolute; background: black;"><slot></slot></div>';
+    const shadowContainer = shadow.querySelector('#shadowContainer');
+    axe.testUtils.flatTreeSetup(fixture);
+
+    const target = fixture.querySelector('#target');
+    const vNode = axe.utils.getNodeFromTree(target);
+    const result = contrastEvaluate.call(
+      checkContext,
+      vNode.actualNode,
+      null,
+      vNode
+    );
+    assert.isFalse(result);
+    assert.deepEqual(checkContext._relatedNodes, [shadowContainer]);
+  });
+
   describe('with text-shadow', function () {
     it('passes if thin text shadows have sufficient contrast with the text', function () {
       var params = checkSetup(

diff --git a/test/commons/dom/get-element-stack.js b/test/commons/dom/get-element-stack.js
@@ -570,6 +570,26 @@ describe('dom.getElementStack', function () {
         ]);
       }
     );
+
+    (shadowSupported ? it : xit)('should sort <slot> elements', () => {
+      fixture.innerHTML =
+        '<div id="container" style="height: 100px;"><p id="target">Slotted text</p></div>';
+      const container = fixture.querySelector('#container');
+      const shadow = container.attachShadow({ mode: 'open' });
+
+      shadow.innerHTML =
+        '<div id="shadowContainer" style="position: absolute;"><slot></slot></div>';
+      axe.testUtils.flatTreeSetup(fixture);
+
+      const target = fixture.querySelector('#target');
+      const stack = mapToIDs(getElementStack(target));
+      assert.deepEqual(stack, [
+        'target',
+        'shadowContainer',
+        'container',
+        'fixture'
+      ]);
+    });
   });
 
   describe('scroll regions', function () {