@afixt/test-utils 2.3.0 → 2.4.0

package/.claude/settings.local.json

@@ -18,7 +18,8 @@
       "Bash(node:*)",
       "Bash(npx vitest run:*)",
       "Bash(1)",
-      "Bash(npm run test:playwright:css:*)"
+      "Bash(npm run test:playwright:css:*)",
+      "Bash(npm run:*)"
     ]
   },
   "enableAllProjectMcpServers": false

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@afixt/test-utils",
-    "version": "2.3.0",
+    "version": "2.4.0",
     "description": "Various utilities for accessibility testing",
     "main": "src/index.js",
     "scripts": {

package/src/cssUtils.js

@@ -3,6 +3,53 @@
  * @module cssUtils
  */
 
+const { hasCSSGeneratedContent } = require('./hasCSSGeneratedContent.js');
+
+const ICON_FONT_CLASS_PREFIXES = ['icon-', 'i-'];
+const ICON_FONT_CLASSES = [
+    'fa',
+    'fas',
+    'far',
+    'fal',
+    'fad',
+    'fab',
+    'glyphicon',
+    'material-icons',
+    'material-symbols-outlined',
+    'material-symbols-rounded',
+    'dashicons',
+    'bi',
+    'octicon',
+    'feather',
+    'fi',
+    'typcn',
+    'wi',
+    'zmdi',
+    'icofont',
+];
+
+/**
+ * Check if a single class name matches known icon font patterns.
+ * @param {string} cls - The class name to check
+ * @returns {boolean} True if the class matches an icon font pattern
+ */
+function matchesIconFontPattern(cls) {
+    if (ICON_FONT_CLASSES.includes(cls)) {
+        return true;
+    }
+    for (const prefix of ICON_FONT_CLASS_PREFIXES) {
+        if (cls.startsWith(prefix)) {
+            return true;
+        }
+    }
+    for (const iconClass of ICON_FONT_CLASSES) {
+        if (cls.startsWith(iconClass + '-')) {
+            return true;
+        }
+    }
+    return false;
+}
+
 const cssUtils = {
     /**
      * Check if an element's background is transparent/none.
@@ -29,12 +76,81 @@ const cssUtils = {
         return style.borderStyle === 'none' || parseFloat(style.borderWidth) === 0;
     },
 
+    /**
+     * Check if the element or any descendant has a class matching common icon font patterns.
+     * @param {HTMLElement} element - The element to check
+     * @returns {boolean} True if an icon font class is found
+     */
+    hasIconFontClass(element) {
+        if (!element) {
+            return false;
+        }
+
+        const elements = [element, ...element.querySelectorAll('*')];
+        for (const el of elements) {
+            if (el.classList) {
+                for (const cls of el.classList) {
+                    if (matchesIconFontPattern(cls)) {
+                        return true;
+                    }
+                }
+            }
+        }
+        return false;
+    },
+
+    /**
+     * Check if the element has any visual indicator beyond text styling,
+     * such as CSS-generated content, icon font classes, background images on children,
+     * or inline img/svg elements.
+     * @param {HTMLElement} element - The element to check
+     * @returns {boolean} True if the element has a visual indicator
+     */
+    hasVisualIndicator(element) {
+        if (!element) {
+            return false;
+        }
+
+        // Check for CSS-generated content on the element itself
+        if (hasCSSGeneratedContent(element)) {
+            return true;
+        }
+
+        // Check for icon font classes on element or descendants
+        if (cssUtils.hasIconFontClass(element)) {
+            return true;
+        }
+
+        // Check descendants for background-image, <img>, or <svg>
+        const descendants = element.querySelectorAll('*');
+        for (const child of descendants) {
+            const tagName = child.tagName ? child.tagName.toLowerCase() : '';
+            if (tagName === 'img' || tagName === 'svg') {
+                return true;
+            }
+            try {
+                const childStyle = window.getComputedStyle(child);
+                if (childStyle.backgroundImage && childStyle.backgroundImage !== 'none') {
+                    return true;
+                }
+            } catch {
+                // skip if getComputedStyle fails
+            }
+        }
+
+        return false;
+    },
+
     /**
      * Check if an element looks like regular text (no underline, background, or border).
      * @param {HTMLElement} element - The element to check
      * @returns {boolean} True if element looks like regular text
      */
     looksLikeText(element) {
+        if (cssUtils.hasVisualIndicator(element)) {
+            return false;
+        }
+
         const style = window.getComputedStyle(element);
 
         const noUnderline = !style.textDecoration.toLowerCase().includes('underline');

package/test/cssUtils.test.js

@@ -245,4 +245,256 @@ describe('cssUtils', () => {
             vi.restoreAllMocks();
         });
     });
+
+    describe('hasIconFontClass', () => {
+        it('should return false for element with no classes', () => {
+            const el = document.createElement('span');
+            document.body.appendChild(el);
+            expect(cssUtils.hasIconFontClass(el)).toBe(false);
+        });
+
+        it('should return true for element with "fa" class', () => {
+            const el = document.createElement('i');
+            el.className = 'fa';
+            document.body.appendChild(el);
+            expect(cssUtils.hasIconFontClass(el)).toBe(true);
+        });
+
+        it('should return true for element with "fa-circle" class (hyphenated prefix)', () => {
+            const el = document.createElement('i');
+            el.className = 'fa-circle';
+            document.body.appendChild(el);
+            expect(cssUtils.hasIconFontClass(el)).toBe(true);
+        });
+
+        it('should return true for child element with "material-icons" class', () => {
+            const el = document.createElement('button');
+            const child = document.createElement('span');
+            child.className = 'material-icons';
+            el.appendChild(child);
+            document.body.appendChild(el);
+            expect(cssUtils.hasIconFontClass(el)).toBe(true);
+        });
+
+        it('should return true for child with "icon-" prefixed class', () => {
+            const el = document.createElement('a');
+            const child = document.createElement('span');
+            child.className = 'icon-home';
+            el.appendChild(child);
+            document.body.appendChild(el);
+            expect(cssUtils.hasIconFontClass(el)).toBe(true);
+        });
+
+        it('should return false for element with unrelated class', () => {
+            const el = document.createElement('div');
+            el.className = 'container main-wrapper';
+            document.body.appendChild(el);
+            expect(cssUtils.hasIconFontClass(el)).toBe(false);
+        });
+    });
+
+    describe('hasVisualIndicator', () => {
+        it('should return false for plain text element', () => {
+            const el = document.createElement('span');
+            el.textContent = 'Click here';
+            document.body.appendChild(el);
+
+            vi.spyOn(window, 'getComputedStyle').mockImplementation(() => ({
+                getPropertyValue: () => 'none',
+            }));
+
+            expect(cssUtils.hasVisualIndicator(el)).toBe(false);
+            vi.restoreAllMocks();
+        });
+
+        it('should return true when element has CSS-generated content', () => {
+            const el = document.createElement('span');
+            document.body.appendChild(el);
+
+            vi.spyOn(window, 'getComputedStyle').mockImplementation((_el, pseudo) => {
+                if (pseudo === '::before') {
+                    return { getPropertyValue: () => '"\\f00c"' };
+                }
+                return { getPropertyValue: () => 'none' };
+            });
+
+            expect(cssUtils.hasVisualIndicator(el)).toBe(true);
+            vi.restoreAllMocks();
+        });
+
+        it('should return true when child has icon font class', () => {
+            const el = document.createElement('button');
+            const icon = document.createElement('i');
+            icon.className = 'fas fa-check';
+            el.appendChild(icon);
+            document.body.appendChild(el);
+
+            vi.spyOn(window, 'getComputedStyle').mockImplementation(() => ({
+                getPropertyValue: () => 'none',
+                backgroundImage: 'none',
+            }));
+
+            expect(cssUtils.hasVisualIndicator(el)).toBe(true);
+            vi.restoreAllMocks();
+        });
+
+        it('should return true when child has background-image', () => {
+            const el = document.createElement('a');
+            const child = document.createElement('span');
+            el.appendChild(child);
+            document.body.appendChild(el);
+
+            vi.spyOn(window, 'getComputedStyle').mockImplementation((_el, pseudo) => {
+                if (pseudo) {
+                    return { getPropertyValue: () => 'none' };
+                }
+                if (_el === child) {
+                    return {
+                        getPropertyValue: () => 'none',
+                        backgroundImage: 'url(icon.png)',
+                    };
+                }
+                return {
+                    getPropertyValue: () => 'none',
+                    backgroundImage: 'none',
+                };
+            });
+
+            expect(cssUtils.hasVisualIndicator(el)).toBe(true);
+            vi.restoreAllMocks();
+        });
+
+        it('should return true when child is an <img> element', () => {
+            const el = document.createElement('a');
+            const img = document.createElement('img');
+            img.src = 'icon.png';
+            el.appendChild(img);
+            document.body.appendChild(el);
+
+            vi.spyOn(window, 'getComputedStyle').mockImplementation(() => ({
+                getPropertyValue: () => 'none',
+                backgroundImage: 'none',
+            }));
+
+            expect(cssUtils.hasVisualIndicator(el)).toBe(true);
+            vi.restoreAllMocks();
+        });
+
+        it('should return true when child is an <svg> element', () => {
+            const el = document.createElement('button');
+            const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+            el.appendChild(svg);
+            document.body.appendChild(el);
+
+            vi.spyOn(window, 'getComputedStyle').mockImplementation(() => ({
+                getPropertyValue: () => 'none',
+                backgroundImage: 'none',
+            }));
+
+            expect(cssUtils.hasVisualIndicator(el)).toBe(true);
+            vi.restoreAllMocks();
+        });
+    });
+
+    describe('looksLikeText - visual indicator integration', () => {
+        it('should return false for element with Font Awesome icon child', () => {
+            const el = document.createElement('a');
+            const icon = document.createElement('i');
+            icon.className = 'fas fa-arrow-right';
+            el.appendChild(icon);
+            el.appendChild(document.createTextNode(' Next'));
+            document.body.appendChild(el);
+
+            vi.spyOn(window, 'getComputedStyle').mockImplementation((_el, pseudo) => {
+                if (pseudo) {
+                    return { getPropertyValue: () => 'none' };
+                }
+                return {
+                    textDecoration: 'none',
+                    backgroundColor: 'rgba(0, 0, 0, 0)',
+                    backgroundImage: 'none',
+                    borderStyle: 'none',
+                    borderWidth: '0px',
+                    getPropertyValue: () => 'none',
+                };
+            });
+
+            expect(cssUtils.looksLikeText(el)).toBe(false);
+            vi.restoreAllMocks();
+        });
+
+        it('should return false for element with CSS pseudo-element content', () => {
+            const el = document.createElement('a');
+            el.textContent = 'Submit';
+            document.body.appendChild(el);
+
+            vi.spyOn(window, 'getComputedStyle').mockImplementation((_el, pseudo) => {
+                if (pseudo === '::before') {
+                    return { getPropertyValue: () => '"\\f00c"' };
+                }
+                if (pseudo === '::after') {
+                    return { getPropertyValue: () => 'none' };
+                }
+                return {
+                    textDecoration: 'none',
+                    backgroundColor: 'rgba(0, 0, 0, 0)',
+                    backgroundImage: 'none',
+                    borderStyle: 'none',
+                    borderWidth: '0px',
+                    getPropertyValue: () => 'none',
+                };
+            });
+
+            expect(cssUtils.looksLikeText(el)).toBe(false);
+            vi.restoreAllMocks();
+        });
+
+        it('should return false for element with inline <svg> icon child', () => {
+            const el = document.createElement('button');
+            const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+            el.appendChild(svg);
+            el.appendChild(document.createTextNode('Save'));
+            document.body.appendChild(el);
+
+            vi.spyOn(window, 'getComputedStyle').mockImplementation((_el, pseudo) => {
+                if (pseudo) {
+                    return { getPropertyValue: () => 'none' };
+                }
+                return {
+                    textDecoration: 'none',
+                    backgroundColor: 'rgba(0, 0, 0, 0)',
+                    backgroundImage: 'none',
+                    borderStyle: 'none',
+                    borderWidth: '0px',
+                    getPropertyValue: () => 'none',
+                };
+            });
+
+            expect(cssUtils.looksLikeText(el)).toBe(false);
+            vi.restoreAllMocks();
+        });
+
+        it('should still return true for plain text element with no visual indicators', () => {
+            const el = document.createElement('span');
+            el.textContent = 'Just text';
+            document.body.appendChild(el);
+
+            vi.spyOn(window, 'getComputedStyle').mockImplementation((_el, pseudo) => {
+                if (pseudo) {
+                    return { getPropertyValue: () => 'none' };
+                }
+                return {
+                    textDecoration: 'none',
+                    backgroundColor: 'rgba(0, 0, 0, 0)',
+                    backgroundImage: 'none',
+                    borderStyle: 'none',
+                    borderWidth: '0px',
+                    getPropertyValue: () => 'none',
+                };
+            });
+
+            expect(cssUtils.looksLikeText(el)).toBe(true);
+            vi.restoreAllMocks();
+        });
+    });
 });