fix(avoid-inline-spacing): add spacing threshold

lib/checks/shared/important-letter-spacing.json

@@ -0,0 +1,15 @@
+{
+  "id": "important-letter-spacing",
+  "evaluate": "inline-style-property-evaluate",
+  "options": {
+    "cssProperty": "letter-spacing",
+    "minValue": 0.12
+  },
+  "metadata": {
+    "impact": "serious",
+    "messages": {
+      "pass": "Letter-spacing in the style attribute is not set to !important, or meets the minimum",
+      "fail": "letter-spacing in the style attribute must not use !important, or be at ${data.minValue}em (current ${data.value}em)"
+    }
+  }
+}

lib/checks/shared/important-line-height.json

@@ -0,0 +1,16 @@
+{
+  "id": "important-line-height",
+  "evaluate": "inline-style-property-evaluate",
+  "options": {
+    "multiLineOnly": true,
+    "cssProperty": "line-height",
+    "minValue": 1.5
+  },
+  "metadata": {
+    "impact": "serious",
+    "messages": {
+      "pass": "line-height in the style attribute is not set to !important, or meets the minimum",
+      "fail": "line-height in the style attribute must not use !important, or be at ${data.minValue}em (current ${data.value}em)"
+    }
+  }
+}

lib/checks/shared/important-word-spacing.json

@@ -0,0 +1,15 @@
+{
+  "id": "important-word-spacing",
+  "evaluate": "inline-style-property-evaluate",
+  "options": {
+    "cssProperty": "word-spacing",
+    "minValue": 0.16
+  },
+  "metadata": {
+    "impact": "serious",
+    "messages": {
+      "pass": "word-spacing in the style attribute is not set to !important, or meets the minimum",
+      "fail": "word-spacing in the style attribute must not use !important, or be at ${data.minValue}em (current ${data.value}em)"
+    }
+  }
+}

lib/checks/shared/inline-style-property-evaluate.js

@@ -0,0 +1,71 @@
+import { getLineCount } from '../../commons/text';
+
+/**
+ * Check if a CSS property 
+ */
+export default function inlineStyleProperty(node, options) {
+  const {
+    cssProperty,
+    absoluteValues,
+    minValue,
+    maxValue,
+    noImportant,
+    multiLineOnly
+  } = options;
+  if (!noImportant && node.style.getPropertyPriority(cssProperty) !== `important`) {
+    return true; // style attribute does not use !important
+  }
+  if (multiLineOnly && getLineCount(node) <= 1) {
+    return true; // Ignore line-height for single line texts
+  }
+
+  const data = {}
+  if (typeof minValue === 'number') {
+    data.minValue = minValue;
+  }
+  if (typeof maxValue === 'number') {
+    data.maxValue = maxValue;
+  }
+
+  // These do not set the actual value to important, instead they
+  // say that it is important to use the inherited / root value.
+  // The actual value can still be modified
+  const declaredPropValue = node.style.getPropertyValue(cssProperty);
+  if (['inherit', 'unset'].includes(declaredPropValue)) {
+    this.data({ value: declaredPropValue, ...data });
+    return true;
+  }
+
+  const value = getNumberValue(node, { absoluteValues, cssProperty });
+  this.data({ value, ...data });
+  if (typeof value !== 'number') {
+    return undefined; // Renderer did something it shouldn't
+  }
+
+  if (
+    (typeof minValue !== 'number' || value >= minValue) &&
+    (typeof maxValue !== 'number' || value <= maxValue)
+  ) {
+    return true;
+  }
+  return false;
+}
+
+function getNumberValue(domNode, { cssProperty, absoluteValues }) {
+  const computedStyle = window.getComputedStyle(domNode);
+  const cssPropValue = computedStyle.getPropertyValue(cssProperty);
+  if (cssPropValue === 'normal') {
+    return 0;
+  }
+  const parsedValue = parseFloat(cssPropValue);
+  if (absoluteValues) {
+    return parsedValue;
+  }
+  const fontSize = parseFloat(computedStyle.getPropertyValue('font-size'));
+  // Make the value relative to the font-size
+  const value = Math.round(parsedValue / fontSize * 100) / 100;
+  if (isNaN(value)) {
+    return cssPropValue; // Something went wrong, return the string instead
+  }
+  return value;
+}

lib/commons/text/get-line-count.js

@@ -0,0 +1,29 @@
+/**
+ * Return the number of line wraps in a DOM element
+ * 
+ * IMPORTANT: This function assumes single-column flowing text.
+ * Floating images, flex-box, and positioned content can throw off
+ * the count. 
+ * @param {Element} domNode 
+ * @param {number} margin (default: 2)
+ * @returns {number}
+ */
+export default function getLineCount(domNode, margin = 2) {
+  const range = domNode.ownerDocument.createRange();
+  range.setStart(domNode, 0);
+  range.setEnd(domNode, domNode.childNodes.length);
+  let lastLineEnd = 0;
+  let lineCount = 0;
+  for (const rect of range.getClientRects()) {;
+    if (rect.height <= margin) {
+      continue;
+    }
+    if (lastLineEnd <= rect.top + margin) {
+      lastLineEnd = rect.bottom;
+      lineCount++
+    } else {
+      lastLineEnd = Math.max(lastLineEnd, rect.bottom);
+    }
+  }
+  return lineCount;
+}

lib/commons/text/index.js

@@ -9,6 +9,7 @@ export {
   default as formControlValue,
   formControlValueMethods
 } from './form-control-value';
+export { default as getLineCount } from './get-line-count';
 export { default as hasUnicode } from './has-unicode';
 export { default as isHumanInterpretable } from './is-human-interpretable';
 export { default as isIconLigature } from './is-icon-ligature';

lib/rules/avoid-inline-spacing.json

@@ -1,13 +1,18 @@
 {
   "id": "avoid-inline-spacing",
   "selector": "[style]",
+  "matches": "is-visible-matches",
   "tags": ["cat.structure", "wcag21aa", "wcag1412", "ACT"],
   "actIds": ["24afc2", "9e45ec", "78fd32"],
   "metadata": {
     "description": "Ensure that text spacing set through style attributes can be adjusted with custom stylesheets",
     "help": "Inline text spacing must be adjustable with custom stylesheets"
   },
-  "all": ["avoid-inline-spacing"],
+  "all": [
+    "important-letter-spacing",
+    "important-word-spacing",
+    "important-line-height"
+  ],
   "any": [],
   "none": []
 }

lib/rules/is-visible-matches.js

@@ -0,0 +1,5 @@
+import { isVisible } from '../commons/dom';
+
+export default function hasVisibleTextMatches(node) {
+  return isVisible(node, false);
+}

test/act-mapping/letter-spacing-not-important.json

@@ -0,0 +1,5 @@
+{
+  "id": "24afc2",
+  "title": "Letter spacing in style attributes is not !important",
+  "axeRules": ["avoid-inline-spacing"]
+}

test/act-mapping/line-height-not-important.json

@@ -0,0 +1,5 @@
+{
+  "id": "78fd32",
+  "title": "Line height in style attributes is not !important",
+  "axeRules": ["avoid-inline-spacing"]
+}

test/act-mapping/word-spacing-not-important.json

@@ -0,0 +1,5 @@
+{
+  "id": "9e45ec",
+  "title": "Word spacing in style attributes is not !important",
+  "axeRules": ["avoid-inline-spacing"]
+}