feat(new-rule): Add WCAG 2.2 target-size rule

lib/checks/mobile/target-offset.json

@@ -7,8 +7,8 @@
   "metadata": {
     "impact": "serious",
     "messages": {
-      "pass": "Target is sufficiently offset from its closest neighbor (${data.closestOffset}px should be at least ${data.minOffset}px)",
-      "fail": "Target is insufficient offset from its closest neighbor (${data.closestOffset}px should be at least ${data.minOffset}px)"
+      "pass": "Target has sufficiently offset from its closest neighbor (${data.closestOffset}px should be at least ${data.minOffset}px)",
+      "fail": "Target has insufficient offset from its closest neighbor (${data.closestOffset}px should be at least ${data.minOffset}px)"
     }
   }
 }

lib/commons/dom/create-grid.js

@@ -324,11 +324,13 @@ function findScrollRegionParent(vNode, parentVNode) {
  */
 function addNodeToGrid(grid, vNode) {
   const gridSize = constants.gridSize;
-  // save a reference to where this element is in the grid so we
-  // can find it even if it's in a subgrid
-  vNode._grid = grid;
-
   vNode.clientRects.forEach(rect => {
+    if (rect.right <= 0 || rect.bottom <= 0) {
+      return;
+    }
+    // save a reference to where this element is in the grid so we
+    // can find it even if it's in a subgrid
+    vNode._grid ??= grid;
     const x = rect.left;
     const y = rect.top;
 

lib/commons/dom/find-nearby-elms.js

@@ -1,33 +1,39 @@
 import createGrid from './create-grid';
 
-function findNearbyElms(vNode, margin = 0) {
+export default function findNearbyElms(vNode, margin = 0) {
   /*eslint no-bitwise: 0*/
   const gridSize = createGrid();
-  const neighbors = [];
+  if (!vNode._grid?.cells?.length) {
+    return []; // Elements not in the grid don't have ._grid
+  }
+
   const rect = vNode.boundingClientRect;
   const gridCells = vNode._grid.cells;
+  const boundaries = {
+    topRow: ((rect.top - margin) / gridSize) | 0,
+    bottomRow: ((rect.bottom + margin) / gridSize) | 0,
+    leftCol: ((rect.left - margin) / gridSize) | 0,
+    rightCol: ((rect.right + margin) / gridSize) | 0
+  };
 
-  const topRow = ((rect.top - margin) / gridSize) | 0;
-  const bottomRow = ((rect.bottom + margin) / gridSize) | 0;
-  const leftCol = ((rect.left - margin) / gridSize) | 0;
-  const rightCol = ((rect.right + margin) / gridSize) | 0;
+  const neighbors = [];
+  loopGridCells(gridCells, boundaries, vNeighbor => {
+    if (vNeighbor && vNeighbor !== vNode && !neighbors.includes(vNeighbor)) {
+      neighbors.push(vNeighbor);
+    }
+  });
+  return neighbors;
+}
 
+function loopGridCells(gridCells, boundaries, cb) {
+  const { topRow, bottomRow, leftCol, rightCol } = boundaries;
   for (let row = topRow; row <= bottomRow; row++) {
     for (let col = leftCol; col <= rightCol; col++) {
-      for (let i = 0; i <= gridCells[row][col].length; i++) {
-        var vNeighbour = gridCells[row][col][i];
-        // Avoid duplication
-        if (
-          vNeighbour &&
-          vNeighbour !== vNode &&
-          !neighbors.includes(vNeighbour)
-        ) {
-          neighbors.push(vNeighbour);
-        }
+      // Don't loop on elements outside the grid
+      const length = gridCells[row]?.[col]?.length ?? -1;
+      for (let i = 0; i <= length; i++) {
+        cb(gridCells[row][col][i]);
       }
     }
   }
-  return neighbors;
 }
-
-export default findNearbyElms;

test/commons/dom/create-grid.js

@@ -0,0 +1,148 @@
+// Additional tests for createGrid are part of createRectStack tests,
+// which is what createGrid was originally part of
+describe('create-grid', function () {
+  var fixture;
+  var createGrid = axe.commons.dom.createGrid;
+  var fixtureSetup = axe.testUtils.fixtureSetup;
+
+  function findPositions(grid, vNode) {
+    var positions = [];
+    grid.cells.forEach(function (rowCells, rowIndex) {
+      rowCells.forEach(function (cells, colIndex) {
+        if (cells.includes(vNode)) {
+          positions.push({ x: rowIndex, y: colIndex });
+        }
+      });
+    });
+    return positions;
+  }
+
+  it('returns the grid size', function () {
+    axe.setup();
+    assert.equal(createGrid(), axe.constants.gridSize);
+  });
+
+  it('sets ._grid to nodes in the grid', function () {
+    fixture = fixtureSetup('<span>Hello world</span>');
+    assert.isUndefined(fixture._grid);
+    assert.isUndefined(fixture.children[0]._grid);
+
+    createGrid();
+    assert.isDefined(fixture._grid);
+    assert.equal(fixture._grid, fixture.children[0]._grid);
+  });
+
+  it('adds elements to the correct cell in the grid', function () {
+    fixture = fixtureSetup('<span>Hello world</span>');
+    createGrid();
+    var positions = findPositions(fixture._grid, fixture.children[0]);
+    assert.deepEqual(positions, [{ x: 0, y: 0 }]);
+  });
+
+  it('adds large elements to multiple cell', function () {
+    fixture = fixtureSetup(
+      '<span style="display: inline-block; width: 300px; height: 300px;">' +
+        'Hello world</span>'
+    );
+    createGrid();
+
+    var positions = findPositions(fixture._grid, fixture.children[0]);
+    assert.deepEqual(positions, [
+      { x: 0, y: 0 },
+      { x: 0, y: 1 },
+      { x: 1, y: 0 },
+      { x: 1, y: 1 }
+    ]);
+  });
+
+  describe('hidden elements', function () {
+    beforeEach(function () {
+      // Ensure the fixture itself is part of the grid, even if its content isn't
+      document
+        .querySelector('#fixture')
+        .setAttribute('style', 'min-height: 10px');
+    });
+
+    it('does not add hidden elements', function () {
+      fixture = fixtureSetup('<div style="display: none">hidden</div>');
+      createGrid();
+      var position = findPositions(fixture._grid, fixture.children[0]);
+      assert.isEmpty(position);
+      assert.isUndefined(fixture.children[0]._grid);
+    });
+
+    it('does not add off screen elements', function () {
+      fixture = fixtureSetup(
+        '<div style="position: fixed; top: -3em">off screen</div>'
+      );
+      createGrid();
+      var position = findPositions(fixture._grid, fixture.children[0]);
+      assert.isEmpty(position);
+      assert.isUndefined(fixture.children[0]._grid);
+    });
+
+    it('does add partially on screen elements', function () {
+      fixture = fixtureSetup(
+        '<div style="position: fixed; top: -1em; min-height: 2em">off screen</div>'
+      );
+      createGrid();
+      var position = findPositions(fixture._grid, fixture.children[0]);
+      assert.deepEqual(position, [{ x: 0, y: 0 }]);
+    });
+  });
+
+  describe('subGrids', function () {
+    it('sets the .subGrid property', function () {
+      fixture = fixtureSetup(
+        '<div style="overflow: scroll; height: 100px;">' +
+          '<span style="display: inline-block; height: 300px" id="x">x</span>' +
+          '</div>'
+      );
+      var vOverflow = fixture.children[0];
+      assert.isUndefined(vOverflow._subGrid);
+      createGrid();
+      assert.isDefined(vOverflow._subGrid);
+      assert.notEqual(vOverflow._grid, vOverflow._subGrid);
+    });
+
+    it('sets the ._grid of children as the subGrid', function () {
+      fixture = fixtureSetup(
+        '<div style="overflow: scroll; height: 100px;">' +
+          '<span style="display: inline-block; height: 300px" id="x">x</span>' +
+          '</div>'
+      );
+      createGrid();
+      var vOverflow = fixture.children[0];
+      var vSpan = vOverflow.children[0];
+      assert.equal(vOverflow._subGrid, vSpan._grid);
+    });
+
+    it('does not add scrollable children to the root grid', function () {
+      fixture = fixtureSetup(
+        '<div style="overflow: scroll; height: 100px;">' +
+          '<span style="display: inline-block; height: 300px" id="x">x</span>' +
+          '</div>'
+      );
+      createGrid();
+      var vSpan = fixture.children[0].children[0];
+      var position = findPositions(fixture._grid, vSpan);
+      assert.isEmpty(position);
+    });
+
+    it('adds scrollable children to the subGrid', function () {
+      fixture = fixtureSetup(
+        '<div style="overflow: scroll; height: 100px;">' +
+          '<span style="display: inline-block; height: 300px" id="x">x</span>' +
+          '</div>'
+      );
+      createGrid();
+      var vOverflow = fixture.children[0];
+      var vSpan = vOverflow.children[0];
+      var position = findPositions(vOverflow._subGrid, vSpan);
+      assert.deepEqual(position, [
+        { x: 0, y: 0 },
+        { x: 1, y: 0 }
+      ]);
+    });
+  });
+});

test/commons/dom/find-nearby-elms.js

@@ -14,28 +14,55 @@ describe('findNearbyElms', function () {
     return ids;
   }
 
-  beforeEach(function () {
-    fixture = fixtureSetup(
-      '<div id="n0" style="height:30px; margin-bottom:30px;">0</div>' +
-        '<div id="n1" style="height:30px; margin-bottom:30px;">1</div>' +
-        '<div id="n2" style="height:30px; margin-bottom:30px;">2</div>' +
-        '<div id="n3" style="height:30px; margin-bottom:30px;">3</div>' +
-        '<div id="n4" style="height:30px; margin-bottom:30px;">4</div>' +
-        '<div id="n5" style="height:30px; margin-bottom:30px;">5</div>' +
-        '<div id="n6" style="height:30px; margin-bottom:30px;">6</div>' +
-        '<div id="n7" style="height:30px; margin-bottom:30px;">7</div>' +
-        '<div id="n8" style="height:30px; margin-bottom:30px;">8</div>' +
-        '<div id="n9" style="height:30px; margin-bottom:30px;">9</div>'
-    );
-  });
+  describe('in the viewport', function () {
+    beforeEach(function () {
+      fixture = fixtureSetup(
+        '<div id="n0" style="height:30px; margin-bottom:30px;">0</div>' +
+          '<div id="n1" style="height:30px; margin-bottom:30px;">1</div>' +
+          '<div id="n2" style="height:30px; margin-bottom:30px;">2</div>' +
+          '<div id="n3" style="height:30px; margin-bottom:30px;">3</div>' +
+          '<div id="n4" style="height:30px; margin-bottom:30px;">4</div>' +
+          '<div id="n5" style="height:30px; margin-bottom:30px;">5</div>' +
+          '<div id="n6" style="height:30px; margin-bottom:30px;">6</div>' +
+          '<div id="n7" style="height:30px; margin-bottom:30px;">7</div>' +
+          '<div id="n8" style="height:30px; margin-bottom:30px;">8</div>' +
+          '<div id="n9" style="height:30px; margin-bottom:30px;">9</div>'
+      );
+    });
+
+    it('returns node from the same grid cell', function () {
+      var nearbyElms = findNearbyElms(fixture.children[1]);
+      assert.deepEqual(getIds(nearbyElms), ['n0', 'n2', 'n3']);
+    });
 
-  it('returns node from the same grid cell', function () {
-    var nearbyElms = findNearbyElms(fixture.children[1]);
-    assert.deepEqual(getIds(nearbyElms), ['n0', 'n2', 'n3']);
+    it('returns node from multiple grid cells when crossing a boundary', function () {
+      var nearbyElms = findNearbyElms(fixture.children[5]);
+      assert.deepEqual(getIds(nearbyElms), ['n3', 'n4', 'n6']);
+    });
   });
 
-  it('returns node from multiple grid cells when crossing a boundary', function () {
-    var nearbyElms = findNearbyElms(fixture.children[5]);
-    assert.deepEqual(getIds(nearbyElms), ['n3', 'n4', 'n6']);
+  describe('on the edge', function () {
+    beforeEach(function () {
+      fixture = fixtureSetup(
+        '<div id="n0" style="position: fixed; top:-30px; height: 60px">0</div>' +
+          '<div id="n1" style="position: fixed; top:-30px; height: 30px">1</div>' +
+          '<div id="n2" style="position: fixed; top:0; height: 30px">2</div>'
+      );
+    });
+
+    it('ignores cells outside the document boundary', function () {
+      var nearbyElms = findNearbyElms(fixture.children[0]);
+      assert.deepEqual(getIds(nearbyElms), ['n2']);
+    });
+
+    it('returns no neighbors for off-screen elements', function () {
+      var nearbyElms = findNearbyElms(fixture.children[1]);
+      assert.deepEqual(getIds(nearbyElms), []);
+    });
+
+    it('returns element partially on screen as neighbors', function () {
+      var nearbyElms = findNearbyElms(fixture.children[2]);
+      assert.deepEqual(getIds(nearbyElms), ['n0']);
+    });
   });
 });