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

doc/check-options.md

@@ -31,6 +31,8 @@
   - [p-as-heading](#p-as-heading)
   - [avoid-inline-spacing](#avoid-inline-spacing)
   - [scope-value](#scope-value)
+  - [target-offset](#target-offset)
+  - [target-size](#target-size)
   - [region](#region)
   - [inline-style-property](#inline-style-property)
 
@@ -487,6 +489,18 @@ h6:not([role]),
 | -------- | :-------------------------------------------------------- | :------------------------- |
 | `values` | <pre lang=js>['row', 'col', 'rowgroup', 'colgroup']</pre> | List of valid scope values |
 
+### target-offset
+
+| Option      | Default | Description                                                                                                |
+| ----------- | :------ | :--------------------------------------------------------------------------------------------------------- |
+| `minOffset` | `24`    | Minimum space required from the farthest edge of the target, to the closest edge of the neighboring target |
+
+### target-size
+
+| Option    | Default | Description                                                                                              |
+| --------- | :------ | :------------------------------------------------------------------------------------------------------- |
+| `minSize` | `24`    | Minimum width and height a component should have, that is not obscured by some other interactive element |
+
 ### region
 
 | Option          | Default                                        | Description                                                                 |

doc/rule-descriptions.md

@@ -71,10 +71,11 @@
 
 ## WCAG 2.1 Level A & AA Rules
 
-| Rule ID                                                                                                            | Description                                                                                   | Impact  | Tags                                   | Issue Type | ACT Rules                                                                                                                                                  |
-| :----------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------- | :------ | :------------------------------------- | :--------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [autocomplete-valid](https://dequeuniversity.com/rules/axe/4.4/autocomplete-valid?application=RuleDescription)     | Ensure the autocomplete attribute is correct and suitable for the form field                  | Serious | cat.forms, wcag21aa, wcag135, ACT      | failure    | [73f2c2](https://act-rules.github.io/rules/73f2c2)                                                                                                         |
-| [avoid-inline-spacing](https://dequeuniversity.com/rules/axe/4.4/avoid-inline-spacing?application=RuleDescription) | Ensure that text spacing set through style attributes can be adjusted with custom stylesheets | Serious | cat.structure, wcag21aa, wcag1412, ACT | failure    | [24afc2](https://act-rules.github.io/rules/24afc2), [9e45ec](https://act-rules.github.io/rules/9e45ec), [78fd32](https://act-rules.github.io/rules/78fd32) |
+| Rule ID                                                                                                            | Description                                                                                   | Impact  | Tags                                         | Issue Type | ACT Rules                                                                                                                                                  |
+| :----------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------- | :------ | :------------------------------------------- | :--------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [autocomplete-valid](https://dequeuniversity.com/rules/axe/4.4/autocomplete-valid?application=RuleDescription)     | Ensure the autocomplete attribute is correct and suitable for the form field                  | Serious | cat.forms, wcag21aa, wcag135, ACT            | failure    | [73f2c2](https://act-rules.github.io/rules/73f2c2)                                                                                                         |
+| [avoid-inline-spacing](https://dequeuniversity.com/rules/axe/4.4/avoid-inline-spacing?application=RuleDescription) | Ensure that text spacing set through style attributes can be adjusted with custom stylesheets | Serious | cat.structure, wcag21aa, wcag1412, ACT       | failure    | [24afc2](https://act-rules.github.io/rules/24afc2), [9e45ec](https://act-rules.github.io/rules/9e45ec), [78fd32](https://act-rules.github.io/rules/78fd32) |
+| [target-size](https://dequeuniversity.com/rules/axe/4.4/target-size?application=RuleDescription)                   | Ensure touch target have sufficient size and space                                            | Serious | wcag22aa, sc258, cat.sensory-and-visual-cues | failure    |                                                                                                                                                            |
 
 ## Best Practices Rules
 

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

@@ -0,0 +1,34 @@
+import { findNearbyElms } from '../../commons/dom';
+import { getRole, getRoleType } from '../../commons/aria';
+import { getOffset } from '../../commons/math';
+
+const roundingMargin = 0.05;
+
+export default function targetOffsetEvaluate(node, options, vNode) {
+  const minOffset = options?.minOffset || 24;
+  const closeNeighbors = [];
+  let closestOffset = minOffset;
+  for (const vNeighbor of findNearbyElms(vNode, minOffset)) {
+    const role = getRole(vNeighbor);
+    if (getRoleType(role) !== 'widget') {
+      continue;
+    }
+    const offset = roundToSingleDecimal(getOffset(vNode, vNeighbor));
+    if (offset + roundingMargin >= minOffset) {
+      continue;
+    }
+    closestOffset = Math.min(closestOffset, offset);
+    closeNeighbors.push(vNeighbor.actualNode);
+  }
+
+  this.data({ closestOffset, minOffset });
+  if (closeNeighbors.length > 0) {
+    this.relatedNodes(closeNeighbors);
+    return false;
+  }
+  return true;
+}
+
+function roundToSingleDecimal(num) {
+  return Math.round(num * 10) / 10;
+}

lib/checks/mobile/target-offset.json

@@ -0,0 +1,14 @@
+{
+  "id": "target-offset",
+  "evaluate": "target-offset-evaluate",
+  "options": {
+    "minOffset": 24
+  },
+  "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)"
+    }
+  }
+}

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

@@ -0,0 +1,77 @@
+import { findNearbyElms } from '../../commons/dom';
+import { getRole, getRoleType } from '../../commons/aria';
+import { splitRects, hasVisualOverlap } from '../../commons/math';
+
+const roundingMargin = 0.05;
+
+/**
+ * Determine if an element has a minimum size, taking into account
+ * any elements that may obscure it.
+ */
+export default function targetSize(node, options, vNode) {
+  const minSpacing = options?.minSpacing || 24;
+  const hasMinimumSize = ({ width, height }) => {
+    return (
+      width + roundingMargin >= minSpacing &&
+      height + roundingMargin >= minSpacing
+    );
+  };
+
+  const nodeRect = vNode.boundingClientRect;
+  if (!hasMinimumSize(nodeRect)) {
+    this.data({ minSpacing, ...toDecimalSize(nodeRect) });
+    return false;
+  }
+
+  // Handle overlapping elements;
+  const nearbyElms = findNearbyElms(vNode);
+  const obscuringElms = nearbyElms.filter(vNeighbor => {
+    const role = getRole(vNeighbor);
+    return getRoleType(role) === 'widget' && hasVisualOverlap(vNode, vNeighbor);
+  });
+
+  if (obscuringElms.length === 0) {
+    this.data({ minSpacing, ...toDecimalSize(nodeRect) });
+    return true; // No obscuring elements; pass
+  }
+
+  // Find areas of the target that are not obscured
+  const obscuringRects = obscuringElms.map(
+    ({ boundingClientRect: rect }) => rect
+  );
+  const unobscuredRects = splitRects(nodeRect, obscuringRects);
+
+  // Of the unobscured inner rects, work out the largest
+  const largestInnerRect = unobscuredRects.reduce((rectA, rectB) => {
+    const rectAisMinimum = hasMinimumSize(rectA);
+    const rectBisMinimum = hasMinimumSize(rectB);
+    // Prioritize rects that pass the minimum
+    if (rectAisMinimum !== rectBisMinimum) {
+      return rectAisMinimum ? rectA : rectB;
+    }
+    const areaA = rectA.width * rectA.height;
+    const areaB = rectB.width * rectB.height;
+    return areaA > areaB ? rectA : rectB;
+  });
+
+  if (!hasMinimumSize(largestInnerRect)) {
+    this.data({
+      messageKey: 'obscured',
+      minSpacing,
+      ...toDecimalSize(largestInnerRect)
+    });
+    this.relatedNodes(obscuringElms.map(({ actualNode }) => actualNode));
+    // Element is (partially?) obscured, with insufficient space
+    return false;
+  }
+
+  this.data({ minSpacing, ...toDecimalSize(largestInnerRect) });
+  return true;
+}
+
+function toDecimalSize(rect) {
+  return {
+    width: Math.round(rect.width * 10) / 10,
+    height: Math.round(rect.height * 10) / 10
+  };
+}

lib/checks/mobile/target-size.json

@@ -0,0 +1,17 @@
+{
+  "id": "target-size",
+  "evaluate": "target-size-evaluate",
+  "options": {
+    "minSpacing": 24
+  },
+  "metadata": {
+    "impact": "serious",
+    "messages": {
+      "pass": "Control has sufficient size (${data.width}px by ${data.height}px, should be at least ${data.minSpacing}px by ${data.minSpacing}px)",
+      "fail": {
+        "default": "Element has insufficient size (${data.width}px by ${data.height}px, should be at least ${data.minSpacing}px by ${data.minSpacing}px)",
+        "obscured": "Element has insufficient size because it is obscured (smallest space is ${data.width}px by ${data.height}px, should be at least ${data.minSpacing}px by ${data.minSpacing}px)"
+      }
+    }
+  }
+}