@afixt/test-utils 2.3.0 → 2.5.0

package/src/getAccessibleText.js

@@ -73,12 +73,28 @@ function collectSubtreeText(node, visibleOnly) {
 
             // In visibleOnly mode, skip non-rendered content
             if (visibleOnly) {
-                if (tag === 'style' || tag === 'script') {
+                if (tag === 'style' || tag === 'script' || tag === 'noscript') {
                     continue;
                 }
                 if (child.getAttribute('aria-hidden') === 'true') {
                     continue;
                 }
+                if (child.hasAttribute('hidden')) {
+                    continue;
+                }
+                // Stop at nested widget containers — their content is not
+                // part of the parent element's visible label
+                const childRole = child.getAttribute('role');
+                if (
+                    childRole === 'menu' ||
+                    childRole === 'menubar' ||
+                    childRole === 'listbox' ||
+                    childRole === 'tree' ||
+                    childRole === 'grid' ||
+                    childRole === 'tablist'
+                ) {
+                    continue;
+                }
             }
 
             if (!visibleOnly) {
@@ -103,6 +119,15 @@ function collectSubtreeText(node, visibleOnly) {
                     }
                     continue;
                 }
+
+                // Elements with role="img" contribute their aria-label
+                if (child.getAttribute('role') === 'img' && child.hasAttribute('aria-label')) {
+                    const ariaLabel = child.getAttribute('aria-label').trim();
+                    if (ariaLabel) {
+                        parts.push(ariaLabel);
+                    }
+                    continue;
+                }
             }
 
             // Recurse into other element children

package/src/index.js

@@ -45,6 +45,7 @@ const hasAttribute = require('./hasAttribute.js');
 // Focus management
 const getFocusableElements = require('./getFocusableElements.js');
 const isFocusable = require('./isFocusable.js');
+const detectFocusTrap = require('./detectFocusTrap.js');
 
 // Role computation
 const getComputedRole = require('./getComputedRole.js');
@@ -114,6 +115,7 @@ module.exports = {
     ...hasAttribute,
     ...getFocusableElements,
     ...isFocusable,
+    ...detectFocusTrap,
     ...getComputedRole,
     getImageText,
     ...testContrast,

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();
+        });
+    });
 });