fix(target-size): determine offset using clientRects if target is display:inline (#5012)

This pr does two things:

1. For target size we decided to calculate the visible unobscured rects
by taking the bounding rect of the target and subtracting the client
rects of the obscurer if the obscurer is inline. This is because an
inline element only accepts pointer events on the client rects and not
the bounding rect. For the target we still take the bounding rect and
not the client rects if the target is inline because we both agreed that
the goal of the target size rule is to prevent clicking on the wrong
target and not that the target itself is large enough to click on. So an
inline element with multiple lines would have dead pointer zones within
it, but accidentally clicking on a dead zone is not a failure of target
size.
2. This also applies using client rects for inline elements for the
spacing exception for the same reasons as above. What this does is allow
checking multiple target rects for inline nodes and makes sure each rect
passes the spacing exception. If at least one rect does not pass the
rule fails for that element.

Closes: #4928

Author: straker

lib/checks/mobile/target-size-evaluate.js

@@ -66,7 +66,11 @@ export default function targetSizeEvaluate(node, options, vNode) {
     return true;
   }
 
-  const largestInnerRect = getLargestUnobscuredArea(vNode, obscuredWidgets);
+  const largestInnerRect = getLargestUnobscuredArea(
+    vNode,
+    obscuredWidgets,
+    minSize
+  );
   if (!largestInnerRect) {
     this.data({ minSize, messageKey: 'tooManyRects' });
     return undefined;
@@ -127,11 +131,16 @@ function filterByElmsOverlap(vNode, nearbyElms) {
 }
 
 // Find areas of the target that are not obscured
-function getLargestUnobscuredArea(vNode, obscuredNodes) {
+function getLargestUnobscuredArea(vNode, obscuredNodes, minSize) {
   const nodeRect = vNode.boundingClientRect;
-  const obscuringRects = obscuredNodes.map(
-    ({ boundingClientRect: rect }) => rect
-  );
+  const obscuringRects = obscuredNodes
+    .map(obscuredNode => {
+      const display = obscuredNode.getComputedStylePropertyValue('display');
+      return display === 'inline'
+        ? obscuredNode.clientRects
+        : obscuredNode.boundingClientRect;
+    })
+    .flat(Infinity);
   let unobscuredRects;
   try {
     unobscuredRects = splitRects(nodeRect, obscuringRects);
@@ -140,7 +149,7 @@ function getLargestUnobscuredArea(vNode, obscuredNodes) {
   }
 
   // Of the unobscured inner rects, work out the largest
-  return getLargestRect(unobscuredRects);
+  return getLargestRect(unobscuredRects, minSize);
 }
 
 // Find the largest rectangle in the array, prioritize ones that meet a minimum size

lib/commons/dom/get-target-rects.js

@@ -13,7 +13,9 @@ export default memoize(getTargetRects);
  * @return {DOMRect[]}
  */
 function getTargetRects(vNode) {
-  const nodeRect = vNode.boundingClientRect;
+  const display = vNode.getComputedStylePropertyValue('display');
+  const nodeRects =
+    display === 'inline' ? vNode.clientRects : [vNode.boundingClientRect];
   const overlappingVNodes = findNearbyElms(vNode).filter(vNeighbor => {
     return (
       hasVisualOverlap(vNode, vNeighbor) &&
@@ -23,13 +25,19 @@ function getTargetRects(vNode) {
   });
 
   if (!overlappingVNodes.length) {
-    return [nodeRect];
+    return nodeRects;
   }
 
-  const obscuringRects = overlappingVNodes.map(
-    ({ boundingClientRect: rect }) => rect
-  );
-  return splitRects(nodeRect, obscuringRects);
+  const obscuringRects = overlappingVNodes
+    .map(overlappingVNode => {
+      const overlappingDisplay =
+        overlappingVNode.getComputedStylePropertyValue('display');
+      return overlappingDisplay === 'inline'
+        ? overlappingVNode.clientRects
+        : overlappingVNode.boundingClientRect;
+    })
+    .flat(Infinity);
+  return splitRects(nodeRects, obscuringRects);
 }
 
 function isDescendantNotInTabOrder(vAncestor, vNode) {

lib/commons/math/get-offset.js

@@ -21,33 +21,33 @@ export default function getOffset(vTarget, vNeighbor, minRadiusNeighbour = 12) {
     return null;
   }
 
-  const targetBoundingBox = targetRects.reduce(getBoundingRect);
-  const targetCenter = getRectCenter(targetBoundingBox);
+  // calculate distance of each target rect to the closest edge of each neighbor rect
+  return targetRects.reduce((minDistance, targetRect) => {
+    const targetCenter = getRectCenter(targetRect);
 
-  // calculate distance to the closest edge of each neighbor rect
-  let minDistance = Infinity;
-  for (const rect of neighborRects) {
-    if (isPointInRect(targetCenter, rect)) {
-      return 0;
-    }
+    for (const rect of neighborRects) {
+      if (isPointInRect(targetCenter, rect)) {
+        return 0;
+      }
 
-    const closestPoint = getClosestPoint(targetCenter, rect);
-    const distance = pointDistance(targetCenter, closestPoint);
-    minDistance = Math.min(minDistance, distance);
-  }
+      const closestPoint = getClosestPoint(targetCenter, rect);
+      const distance = pointDistance(targetCenter, closestPoint);
+      minDistance = Math.min(minDistance, distance);
+    }
 
-  const neighborTargetSize = getTargetSize(vNeighbor);
-  if (rectHasMinimumSize(minRadiusNeighbour * 2, neighborTargetSize)) {
-    return minDistance;
-  }
+    const neighborTargetSize = getTargetSize(vNeighbor);
+    if (rectHasMinimumSize(minRadiusNeighbour * 2, neighborTargetSize)) {
+      return minDistance;
+    }
 
-  const neighborBoundingBox = neighborRects.reduce(getBoundingRect);
-  const neighborCenter = getRectCenter(neighborBoundingBox);
-  // subtract the radius of the circle from the distance to center to get distance to edge of the neighbor circle
-  const centerDistance =
-    pointDistance(targetCenter, neighborCenter) - minRadiusNeighbour;
+    const neighborBoundingBox = neighborRects.reduce(getBoundingRect);
+    const neighborCenter = getRectCenter(neighborBoundingBox);
+    // subtract the radius of the circle from the distance to center to get distance to edge of the neighbor circle
+    const centerDistance =
+      pointDistance(targetCenter, neighborCenter) - minRadiusNeighbour;
 
-  return Math.max(0, Math.min(minDistance, centerDistance));
+    return Math.max(0, Math.min(minDistance, centerDistance));
+  }, Infinity);
 }
 
 function getClosestPoint(point, rect) {

lib/commons/math/split-rects.js

@@ -3,12 +3,12 @@
  * space that does not overlap.
  * @method getOffset
  * @memberof axe.commons.math
- * @param {DOMRect} outerRect
+ * @param {DOMRect|DOMRect[]} outerRect
  * @param {DOMRect[]} overlapRects
  * @returns {DOMRect[]} Unique array of rects
  */
 export default function splitRects(outerRect, overlapRects) {
-  let uniqueRects = [outerRect];
+  let uniqueRects = Array.isArray(outerRect) ? outerRect : [outerRect];
   for (const overlapRect of overlapRects) {
     uniqueRects = uniqueRects.reduce((rects, inputRect) => {
       return rects.concat(splitRect(inputRect, overlapRect));

test/checks/mobile/target-offset.js

@@ -34,6 +34,19 @@ describe('target-offset tests', () => {
     assert.closeTo(checkContext._data.closestOffset, 24, 0.2);
   });
 
+  it('returns true when wrapped inline elements offset is 24px', () => {
+    const checkArgs = checkSetup(`
+      <div style="font-size: 18px; margin: 1em auto; width: 6em; line-height: 1.3;">
+        <a id="target" href="/foo" class="A"> Hello hello hello</a>
+        <a href="/bar" class="B">Hello hello hello</a>
+      </div>
+    `);
+
+    assert.isTrue(checkEvaluate.apply(checkContext, checkArgs));
+    assert.equal(checkContext._data.minOffset, 24);
+    assert.closeTo(checkContext._data.closestOffset, 24, 0.2);
+  });
+
   describe('when the offset is insufficient', () => {
     it('returns false for targets in the tab order', () => {
       const checkArgs = checkSetup(
@@ -66,6 +79,32 @@ describe('target-offset tests', () => {
       assert.equal(checkContext._data.minOffset, 24);
       assert.closeTo(checkContext._data.closestOffset, 22, 0.2);
     });
+
+    it('returns false when wrapped inline elements offset is <24px', () => {
+      const checkArgs = checkSetup(`
+        <div style="font-size: 18px; margin: 1em auto; width: 6em; line-height: 1.1;">
+          <a id="target" href="/foo" class="A"> Hello hello hello</a>
+          <a href="/bar" class="B">Hello hello hello</a>
+        </div>
+      `);
+
+      assert.isFalse(checkEvaluate.apply(checkContext, checkArgs));
+      assert.equal(checkContext._data.minOffset, 24);
+      assert.closeTo(checkContext._data.closestOffset, 20, 3);
+    });
+
+    it('returns false when one line of a wrapped inline elements offset is <24px', () => {
+      const checkArgs = checkSetup(`
+        <div style="font-size: 18px; margin: 1em auto; width: 6em; line-height: 1.3;">
+          <a id="target" href="/foo" class="A"> Hello hello hello</a>
+          <a style="margin-left: -30px" href="/bar" class="B">Hello hello hello</a>
+        </div>
+      `);
+
+      assert.isFalse(checkEvaluate.apply(checkContext, checkArgs));
+      assert.equal(checkContext._data.minOffset, 24);
+      assert.closeTo(checkContext._data.closestOffset, 15.5, 5);
+    });
   });
 
   it('ignores non-widget elements as neighbors', () => {

test/checks/mobile/target-size.js

@@ -176,6 +176,36 @@ describe('target-size tests', () => {
         assert.deepEqual(elmIds(checkContext._relatedNodes), ['#obscurer']);
       });
 
+      it('returns true for obscured target when an unobscured rect has sufficient size but smaller area', () => {
+        const checkArgs = checkSetup(`
+          <div style="position: relative;">
+            <button id="target" style="width: 80px; height: 40px;">X</button>
+            <button id="obscurer" style="width: 80px; height: 40px; position: absolute; left: 30px; top: 20px;">x</button>
+          </div>
+        `);
+        assert.isTrue(check.evaluate.apply(checkContext, checkArgs));
+        assert.deepEqual(checkContext._data, {
+          minSize: 24,
+          width: 30,
+          height: 40
+        });
+        assert.deepEqual(elmIds(checkContext._relatedNodes), ['#obscurer']);
+      });
+
+      it('returns true for multiline inline target with sufficient space', () => {
+        const checkArgs = checkSetup(`
+          <div style="font-size: 18px; margin: 1em auto; width: 6em; line-height: 1.3">
+            <a id="not-obscurer" href="/foo" class="A"> Hello hello</a>
+            <a id="target" href="/bar" class="B">Hello hello hello</a>
+            <a id="obscurer" href="/bar" class="C">Hello hello hello</a>
+          </div>
+        `);
+        assert.isTrue(check.evaluate.apply(checkContext, checkArgs));
+        assert.closeTo(checkContext._data.width, 40.5, 10);
+        assert.closeTo(checkContext._data.height, 40.5, 5);
+        assert.deepEqual(elmIds(checkContext._relatedNodes), ['#obscurer']);
+      });
+
       it('returns undefined if there are too many focusable widgets', () => {
         let html = '';
         for (let i = 0; i < 100; i++) {

test/commons/dom/get-target-rects.js

@@ -96,4 +96,14 @@ describe('get-target-rects', () => {
     const rects = getTargetRects(vNode);
     assert.deepEqual(rects, [vNode.actualNode.getBoundingClientRect()]);
   });
+
+  it('uses client rects if target is inline', () => {
+    const vNode = queryFixture(`
+      <div style="width: 20px">
+        <a href="#" id="target">hello world</a>
+      </div>
+    `);
+    const rects = getTargetRects(vNode);
+    assert.deepEqual(rects, Array.from(vNode.actualNode.getClientRects()));
+  });
 });

test/commons/math/split-rects.js

@@ -28,6 +28,14 @@ describe('splitRects', () => {
     }, 'splitRects: Too many rects');
   });
 
+  it('accepts an array of rects', () => {
+    const rectA = new DOMRect(0, 0, 100, 50);
+    const rectB = new DOMRect(0, 50, 50, 50);
+    const rects = splitRects([rectA], [rectB]);
+    assert.lengthOf(rects, 1);
+    assert.deepEqual(rects[0], rectA);
+  });
+
   describe('with one overlapping rect', () => {
     it('returns one rect if overlaps covers two corners', () => {
       const rectA = new DOMRect(0, 0, 100, 50);
@@ -73,6 +81,14 @@ describe('splitRects', () => {
       const rects = splitRects(rectA, [rectB]);
       assert.lengthOf(rects, 0);
     });
+
+    it('accepts an array of rects', () => {
+      const rectA = new DOMRect(0, 0, 100, 50);
+      const rectB = new DOMRect(40, 0, 100, 50);
+      const rects = splitRects([rectA], [rectB]);
+      assert.lengthOf(rects, 1);
+      assert.deepEqual(rects[0], new DOMRect(0, 0, 40, 50));
+    });
   });
 
   describe('with multiple overlaps', () => {

test/integration/rules/target-size/target-size.html

@@ -145,6 +145,27 @@
   >
 </p>
 
+<div style="font-size: 18px; margin: 1em auto; width: 6em; line-height: 1.3">
+  <a id="pass18" href="/foo" class="A"> Hello hello hello</a>
+  <a id="pass19" href="/bar" class="B">Hello hello hello</a>
+</div>
+
+<div style="font-size: 18px; margin: 1em auto; width: 6em; line-height: 1.3">
+  <a id="pass20" href="/foo" class="A"> Hello hello</a>
+  <a id="pass21" href="/bar" class="B">Hello hello hello</a>
+  <a id="pass22" href="/bar" class="C">Hello hello hello</a>
+</div>
+
+<div style="position: relative">
+  <button id="pass23" style="width: 80px; height: 40px">X</button>
+  <button
+    id="pass24"
+    style="width: 80px; height: 40px; position: absolute; left: 30px; top: 20px"
+  >
+    x
+  </button>
+</div>
+
 <p>
   <!-- These links touch, images overflow on the left and right -->
   <a href="#" id="incomplete5"

test/integration/rules/target-size/target-size.json

@@ -29,6 +29,13 @@
     ["#pass15"],
     ["#pass16"],
     ["#pass17"],
+    ["#pass18"],
+    ["#pass19"],
+    ["#pass20"],
+    ["#pass21"],
+    ["#pass22"],
+    ["#pass23"],
+    ["#pass24"],
     ["#pass-adjacent"],
     ["#pass-fixed"]
   ],