@afixt/test-utils 2.1.1 → 2.3.0

package/test/domUtils.test.js

@@ -552,6 +552,26 @@ describe('domUtils', () => {
             const child = document.getElementById('child');
             expect(domUtils.isHiddenFromAT(child)).toBe(false);
         });
+
+        it('should return true when element has inert attribute', () => {
+            document.body.innerHTML = '<div inert><span id="child">Inert child</span></div>';
+            const child = document.getElementById('child');
+            expect(domUtils.isHiddenFromAT(child)).toBe(true);
+        });
+
+        it('should return true when element itself is inert', () => {
+            const el = document.createElement('div');
+            el.setAttribute('inert', '');
+            document.body.appendChild(el);
+            expect(domUtils.isHiddenFromAT(el)).toBe(true);
+        });
+
+        it('should return true when element has content-visibility hidden', () => {
+            document.body.innerHTML = '<div id="target">Content</div>';
+            const el = document.getElementById('target');
+            el.style.contentVisibility = 'hidden';
+            expect(domUtils.isHiddenFromAT(el)).toBe(true);
+        });
     });
 
     describe('isEffectivelyInteractive', () => {
@@ -1059,4 +1079,36 @@ describe('domUtils', () => {
             expect(domUtils.getHeadingLevel(el)).toBeNull();
         });
     });
+
+    describe('shadow DOM integration', () => {
+        it('isIdReferenced should find label[for] inside a shadow root', () => {
+            const host = document.createElement('div');
+            document.body.appendChild(host);
+            const shadow = host.attachShadow({ mode: 'open' });
+            const label = document.createElement('label');
+            label.setAttribute('for', 'shadow-ref-target');
+            shadow.appendChild(label);
+
+            expect(domUtils.isIdReferenced('shadow-ref-target')).toBe(true);
+        });
+
+        it('getElementsWithDuplicateIds should detect duplicate IDs across shadow roots', () => {
+            // Light DOM element with id="dup"
+            const div1 = document.createElement('div');
+            div1.id = 'dup';
+            document.body.appendChild(div1);
+
+            // Shadow DOM element with same id="dup"
+            const host = document.createElement('div');
+            document.body.appendChild(host);
+            const shadow = host.attachShadow({ mode: 'open' });
+            const div2 = document.createElement('div');
+            div2.id = 'dup';
+            shadow.appendChild(div2);
+
+            const duplicates = domUtils.getElementsWithDuplicateIds();
+            expect(duplicates.length).toBe(1);
+            expect(duplicates[0].id).toBe('dup');
+        });
+    });
 });

package/test/formUtils.test.js

@@ -120,6 +120,24 @@ describe('formUtils', () => {
             expect(formUtils.hasExplicitAccessibleName(el)).toBe(false);
         });
 
+        it('should return true when aria-labelledby points to sr-only element', () => {
+            document.body.innerHTML = `
+                <span id="lbl" style="position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)">SR-only Label</span>
+                <div id="target" aria-labelledby="lbl"></div>
+            `;
+            const target = document.getElementById('target');
+            expect(formUtils.hasExplicitAccessibleName(target)).toBe(true);
+        });
+
+        it('should return false when aria-labelledby points to aria-hidden="true" element', () => {
+            document.body.innerHTML = `
+                <span id="lbl" aria-hidden="true">Hidden Label</span>
+                <div id="target" aria-labelledby="lbl"></div>
+            `;
+            const target = document.getElementById('target');
+            expect(formUtils.hasExplicitAccessibleName(target)).toBe(false);
+        });
+
         it('should handle multiple ids in aria-labelledby', () => {
             document.body.innerHTML = `
                 <span id="lbl1"></span>
@@ -339,4 +357,25 @@ describe('formUtils', () => {
             expect(text.trim()).toBe('');
         });
     });
+
+    describe('shadow DOM integration', () => {
+        it('hasExplicitAccessibleName should find aria-labelledby target inside shadow root', () => {
+            // Create shadow host with label element inside
+            const host = document.createElement('div');
+            document.body.appendChild(host);
+            const shadow = host.attachShadow({ mode: 'open' });
+            const labelEl = document.createElement('span');
+            labelEl.id = 'shadow-group-label';
+            labelEl.textContent = 'Group Name';
+            shadow.appendChild(labelEl);
+
+            // Create an element in light DOM referencing the shadow label
+            const group = document.createElement('div');
+            group.setAttribute('role', 'radiogroup');
+            group.setAttribute('aria-labelledby', 'shadow-group-label');
+            document.body.appendChild(group);
+
+            expect(formUtils.hasExplicitAccessibleName(group)).toBe(true);
+        });
+    });
 });

package/test/getAccessibleName.test.js

@@ -467,4 +467,87 @@ describe('getAccessibleName', () => {
             });
         });
     });
+
+    describe('whitespace-only accessible name handling', () => {
+        it('should ignore aria-label with only non-breaking spaces and use text content instead', () => {
+            document.body.innerHTML = '<button aria-label="\u00A0\u00A0">Click</button>';
+            const button = document.querySelector('button');
+            // NBSP-only aria-label is treated as empty; falls through to text content
+            expect(getAccessibleName(button)).toBe('Click');
+        });
+
+        it('should ignore aria-label with only zero-width spaces and use text content instead', () => {
+            document.body.innerHTML = '<button aria-label="\u200B\u200B">Click</button>';
+            const button = document.querySelector('button');
+            expect(getAccessibleName(button)).toBe('Click');
+        });
+
+        it('should return false when aria-label is NBSP-only and element has no other name source', () => {
+            document.body.innerHTML = '<div role="button" aria-label="\u00A0"></div>';
+            const div = document.querySelector('[role="button"]');
+            expect(getAccessibleName(div)).toBe(false);
+        });
+    });
+
+    describe('visibility handling for aria-labelledby referenced elements', () => {
+        it('should return accessible name for display:none element referenced by aria-labelledby', () => {
+            document.body.innerHTML = `
+                <li style="display:none">
+                    <button id="expand-btn">Expand subnavigation</button>
+                </li>
+                <ul aria-labelledby="expand-btn">Items</ul>
+            `;
+            const button = document.getElementById('expand-btn');
+            expect(getAccessibleName(button)).toBe('Expand subnavigation');
+        });
+
+        it('should return false for truly hidden element not referenced by aria-labelledby', () => {
+            document.body.innerHTML = `
+                <div aria-hidden="true">
+                    <button id="hidden-btn">Hidden button</button>
+                </div>
+            `;
+            const button = document.getElementById('hidden-btn');
+            expect(getAccessibleName(button)).toBe(false);
+        });
+    });
+
+    describe('shadow DOM integration', () => {
+        it('should resolve aria-labelledby referencing an element inside a shadow root', () => {
+            // Create a shadow host with the label inside
+            const host = document.createElement('div');
+            document.body.appendChild(host);
+            const shadow = host.attachShadow({ mode: 'open' });
+            const labelSpan = document.createElement('span');
+            labelSpan.id = 'shadow-label';
+            labelSpan.textContent = 'Shadow Label';
+            shadow.appendChild(labelSpan);
+
+            // Create the button in light DOM that references the shadow label
+            const button = document.createElement('button');
+            button.setAttribute('aria-labelledby', 'shadow-label');
+            document.body.appendChild(button);
+
+            expect(getAccessibleName(button)).toBe('Shadow Label');
+        });
+
+        it('should resolve label[for] inside a shadow root for text inputs', () => {
+            // Create a shadow host with the label inside
+            const host = document.createElement('div');
+            document.body.appendChild(host);
+            const shadow = host.attachShadow({ mode: 'open' });
+            const label = document.createElement('label');
+            label.setAttribute('for', 'shadow-input');
+            label.textContent = 'Shadow Input Label';
+            shadow.appendChild(label);
+
+            // Create the input in light DOM
+            const input = document.createElement('input');
+            input.type = 'text';
+            input.id = 'shadow-input';
+            document.body.appendChild(input);
+
+            expect(getAccessibleName(input)).toBe('Shadow Input Label');
+        });
+    });
 });

package/test/getComputedRole.test.js

@@ -2,179 +2,251 @@ import { describe, it, expect, beforeEach } from 'vitest';
 import { getComputedRole, roleMapping } from '../src/getComputedRole.js';
 
 describe('getComputedRole', () => {
-  beforeEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  it('should return undefined for null or undefined element', () => {
-    expect(getComputedRole(null)).toBeUndefined();
-    expect(getComputedRole(undefined)).toBeUndefined();
-  });
-
-  it('should return the role attribute value if present', () => {
-    // Arrange
-    const element = document.createElement('div');
-    element.setAttribute('role', 'button');
-    document.body.appendChild(element);
-    
-    // Act
-    const result = getComputedRole(element);
-    
-    // Assert
-    expect(result).toBe('button');
-  });
-
-  it('should return the correct role for basic elements with simple string mapping', () => {
-    // Test cases for elements with simple string mapping
-    const testCases = [
-      { tag: 'div', expectedRole: 'group' },
-      { tag: 'p', expectedRole: 'text' },
-      { tag: 'ul', expectedRole: 'list' },
-      { tag: 'h1', expectedRole: 'heading' },
-      { tag: 'button', expectedRole: 'button' },
-      { tag: 'nav', expectedRole: 'navigation' },
-      { tag: 'header', expectedRole: 'banner' },
-      { tag: 'footer', expectedRole: 'contentinfo' },
-      { tag: 'main', expectedRole: 'main' }
-    ];
-    
-    testCases.forEach(({ tag, expectedRole }) => {
-      // Arrange
-      const element = document.createElement(tag);
-      document.body.appendChild(element);
-      
-      // Act
-      const result = getComputedRole(element);
-      
-      // Assert
-      expect(result).toBe(expectedRole);
-    });
-  });
-
-  it('should handle link elements (a) correctly based on href attribute', () => {
-    // Arrange
-    const linkWithHref = document.createElement('a');
-    linkWithHref.setAttribute('href', 'https://example.com');
-    
-    const linkWithoutHref = document.createElement('a');
-    
-    document.body.appendChild(linkWithHref);
-    document.body.appendChild(linkWithoutHref);
-    
-    // Act
-    const withHrefResult = getComputedRole(linkWithHref);
-    const withoutHrefResult = getComputedRole(linkWithoutHref);
-    
-    // Assert
-    expect(withHrefResult).toBe('link');
-    expect(withoutHrefResult).toBe('text');
-  });
-
-  it('should handle image elements based on alt attribute', () => {
-    // Arrange
-    const imgWithAlt = document.createElement('img');
-    imgWithAlt.setAttribute('alt', 'Description of image');
-    
-    const imgWithEmptyAlt = document.createElement('img');
-    imgWithEmptyAlt.setAttribute('alt', '');
-    
-    document.body.appendChild(imgWithAlt);
-    document.body.appendChild(imgWithEmptyAlt);
-    
-    // Act
-    const withAltResult = getComputedRole(imgWithAlt);
-    const withEmptyAltResult = getComputedRole(imgWithEmptyAlt);
-    
-    // Assert
-    expect(withAltResult).toBe('image');
-    expect(withEmptyAltResult).toBe('presentation');
-  });
-
-  it('should handle various input types correctly', () => {
-    const inputTypes = [
-      { type: 'button', expectedRole: 'button' },
-      { type: 'checkbox', expectedRole: 'checkbox' },
-      { type: 'hidden', expectedRole: 'noRole' },
-      { type: 'image', expectedRole: 'button' },
-      { type: 'number', expectedRole: 'spinbutton' },
-      { type: 'radio', expectedRole: 'radio' },
-      { type: 'range', expectedRole: 'slider' },
-      { type: 'reset', expectedRole: 'button' },
-      { type: 'submit', expectedRole: 'button' },
-      { type: 'password', expectedRole: 'textbox' },
-      { type: 'text', expectedRole: 'textbox' },
-      { type: 'search', expectedRole: 'searchbox' }
-    ];
-    
-    inputTypes.forEach(({ type, expectedRole }) => {
-      // Arrange
-      const input = document.createElement('input');
-      input.setAttribute('type', type);
-      document.body.appendChild(input);
-      
-      // Act
-      const result = getComputedRole(input);
-      
-      // Assert
-      expect(result).toBe(expectedRole);
-    });
-  });
-
-  it('should handle elements with no role mapping', () => {
-    // Create a custom element that's not in the roleMapping
-    const customElement = document.createElement('custom-element');
-    document.body.appendChild(customElement);
-    
-    // Act
-    const result = getComputedRole(customElement);
-    
-    // Assert
-    expect(result).toBeUndefined();
-  });
-
-  it('should prioritize role attribute over computed role', () => {
-    // Arrange
-    const element = document.createElement('button'); // Inherent role is 'button'
-    element.setAttribute('role', 'menuitem'); // Override with custom role
-    document.body.appendChild(element);
-    
-    // Act
-    const result = getComputedRole(element);
-    
-    // Assert
-    expect(result).toBe('menuitem'); // Should use the explicit role
-  });
-
-  it('should handle empty or whitespace role attribute', () => {
-    // Arrange
-    const emptyRoleElement = document.createElement('div');
-    emptyRoleElement.setAttribute('role', '');
-    
-    const whitespaceRoleElement = document.createElement('div');
-    whitespaceRoleElement.setAttribute('role', '  ');
-    
-    document.body.appendChild(emptyRoleElement);
-    document.body.appendChild(whitespaceRoleElement);
-    
-    // Act
-    const emptyResult = getComputedRole(emptyRoleElement);
-    const whitespaceResult = getComputedRole(whitespaceRoleElement);
-    
-    // Assert
-    // The implementation returns the fallback 'group' role for div when the role attribute is empty
-    expect(emptyResult).toBe('group');
-    expect(whitespaceResult).toBe('  '); // Whitespace is preserved
-  });
-
-  it('should handle case insensitivity for tag names', () => {
-    // Arrange - create element with uppercase tag
-    const upperElement = document.createElement('DIV');
-    document.body.appendChild(upperElement);
-    
-    // Act
-    const result = getComputedRole(upperElement);
-    
-    // Assert
-    expect(result).toBe('group'); // Should match 'div' in the mapping
-  });
-});
+    beforeEach(() => {
+        document.body.innerHTML = '';
+    });
+
+    it('should return undefined for null or undefined element', () => {
+        expect(getComputedRole(null)).toBeUndefined();
+        expect(getComputedRole(undefined)).toBeUndefined();
+    });
+
+    it('should return the role attribute value if present', () => {
+        // Arrange
+        const element = document.createElement('div');
+        element.setAttribute('role', 'button');
+        document.body.appendChild(element);
+
+        // Act
+        const result = getComputedRole(element);
+
+        // Assert
+        expect(result).toBe('button');
+    });
+
+    it('should return the correct role for basic elements with simple string mapping', () => {
+        // Test cases for elements with simple string mapping
+        const testCases = [
+            { tag: 'div', expectedRole: 'group' },
+            { tag: 'p', expectedRole: 'text' },
+            { tag: 'ul', expectedRole: 'list' },
+            { tag: 'h1', expectedRole: 'heading' },
+            { tag: 'button', expectedRole: 'button' },
+            { tag: 'nav', expectedRole: 'navigation' },
+            { tag: 'header', expectedRole: 'banner' },
+            { tag: 'footer', expectedRole: 'contentinfo' },
+            { tag: 'main', expectedRole: 'main' },
+        ];
+
+        testCases.forEach(({ tag, expectedRole }) => {
+            // Arrange
+            const element = document.createElement(tag);
+            document.body.appendChild(element);
+
+            // Act
+            const result = getComputedRole(element);
+
+            // Assert
+            expect(result).toBe(expectedRole);
+        });
+    });
+
+    it('should handle link elements (a) correctly based on href attribute', () => {
+        // Arrange
+        const linkWithHref = document.createElement('a');
+        linkWithHref.setAttribute('href', 'https://example.com');
+
+        const linkWithoutHref = document.createElement('a');
+
+        document.body.appendChild(linkWithHref);
+        document.body.appendChild(linkWithoutHref);
+
+        // Act
+        const withHrefResult = getComputedRole(linkWithHref);
+        const withoutHrefResult = getComputedRole(linkWithoutHref);
+
+        // Assert
+        expect(withHrefResult).toBe('link');
+        expect(withoutHrefResult).toBe('text');
+    });
+
+    it('should handle image elements based on alt attribute', () => {
+        // Arrange
+        const imgWithAlt = document.createElement('img');
+        imgWithAlt.setAttribute('alt', 'Description of image');
+
+        const imgWithEmptyAlt = document.createElement('img');
+        imgWithEmptyAlt.setAttribute('alt', '');
+
+        document.body.appendChild(imgWithAlt);
+        document.body.appendChild(imgWithEmptyAlt);
+
+        // Act
+        const withAltResult = getComputedRole(imgWithAlt);
+        const withEmptyAltResult = getComputedRole(imgWithEmptyAlt);
+
+        // Assert
+        expect(withAltResult).toBe('image');
+        expect(withEmptyAltResult).toBe('presentation');
+    });
+
+    it('should handle various input types correctly', () => {
+        const inputTypes = [
+            { type: 'button', expectedRole: 'button' },
+            { type: 'checkbox', expectedRole: 'checkbox' },
+            { type: 'hidden', expectedRole: 'noRole' },
+            { type: 'image', expectedRole: 'button' },
+            { type: 'number', expectedRole: 'spinbutton' },
+            { type: 'radio', expectedRole: 'radio' },
+            { type: 'range', expectedRole: 'slider' },
+            { type: 'reset', expectedRole: 'button' },
+            { type: 'submit', expectedRole: 'button' },
+            { type: 'password', expectedRole: 'textbox' },
+            { type: 'text', expectedRole: 'textbox' },
+            { type: 'search', expectedRole: 'searchbox' },
+        ];
+
+        inputTypes.forEach(({ type, expectedRole }) => {
+            // Arrange
+            const input = document.createElement('input');
+            input.setAttribute('type', type);
+            document.body.appendChild(input);
+
+            // Act
+            const result = getComputedRole(input);
+
+            // Assert
+            expect(result).toBe(expectedRole);
+        });
+    });
+
+    it('should handle elements with no role mapping', () => {
+        // Create a custom element that's not in the roleMapping
+        const customElement = document.createElement('custom-element');
+        document.body.appendChild(customElement);
+
+        // Act
+        const result = getComputedRole(customElement);
+
+        // Assert
+        expect(result).toBeUndefined();
+    });
+
+    it('should prioritize role attribute over computed role', () => {
+        // Arrange
+        const element = document.createElement('button'); // Inherent role is 'button'
+        element.setAttribute('role', 'menuitem'); // Override with custom role
+        document.body.appendChild(element);
+
+        // Act
+        const result = getComputedRole(element);
+
+        // Assert
+        expect(result).toBe('menuitem'); // Should use the explicit role
+    });
+
+    it('should handle empty or whitespace role attribute', () => {
+        // Arrange
+        const emptyRoleElement = document.createElement('div');
+        emptyRoleElement.setAttribute('role', '');
+
+        const whitespaceRoleElement = document.createElement('div');
+        whitespaceRoleElement.setAttribute('role', '  ');
+
+        document.body.appendChild(emptyRoleElement);
+        document.body.appendChild(whitespaceRoleElement);
+
+        // Act
+        const emptyResult = getComputedRole(emptyRoleElement);
+        const whitespaceResult = getComputedRole(whitespaceRoleElement);
+
+        // Assert
+        // The implementation returns the fallback 'group' role for div when the role attribute is empty
+        expect(emptyResult).toBe('group');
+        expect(whitespaceResult).toBe('  '); // Whitespace is preserved
+    });
+
+    it('should return gridcell for td inside role="grid"', () => {
+        document.body.innerHTML = `
+      <table role="grid">
+        <tr><td id="target">Cell</td></tr>
+      </table>
+    `;
+        const td = document.getElementById('target');
+        expect(getComputedRole(td)).toBe('gridcell');
+    });
+
+    it('should return cell for td inside regular table', () => {
+        document.body.innerHTML = `
+      <table>
+        <tr><td id="target">Cell</td></tr>
+      </table>
+    `;
+        const td = document.getElementById('target');
+        expect(getComputedRole(td)).toBe('cell');
+    });
+
+    it('should return gridcell for td inside role="treegrid"', () => {
+        document.body.innerHTML = `
+      <table role="treegrid">
+        <tr><td id="target">Cell</td></tr>
+      </table>
+    `;
+        const td = document.getElementById('target');
+        expect(getComputedRole(td)).toBe('gridcell');
+    });
+
+    it('should return generic for header inside article', () => {
+        document.body.innerHTML = `
+      <article>
+        <header id="target">Article Header</header>
+      </article>
+    `;
+        const header = document.getElementById('target');
+        expect(getComputedRole(header)).toBe('generic');
+    });
+
+    it('should return generic for header inside section', () => {
+        document.body.innerHTML = `
+      <section>
+        <header id="target">Section Header</header>
+      </section>
+    `;
+        const header = document.getElementById('target');
+        expect(getComputedRole(header)).toBe('generic');
+    });
+
+    it('should return banner for header that is direct child of body', () => {
+        document.body.innerHTML = '<header id="target">Page Header</header>';
+        const header = document.getElementById('target');
+        expect(getComputedRole(header)).toBe('banner');
+    });
+
+    it('should return generic for footer inside article', () => {
+        document.body.innerHTML = `
+      <article>
+        <footer id="target">Article Footer</footer>
+      </article>
+    `;
+        const footer = document.getElementById('target');
+        expect(getComputedRole(footer)).toBe('generic');
+    });
+
+    it('should return contentinfo for footer that is direct child of body', () => {
+        document.body.innerHTML = '<footer id="target">Page Footer</footer>';
+        const footer = document.getElementById('target');
+        expect(getComputedRole(footer)).toBe('contentinfo');
+    });
+
+    it('should handle case insensitivity for tag names', () => {
+        // Arrange - create element with uppercase tag
+        const upperElement = document.createElement('DIV');
+        document.body.appendChild(upperElement);
+
+        // Act
+        const result = getComputedRole(upperElement);
+
+        // Assert
+        expect(result).toBe('group'); // Should match 'div' in the mapping
+    });
+});