fix: added new custom rule (#722)

salesforce · Sep 2, 2024 · 65768ad · 65768ad
1 parent 0188538
commit 65768ad
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 0 deletions.
diff --git a/packages/preset-rules/src/custom-rules/checks.ts b/packages/preset-rules/src/custom-rules/checks.ts
@@ -18,6 +18,18 @@ const checkData = [
  },
  },
  },
+ {
+ id: 'Resize-reflow-textoverflow-check',
+ evaluate:
+ "function (node) {const style = window.getComputedStyle(node); const tabIndex = node.getAttribute('tabindex'); if (tabIndex === '-1' && node.actualNode && !isVisibleOnScreen(node) && !isVisibleToScreenReaders(node)) { return false; } if (node.innerText === '') { return false; } if (style.getPropertyValue('text-overflow') === 'ellipsis') { function isTextTruncated(element) {const isTruncated = (element.scrollWidth > element.clientWidth); return isTruncated; } return !isTextTruncated(node); } return true; }",
+ metadata: {
+ impact: 'moderate',
+ messages: {
+ pass: 'Text element does not have ellipses ',
+ fail: 'Text element have ellipses which make difficulty to read',
+ },
+ },
+ },
 ];
 
 export default checkData as axe.Check[];
diff --git a/packages/preset-rules/src/custom-rules/rules.ts b/packages/preset-rules/src/custom-rules/rules.ts
@@ -20,6 +20,14 @@ const rulesData = [
  none: [],
  tags: ['wcag22aa', 'wcag211'],
  },
+ {
+ id: 'Resize-reflow-textoverflow',
+ selector: '*', // Target all <img> elements
+ enabled: true,
+ any: ['Resize-reflow-textoverflow-check'],
+ all: [],
+ tags: ['custom'],
+ },
 ];
 
 export default rulesData as axe.Rule[];