suggestions

dequelabs · Aug 15, 2023 · c4cd3cf · c4cd3cf
1 parent 093026c
commit c4cd3cf
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 1 deletion.
diff --git a/lib/commons/dom/get-target-rects.js b/lib/commons/dom/get-target-rects.js
@@ -1,4 +1,5 @@
 import findNearbyElms from './find-nearby-elms';
+import isInTabOrder from './is-in-tab-order';
 import { splitRects, hasVisualOverlap } from '../math';
 import memoize from '../../core/utils/memoize';
 
@@ -14,8 +15,9 @@ function getTargetRects(vNode) {
   const nodeRect = vNode.boundingClientRect;
   const overlappingVNodes = findNearbyElms(vNode).filter(vNeighbor => {
     return (
+      hasVisualOverlap(vNode, vNeighbor) &&
       vNeighbor.getComputedStylePropertyValue('pointer-events') !== 'none' &&
-      hasVisualOverlap(vNode, vNeighbor)
+      !isDescendantNotInTabOrder(vNode, vNeighbor)
     );
   });
 
@@ -28,3 +30,9 @@ function getTargetRects(vNode) {
   );
   return splitRects(nodeRect, obscuringRects);
 }
+
+function isDescendantNotInTabOrder(vAncestor, vNode) {
+  return (
+    vAncestor.actualNode.contains(vNode.actualNode) && !isInTabOrder(vNode)
+  );
+}
diff --git a/test/commons/dom/get-target-rects.js b/test/commons/dom/get-target-rects.js
@@ -35,6 +35,16 @@ describe('get-target-rects', () => {
     assert.deepEqual(rects, [vNode.actualNode.getBoundingClientRect()]);
   });
 
+  it('ignores non-tabbable descendants of the target', () => {
+    const vNode = queryFixture(`
+      <button id="target" style="width: 30px; height: 40px; position: absolute; left: 10px; top: 5px">
+        <div style="position: absolute; left: 5px; top: 5px; width: 50px; height: 50px;"></div>
+      </button>
+    `);
+    const rects = getTargetRects(vNode);
+    assert.deepEqual(rects, [vNode.actualNode.getBoundingClientRect()]);
+  });
+
   it('returns each unobscured area', () => {
     const vNode = queryFixture(`
       <button id="target" style="width: 30px; height: 40px; position: absolute; left: 10px; top: 5px">x</button>
@@ -56,4 +66,17 @@ describe('get-target-rects', () => {
     const rects = getTargetRects(vNode);
     assert.lengthOf(rects, 0);
   });
+
+  it('returns subset rect of the target with tabbable descendant', () => {
+    const vNode = queryFixture(`
+      <button id="target" style="width: 30px; height: 40px; position: absolute; left: 10px; top: 5px">
+        <div tabindex="0" style="position: absolute; left: 5p; top: 5px; width: 50px; height: 50px;"></div>
+      </button>
+    `);
+    const rects = getTargetRects(vNode);
+    assert.deepEqual(rects, [
+      new DOMRect(10, 5, 30, 7),
+      new DOMRect(10, 5, 8, 40)
+    ]);
+  });
 });
diff --git a/test/integration/full/target-size/target-size.html b/test/integration/full/target-size/target-size.html
@@ -590,6 +590,7 @@
         </span>
       </div>
       <div>
+        <!-- this should technically fail the target-size rule if we were implementing the size based on the largest inscribed square -->
         <span class="passed h6 w10 rnd-50">
           <span class="failed h2 w2 mt2 ml4"></span>
         </span>
@@ -642,6 +643,7 @@
         </span>
       </div>
       <div>
+        <!-- this should technically fail the target-size rule if we were implementing the size based on the largest inscribed square -->
         <span class="passed h6 w10 rnd-0-100">
           <span class="passed h4 w4 mt1 ml1"></span>
         </span>