Merge pull request #1690 from equalizedigital/steve/pro-802-elementor-icon-screen-reader-text-or-something-false

Fix false positive: skip screen-reader-only elements in text_size_too_small check

Author: SteveJonesDev

src/pageScanner/checks/text-size-too-small.js

@@ -5,7 +5,7 @@
  * @return {boolean} True if the text size is equal to or below the minimum size. False otherwise.
  */
 
-import { fontSizeInPx } from '../helpers/helpers';
+import { fontSizeInPx, isScreenReaderOnly } from '../helpers/helpers';
 
 const SMALL_FONT_SIZE_THRESHOLD = 10;
 
@@ -22,7 +22,21 @@ export default {
 		// handles both leaf nodes and container elements with mixed content.
 		const hasTextChild = Array.from( node.childNodes ).some( ( child ) => child.nodeType === Node.TEXT_NODE );
 		if ( ! node.childNodes.length || hasTextChild ) {
-			return fontSizeInPx( node ) <= SMALL_FONT_SIZE_THRESHOLD;
+			// Screen-reader-only elements are visually hidden intentionally — font size
+			// is irrelevant for text that sighted users never see.
+			if ( isScreenReaderOnly( node ) ) {
+				return false;
+			}
+
+			const fontSize = fontSizeInPx( node );
+
+			// font-size: 0 means the text isn't rendering at all (commonly used as a
+			// layout technique on icon widget containers). That's not "too small to read".
+			if ( fontSize === 0 ) {
+				return false;
+			}
+
+			return fontSize <= SMALL_FONT_SIZE_THRESHOLD;
 		}
 
 		// No text nodes were found in direct children, and this is not a leaf node,

src/pageScanner/helpers/helpers.js

@@ -52,6 +52,33 @@ export const isElementVisible = ( element ) => {
 	return element.parentElement ? isElementVisible( element.parentElement ) : true;
 };
 
+/**
+ * Check if an element (or any ancestor) is hidden using the screen-reader-only
+ * technique — visually clipped to nothing but still in the accessibility tree.
+ * Font-size checks are irrelevant for such elements.
+ *
+ * @param {HTMLElement} element The element to check.
+ * @return {boolean} True if the element is screen-reader-only.
+ */
+export const isScreenReaderOnly = ( element ) => {
+	let el = element;
+	while ( el && el.nodeType === Node.ELEMENT_NODE ) {
+		const style = window.getComputedStyle( el );
+		const isPositional = style.position === 'absolute' || style.position === 'fixed';
+		if ( ( isPositional && style.clip === 'rect(0px, 0px, 0px, 0px)' ) || style.clipPath === 'inset(50%)' ) {
+			return true;
+		}
+		// Catch sr-only patterns that rely on 1px dimensions rather than clip values
+		// (e.g. Elementor's .elementor-screen-only uses width/height:1px + overflow:hidden).
+		if ( isPositional && style.overflow === 'hidden' &&
+				parseFloat( style.width ) <= 1 && parseFloat( style.height ) <= 1 ) {
+			return true;
+		}
+		el = el.parentElement;
+	}
+	return false;
+};
+
 /**
  * A Map that normalizes all keys to lowercase
  */

tests/jest/rules/textSmall.test.js

@@ -0,0 +1,117 @@
+import axe from 'axe-core';
+
+beforeAll( async () => {
+	const textSmallRuleModule = await import( '../../../src/pageScanner/rules/text-small.js' );
+	const textSizeTooSmallCheckModule = await import( '../../../src/pageScanner/checks/text-size-too-small.js' );
+	const textSmallRule = textSmallRuleModule.default;
+	const textSizeTooSmallCheck = textSizeTooSmallCheckModule.default;
+
+	axe.configure( {
+		rules: [ textSmallRule ],
+		checks: [ textSizeTooSmallCheck ],
+	} );
+} );
+
+beforeEach( () => {
+	document.body.innerHTML = '';
+} );
+
+describe( 'Text Small Validation', () => {
+	const testCases = [
+		// PASSING CASES
+		{
+			name: 'should pass for text above the size threshold',
+			html: '<p style="font-size: 14px;">Normal sized text</p>',
+			shouldPass: true,
+		},
+		{
+			name: 'should pass for text exactly above the threshold',
+			html: '<span style="font-size: 11px;">Slightly above threshold</span>',
+			shouldPass: true,
+		},
+		{
+			name: 'should pass for element with no text content',
+			html: '<p style="font-size: 8px;"></p>',
+			shouldPass: true,
+		},
+		{
+			name: 'should pass for container element with no direct text children',
+			html: '<div style="font-size: 8px;"><span>Child text</span></div>',
+			shouldPass: true,
+		},
+		{
+			name: 'should pass for screen-reader-only text using classic clip pattern',
+			html: '<span style="position: absolute; width: 1px; height: 1px; clip: rect(0px, 0px, 0px, 0px); overflow: hidden; font-size: 8px;">Screen reader only</span>',
+			shouldPass: true,
+		},
+		{
+			name: 'should pass for screen-reader-only text using clip-path pattern',
+			html: '<span style="clip-path: inset(50%); font-size: 8px;">Screen reader only</span>',
+			shouldPass: true,
+		},
+		{
+			name: 'should pass for screen-reader-only text using dimension-based pattern (no clip)',
+			html: '<span style="position: absolute; width: 1px; height: 1px; overflow: hidden; font-size: 8px;">Screen reader only</span>',
+			shouldPass: true,
+		},
+		{
+			name: 'should pass for screen-reader-only text nested inside a visible element (Elementor social icon pattern)',
+			html: '<a href="#" style="font-size: 8px;"><span style="position: absolute; width: 1px; height: 1px; overflow: hidden;">Facebook</span><svg aria-hidden="true"></svg></a>',
+			shouldPass: true,
+		},
+		{
+			name: 'should pass for text with font-size: 0 inherited from a layout container (Elementor social icons pattern)',
+			html: '<div style="font-size: 0;"><span>Screen reader label</span></div>',
+			shouldPass: true,
+		},
+
+		// FAILING CASES
+		{
+			name: 'should fail for clip without absolute/fixed position (clip has no visual effect)',
+			html: '<span style="position: static; clip: rect(0px, 0px, 0px, 0px); font-size: 8px;">Clip but not positioned</span>',
+			shouldPass: false,
+		},
+		{
+			name: 'should fail for text at the threshold boundary (10px)',
+			html: '<span style="font-size: 10px;">Threshold text</span>',
+			shouldPass: false,
+		},
+		{
+			name: 'should fail for text below the threshold',
+			html: '<p style="font-size: 8px;">Small text</p>',
+			shouldPass: false,
+		},
+		{
+			name: 'should fail for small text in a heading',
+			html: '<h2 style="font-size: 9px;">Small heading</h2>',
+			shouldPass: false,
+		},
+		{
+			name: 'should fail for small text in a link',
+			html: '<a href="#" style="font-size: 7px;">Tiny link</a>',
+			shouldPass: false,
+		},
+		{
+			name: 'should fail for small text in a list item',
+			html: '<ul><li style="font-size: 8px;">Small list item</li></ul>',
+			shouldPass: false,
+		},
+	];
+
+	testCases.forEach( ( testCase ) => {
+		it( testCase.name, async () => {
+			document.body.innerHTML = testCase.html;
+
+			const results = await axe.run( document, {
+				runOnly: [ 'text_small' ],
+			} );
+
+			if ( testCase.shouldPass ) {
+				expect( results.violations.length ).toBe( 0 );
+			} else {
+				expect( results.violations.length ).toBeGreaterThan( 0 );
+				expect( results.violations[ 0 ].id ).toBe( 'text_small' );
+			}
+		} );
+	} );
+} );