@afixt/test-utils 2.4.0 → 2.6.0

package/test/getAccessibleText.test.js

@@ -300,6 +300,32 @@ describe('getAccessibleText', () => {
         });
     });
 
+    describe('child role="img" with aria-label in subtree', () => {
+        it('should get aria-label from child elements with role="img"', () => {
+            const container = document.createElement('div');
+            container.innerHTML = '<div role="img" aria-label="Company Logo"></div>';
+            document.body.appendChild(container);
+
+            expect(getAccessibleText(container)).toBe('Company Logo');
+        });
+
+        it('should skip role="img" elements with empty aria-label', () => {
+            const container = document.createElement('div');
+            container.innerHTML = 'Label <div role="img" aria-label=""></div>';
+            document.body.appendChild(container);
+
+            expect(getAccessibleText(container)).toBe('Label');
+        });
+
+        it('should skip role="img" elements without aria-label', () => {
+            const container = document.createElement('div');
+            container.innerHTML = 'Label <div role="img"></div>';
+            document.body.appendChild(container);
+
+            expect(getAccessibleText(container)).toBe('Label');
+        });
+    });
+
     describe('visibleOnly option', () => {
         it('should skip aria-label when visibleOnly is true', () => {
             const div = document.createElement('div');
@@ -522,4 +548,52 @@ describe('getAccessibleText', () => {
             expect(result).toBe('Valid Text');
         });
     });
+
+    describe('shadow DOM traversal', () => {
+        it('should extract text from inside an open shadow root', () => {
+            const host = document.createElement('div');
+            document.body.appendChild(host);
+            const shadow = host.attachShadow({ mode: 'open' });
+            const inner = document.createElement('span');
+            inner.textContent = 'Shadow text';
+            shadow.appendChild(inner);
+
+            expect(getAccessibleText(host)).toBe('Shadow text');
+        });
+
+        it('should extract text from nested shadow roots', () => {
+            const host1 = document.createElement('div');
+            document.body.appendChild(host1);
+            const shadow1 = host1.attachShadow({ mode: 'open' });
+
+            const host2 = document.createElement('div');
+            shadow1.appendChild(host2);
+            const shadow2 = host2.attachShadow({ mode: 'open' });
+
+            const inner = document.createElement('span');
+            inner.textContent = 'Deeply nested text';
+            shadow2.appendChild(inner);
+
+            expect(getAccessibleText(host1)).toBe('Deeply nested text');
+        });
+
+        it('should prefer aria-label over shadow DOM text', () => {
+            const host = document.createElement('div');
+            host.setAttribute('aria-label', 'Accessible Label');
+            document.body.appendChild(host);
+            const shadow = host.attachShadow({ mode: 'open' });
+            const inner = document.createElement('span');
+            inner.textContent = 'Shadow text';
+            shadow.appendChild(inner);
+
+            expect(getAccessibleText(host)).toBe('Accessible Label');
+        });
+
+        it('should return empty string for custom element with no content and no shadow root', () => {
+            const el = document.createElement('my-widget');
+            document.body.appendChild(el);
+
+            expect(getAccessibleText(el)).toBe('');
+        });
+    });
 });

package/test/hasValidAriaRole.test.js

@@ -2,159 +2,278 @@ import { describe, it, expect, beforeEach } from 'vitest';
 import { hasValidAriaRole } from '../src/hasValidAriaRole.js';
 
 describe('hasValidAriaRole', () => {
-  beforeEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  it('should return true for an element with a valid ARIA role', () => {
-    // Arrange
-    const element = document.createElement('div');
-    element.setAttribute('role', 'button');
-    document.body.appendChild(element);
-    
-    // Act
-    const result = hasValidAriaRole(element);
-    
-    // Assert
-    expect(result).toBe(true);
-  });
-
-  it('should return false for an element with an invalid ARIA role', () => {
-    // Arrange
-    const element = document.createElement('div');
-    element.setAttribute('role', 'invalid-role');
-    document.body.appendChild(element);
-    
-    // Act
-    const result = hasValidAriaRole(element);
-    
-    // Assert
-    expect(result).toBe(false);
-  });
-
-  it('should return false for an element without a role attribute', () => {
-    // Arrange
-    const element = document.createElement('div');
-    document.body.appendChild(element);
-    
-    // Act
-    const result = hasValidAriaRole(element);
-    
-    // Assert
-    expect(result).toBe(false);
-  });
-
-  it('should return false for null or non-element input', () => {
-    // Act & Assert
-    expect(hasValidAriaRole(null)).toBe(false);
-    expect(hasValidAriaRole(undefined)).toBe(false);
-    expect(hasValidAriaRole({})).toBe(false);
-    expect(hasValidAriaRole('')).toBe(false);
-  });
-
-  it('should correctly handle elements with multiple roles (should use the first one)', () => {
-    // Arrange
-    const validMultipleRoles = document.createElement('div');
-    validMultipleRoles.setAttribute('role', 'button presentation');
-    
-    const invalidMultipleRoles = document.createElement('div');
-    invalidMultipleRoles.setAttribute('role', 'invalid-role button');
-    
-    document.body.appendChild(validMultipleRoles);
-    document.body.appendChild(invalidMultipleRoles);
-    
-    // Act & Assert
-    expect(hasValidAriaRole(validMultipleRoles)).toBe(true);
-    expect(hasValidAriaRole(invalidMultipleRoles)).toBe(false);
-  });
-
-  it('should handle roles with extra whitespace', () => {
-    // Arrange
-    const element = document.createElement('div');
-    element.setAttribute('role', '  button  ');
-    document.body.appendChild(element);
-    
-    // Act
-    const result = hasValidAriaRole(element);
-    
-    // Assert
-    expect(result).toBe(true);
-  });
-
-  it('should recognize various valid roles', () => {
-    // Test a sample of different valid roles
-    const validRoles = ['alert', 'button', 'checkbox', 'dialog', 'navigation', 'main', 'region'];
-
-    validRoles.forEach(role => {
-      // Arrange
-      const element = document.createElement('div');
-      element.setAttribute('role', role);
-      document.body.appendChild(element);
-
-      // Act & Assert
-      expect(hasValidAriaRole(element)).toBe(true);
+    beforeEach(() => {
+        document.body.innerHTML = '';
     });
-  });
-
-  it('should recognize all widget roles', () => {
-    const widgetRoles = [
-      'alertdialog', 'gridcell', 'link', 'log', 'marquee', 'menuitem',
-      'menuitemcheckbox', 'menuitemradio', 'option', 'progressbar', 'radio',
-      'scrollbar', 'searchbox', 'slider', 'spinbutton', 'status', 'switch',
-      'tab', 'tabpanel', 'textbox', 'tooltip', 'treeitem'
-    ];
-
-    widgetRoles.forEach(role => {
-      const element = document.createElement('div');
-      element.setAttribute('role', role);
-      expect(hasValidAriaRole(element)).toBe(true);
+
+    it('should return true for an element with a valid ARIA role', () => {
+        // Arrange
+        const element = document.createElement('div');
+        element.setAttribute('role', 'button');
+        document.body.appendChild(element);
+
+        // Act
+        const result = hasValidAriaRole(element);
+
+        // Assert
+        expect(result).toBe(true);
+    });
+
+    it('should return false for an element with an invalid ARIA role', () => {
+        // Arrange
+        const element = document.createElement('div');
+        element.setAttribute('role', 'invalid-role');
+        document.body.appendChild(element);
+
+        // Act
+        const result = hasValidAriaRole(element);
+
+        // Assert
+        expect(result).toBe(false);
+    });
+
+    it('should return false for an element without a role attribute', () => {
+        // Arrange
+        const element = document.createElement('div');
+        document.body.appendChild(element);
+
+        // Act
+        const result = hasValidAriaRole(element);
+
+        // Assert
+        expect(result).toBe(false);
     });
-  });
-
-  it('should recognize all composite widget roles', () => {
-    const compositeRoles = [
-      'combobox', 'grid', 'listbox', 'menu', 'menubar', 'radiogroup',
-      'tablist', 'tree', 'treegrid'
-    ];
-
-    compositeRoles.forEach(role => {
-      const element = document.createElement('div');
-      element.setAttribute('role', role);
-      expect(hasValidAriaRole(element)).toBe(true);
+
+    it('should return false for null or non-element input', () => {
+        // Act & Assert
+        expect(hasValidAriaRole(null)).toBe(false);
+        expect(hasValidAriaRole(undefined)).toBe(false);
+        expect(hasValidAriaRole({})).toBe(false);
+        expect(hasValidAriaRole('')).toBe(false);
     });
-  });
-
-  it('should recognize all document structure roles', () => {
-    const structureRoles = [
-      'article', 'cell', 'columnheader', 'definition', 'directory', 'document',
-      'feed', 'figure', 'group', 'heading', 'img', 'list', 'listitem', 'math',
-      'none', 'note', 'presentation', 'row', 'rowgroup', 'rowheader',
-      'separator', 'table', 'term', 'toolbar'
-    ];
-
-    structureRoles.forEach(role => {
-      const element = document.createElement('div');
-      element.setAttribute('role', role);
-      expect(hasValidAriaRole(element)).toBe(true);
+
+    it('should correctly handle elements with multiple roles (should use the first one)', () => {
+        // Arrange
+        const validMultipleRoles = document.createElement('div');
+        validMultipleRoles.setAttribute('role', 'button presentation');
+
+        const invalidMultipleRoles = document.createElement('div');
+        invalidMultipleRoles.setAttribute('role', 'invalid-role button');
+
+        document.body.appendChild(validMultipleRoles);
+        document.body.appendChild(invalidMultipleRoles);
+
+        // Act & Assert
+        expect(hasValidAriaRole(validMultipleRoles)).toBe(true);
+        expect(hasValidAriaRole(invalidMultipleRoles)).toBe(false);
     });
-  });
-
-  it('should recognize all landmark roles', () => {
-    const landmarkRoles = [
-      'application', 'banner', 'complementary', 'contentinfo', 'form',
-      'search'
-    ];
-
-    landmarkRoles.forEach(role => {
-      const element = document.createElement('div');
-      element.setAttribute('role', role);
-      expect(hasValidAriaRole(element)).toBe(true);
+
+    it('should handle roles with extra whitespace', () => {
+        // Arrange
+        const element = document.createElement('div');
+        element.setAttribute('role', '  button  ');
+        document.body.appendChild(element);
+
+        // Act
+        const result = hasValidAriaRole(element);
+
+        // Assert
+        expect(result).toBe(true);
+    });
+
+    it('should recognize various valid roles', () => {
+        // Test a sample of different valid roles
+        const validRoles = [
+            'alert',
+            'button',
+            'checkbox',
+            'dialog',
+            'navigation',
+            'main',
+            'region',
+        ];
+
+        validRoles.forEach(role => {
+            // Arrange
+            const element = document.createElement('div');
+            element.setAttribute('role', role);
+            document.body.appendChild(element);
+
+            // Act & Assert
+            expect(hasValidAriaRole(element)).toBe(true);
+        });
+    });
+
+    it('should recognize all widget roles', () => {
+        const widgetRoles = [
+            'alertdialog',
+            'gridcell',
+            'link',
+            'log',
+            'marquee',
+            'menuitem',
+            'menuitemcheckbox',
+            'menuitemradio',
+            'option',
+            'progressbar',
+            'radio',
+            'scrollbar',
+            'searchbox',
+            'slider',
+            'spinbutton',
+            'status',
+            'switch',
+            'tab',
+            'tabpanel',
+            'textbox',
+            'tooltip',
+            'treeitem',
+        ];
+
+        widgetRoles.forEach(role => {
+            const element = document.createElement('div');
+            element.setAttribute('role', role);
+            expect(hasValidAriaRole(element)).toBe(true);
+        });
+    });
+
+    it('should recognize all composite widget roles', () => {
+        const compositeRoles = [
+            'combobox',
+            'grid',
+            'listbox',
+            'menu',
+            'menubar',
+            'radiogroup',
+            'tablist',
+            'tree',
+            'treegrid',
+        ];
+
+        compositeRoles.forEach(role => {
+            const element = document.createElement('div');
+            element.setAttribute('role', role);
+            expect(hasValidAriaRole(element)).toBe(true);
+        });
+    });
+
+    it('should recognize all document structure roles', () => {
+        const structureRoles = [
+            'article',
+            'cell',
+            'columnheader',
+            'definition',
+            'directory',
+            'document',
+            'feed',
+            'figure',
+            'group',
+            'heading',
+            'img',
+            'list',
+            'listitem',
+            'math',
+            'none',
+            'note',
+            'presentation',
+            'row',
+            'rowgroup',
+            'rowheader',
+            'separator',
+            'table',
+            'term',
+            'toolbar',
+        ];
+
+        structureRoles.forEach(role => {
+            const element = document.createElement('div');
+            element.setAttribute('role', role);
+            expect(hasValidAriaRole(element)).toBe(true);
+        });
+    });
+
+    it('should recognize all landmark roles', () => {
+        const landmarkRoles = [
+            'application',
+            'banner',
+            'complementary',
+            'contentinfo',
+            'form',
+            'search',
+        ];
+
+        landmarkRoles.forEach(role => {
+            const element = document.createElement('div');
+            element.setAttribute('role', role);
+            expect(hasValidAriaRole(element)).toBe(true);
+        });
+    });
+
+    it('should recognize timer role', () => {
+        const element = document.createElement('div');
+        element.setAttribute('role', 'timer');
+        expect(hasValidAriaRole(element)).toBe(true);
+    });
+
+    it('should recognize WAI-ARIA Graphics Module roles', () => {
+        const graphicsRoles = ['graphics-document', 'graphics-object', 'graphics-symbol'];
+
+        graphicsRoles.forEach(role => {
+            const element = document.createElement('svg');
+            element.setAttribute('role', role);
+            expect(hasValidAriaRole(element)).toBe(true);
+        });
+    });
+
+    it('should recognize DPub-ARIA roles', () => {
+        const dpubRoles = [
+            'doc-abstract',
+            'doc-acknowledgments',
+            'doc-afterword',
+            'doc-appendix',
+            'doc-backlink',
+            'doc-biblioentry',
+            'doc-bibliography',
+            'doc-biblioref',
+            'doc-chapter',
+            'doc-colophon',
+            'doc-conclusion',
+            'doc-cover',
+            'doc-credit',
+            'doc-credits',
+            'doc-dedication',
+            'doc-endnote',
+            'doc-endnotes',
+            'doc-epigraph',
+            'doc-epilogue',
+            'doc-errata',
+            'doc-example',
+            'doc-footnote',
+            'doc-foreword',
+            'doc-glossary',
+            'doc-glossref',
+            'doc-index',
+            'doc-introduction',
+            'doc-noteref',
+            'doc-notice',
+            'doc-pagebreak',
+            'doc-pagefooter',
+            'doc-pageheader',
+            'doc-pagelist',
+            'doc-part',
+            'doc-preface',
+            'doc-prologue',
+            'doc-pullquote',
+            'doc-qna',
+            'doc-subtitle',
+            'doc-tip',
+            'doc-toc',
+        ];
+
+        dpubRoles.forEach(role => {
+            const element = document.createElement('div');
+            element.setAttribute('role', role);
+            expect(hasValidAriaRole(element)).toBe(true);
+        });
     });
-  });
-
-  it('should recognize timer role', () => {
-    const element = document.createElement('div');
-    element.setAttribute('role', 'timer');
-    expect(hasValidAriaRole(element)).toBe(true);
-  });
-});
+});

package/test/index.test.js

@@ -73,6 +73,7 @@ describe('index.js exports', () => {
     it('should export focus management utilities', () => {
         expect(utils.getFocusableElements).toBeDefined();
         expect(utils.isFocusable).toBeDefined();
+        expect(utils.detectFocusTrap).toBeDefined();
     });
 
     it('should export role computation utilities', () => {
@@ -145,6 +146,7 @@ describe('index.js exports', () => {
             'isA11yVisible',
             'hasParent',
             'getFocusableElements',
+            'detectFocusTrap',
             'getComputedRole',
             'getImageText',
             'testContrast',
@@ -183,6 +185,7 @@ describe('index.js exports', () => {
             'hasAttribute',
             'getFocusableElements',
             'isFocusable',
+            'detectFocusTrap',
             'getComputedRole',
             'getImageText',
             'testContrast',

package/test/shadowDomUtils.test.js

@@ -3,6 +3,8 @@ import {
     deepGetElementById,
     deepQuerySelector,
     deepQuerySelectorAll,
+    getDeepTextContent,
+    hasCustomElementDescendant,
 } from '../src/shadowDomUtils.js';
 
 describe('shadowDomUtils', () => {
@@ -245,4 +247,100 @@ describe('shadowDomUtils', () => {
             expect(results).toHaveLength(0);
         });
     });
+
+    // =========================================================================
+    // getDeepTextContent
+    // =========================================================================
+    describe('getDeepTextContent', () => {
+        it('should return empty string for null', () => {
+            expect(getDeepTextContent(null)).toBe('');
+        });
+
+        it('should return text from light DOM', () => {
+            document.body.innerHTML = '<div>Hello world</div>';
+            const el = document.querySelector('div');
+            expect(getDeepTextContent(el)).toBe('Hello world');
+        });
+
+        it('should return text from inside an open shadow root', () => {
+            const host = document.createElement('div');
+            document.body.appendChild(host);
+            const shadow = host.attachShadow({ mode: 'open' });
+            const inner = document.createElement('span');
+            inner.textContent = 'Shadow content';
+            shadow.appendChild(inner);
+
+            expect(getDeepTextContent(host)).toBe('Shadow content');
+        });
+
+        it('should return text from nested shadow roots', () => {
+            const host1 = document.createElement('div');
+            document.body.appendChild(host1);
+            const shadow1 = host1.attachShadow({ mode: 'open' });
+
+            const host2 = document.createElement('div');
+            shadow1.appendChild(host2);
+            const shadow2 = host2.attachShadow({ mode: 'open' });
+
+            const inner = document.createElement('span');
+            inner.textContent = 'Deeply nested';
+            shadow2.appendChild(inner);
+
+            expect(getDeepTextContent(host1)).toBe('Deeply nested');
+        });
+
+        it('should return empty string for element with no text', () => {
+            document.body.innerHTML = '<div><img src="test.png"></div>';
+            const el = document.querySelector('div');
+            expect(getDeepTextContent(el)).toBe('');
+        });
+
+        it('should combine text from shadow and light DOM', () => {
+            const host = document.createElement('div');
+            host.textContent = 'Light text';
+            document.body.appendChild(host);
+            const shadow = host.attachShadow({ mode: 'open' });
+            const inner = document.createElement('span');
+            inner.textContent = 'Shadow text';
+            shadow.appendChild(inner);
+
+            const result = getDeepTextContent(host);
+            expect(result).toContain('Shadow text');
+            expect(result).toContain('Light text');
+        });
+    });
+
+    // =========================================================================
+    // hasCustomElementDescendant
+    // =========================================================================
+    describe('hasCustomElementDescendant', () => {
+        it('should return false for null', () => {
+            expect(hasCustomElementDescendant(null)).toBe(false);
+        });
+
+        it('should return false for element with no custom elements', () => {
+            document.body.innerHTML = '<div><span>Text</span></div>';
+            const el = document.querySelector('div');
+            expect(hasCustomElementDescendant(el)).toBe(false);
+        });
+
+        it('should return true when the element itself is a custom element', () => {
+            const el = document.createElement('my-component');
+            document.body.appendChild(el);
+            expect(hasCustomElementDescendant(el)).toBe(true);
+        });
+
+        it('should return true when a descendant is a custom element', () => {
+            document.body.innerHTML = '<div><store-selector-addon></store-selector-addon></div>';
+            const el = document.querySelector('div');
+            expect(hasCustomElementDescendant(el)).toBe(true);
+        });
+
+        it('should return false for elements with hyphens in attributes but not tag names', () => {
+            document.body.innerHTML =
+                '<div data-my-attr="value"><span class="my-class">Text</span></div>';
+            const el = document.querySelector('div');
+            expect(hasCustomElementDescendant(el)).toBe(false);
+        });
+    });
 });