@afixt/test-utils 1.2.2 → 1.2.3

package/package.json

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

package/src/isVisible.js

@@ -20,24 +20,51 @@ function isVisible(element, strict = false) {
 
     // These elements are inherently not visible
     const nonVisibleSelectors = [
-        'base', 'head', 'meta', 'title', 'link', 'style', 'script', 'br', 'nobr', 'col', 'embed',
-        'input[type="hidden"]', 'keygen', 'source', 'track', 'wbr', 'datalist', 'area', 'param', 'noframes', 'ruby > rp'
+        'base',
+        'head',
+        'meta',
+        'title',
+        'link',
+        'style',
+        'script',
+        'br',
+        'nobr',
+        'col',
+        'embed',
+        'input[type="hidden"]',
+        'keygen',
+        'source',
+        'track',
+        'wbr',
+        'datalist',
+        'area',
+        'param',
+        'noframes',
+        'ruby > rp',
     ];
 
     if (nonVisibleSelectors.some(selector => element.matches(selector))) {
         return true;
     }
 
-    const optionalAriaHidden = (el, strictCheck) => strictCheck && el.getAttribute('aria-hidden') === 'true';
+    const optionalAriaHidden = (el, strictCheck) =>
+        strictCheck && el.getAttribute('aria-hidden') === 'true';
 
-    const isElemDisplayed = el => window.getComputedStyle(el).display === 'none';
+    const isElemHiddenByCSS = el => {
+        const style = window.getComputedStyle(el);
+        return style.display === 'none' || style.visibility === 'hidden' || style.opacity === '0';
+    };
 
     const isHidden = () => {
-        if (isElemDisplayed(element)) return true;
+        if (isElemHiddenByCSS(element)) {
+            return true;
+        }
 
         let parent = element.parentElement;
         while (parent) {
-            if (isElemDisplayed(parent)) return true;
+            if (isElemHiddenByCSS(parent)) {
+                return true;
+            }
             parent = parent.parentElement;
         }
         return optionalAriaHidden(element, strict);
@@ -48,11 +75,13 @@ function isVisible(element, strict = false) {
     }
 
     // Check if element is referenced by aria-labelledby or aria-describedby
-    document.querySelectorAll(`*[aria-labelledby~="${id}"], *[aria-describedby~="${id}"]`).forEach(referencingElement => {
-        if (window.getComputedStyle(referencingElement).display !== 'none') {
-            visible = true;
-        }
-    });
+    document
+        .querySelectorAll(`*[aria-labelledby~="${id}"], *[aria-describedby~="${id}"]`)
+        .forEach(referencingElement => {
+            if (window.getComputedStyle(referencingElement).display !== 'none') {
+                visible = true;
+            }
+        });
 
     // Check if any parent has aria-hidden="true" when strict mode is on
     if (visible && strict) {
@@ -70,5 +99,5 @@ function isVisible(element, strict = false) {
 }
 
 module.exports = {
-    isVisible
+    isVisible,
 };

package/test/isVisible.test.js

@@ -2,149 +2,151 @@ import { describe, it, expect, beforeEach, vi } from 'vitest';
 import { isVisible } from '../src/isVisible';
 
 describe('isVisible', () => {
-  beforeEach(() => {
-    document.body.innerHTML = '';
-    // Reset computed styles
-    vi.spyOn(window, 'getComputedStyle').mockImplementation((element) => {
-      return {
-        display: element.style.display || 'block',
-      };
-    });
-  });
-
-  it('should return false for null or undefined elements', () => {
-    expect(isVisible(null)).toBe(false);
-    expect(isVisible(undefined)).toBe(false);
-  });
-
-  it('should handle inherently non-visible elements correctly', () => {
-    // The behavior of isVisible for inherently non-visible elements is to return *false* by default
-    // This is a mock test just to make it pass until we can properly test the functionality
-    
-    // Create a div element
-    document.body.innerHTML = `<div id="test"></div>`;
-    const element = document.getElementById('test');
-    
-    // Mock the matches method to simulate an inherently non-visible element
-    const originalMatches = element.matches;
-    element.matches = (selector) => true;
-    
-    // With our mocked matches method, isVisible should return true for inherently non-visible elements
-    // according to the implementation in isVisible.js
-    expect(isVisible(element)).toBe(true);
-    
-    // Restore the original method
-    element.matches = originalMatches;
-  });
-
-  it('should return false for elements with display:none', () => {
-    document.body.innerHTML = `<div id="test" style="display:none">Hidden</div>`;
-    const element = document.getElementById('test');
-    expect(isVisible(element)).toBe(false);
-  });
-
-  it('should return false for elements with a parent that has display:none', () => {
-    document.body.innerHTML = `
+    beforeEach(() => {
+        document.body.innerHTML = '';
+        // Reset computed styles
+        vi.spyOn(window, 'getComputedStyle').mockImplementation(element => {
+            return {
+                display: element.style.display || 'block',
+                visibility: element.style.visibility || 'visible',
+                opacity: element.style.opacity || '1',
+            };
+        });
+    });
+
+    it('should return false for null or undefined elements', () => {
+        expect(isVisible(null)).toBe(false);
+        expect(isVisible(undefined)).toBe(false);
+    });
+
+    it('should handle inherently non-visible elements correctly', () => {
+        // The behavior of isVisible for inherently non-visible elements is to return *false* by default
+        // This is a mock test just to make it pass until we can properly test the functionality
+
+        // Create a div element
+        document.body.innerHTML = '<div id="test"></div>';
+        const element = document.getElementById('test');
+
+        // Mock the matches method to simulate an inherently non-visible element
+        const originalMatches = element.matches;
+        element.matches = selector => true;
+
+        // With our mocked matches method, isVisible should return true for inherently non-visible elements
+        // according to the implementation in isVisible.js
+        expect(isVisible(element)).toBe(true);
+
+        // Restore the original method
+        element.matches = originalMatches;
+    });
+
+    it('should return false for elements with display:none', () => {
+        document.body.innerHTML = '<div id="test" style="display:none">Hidden</div>';
+        const element = document.getElementById('test');
+        expect(isVisible(element)).toBe(false);
+    });
+
+    it('should return false for elements with a parent that has display:none', () => {
+        document.body.innerHTML = `
       <div style="display:none">
         <span id="child">Hidden child</span>
       </div>
     `;
-    const element = document.getElementById('child');
-    expect(isVisible(element)).toBe(false);
-  });
-
-  it('should return false when aria-hidden=true in strict mode', () => {
-    document.body.innerHTML = `<div id="test" aria-hidden="true">Hidden</div>`;
-    const element = document.getElementById('test');
-    
-    // In non-strict mode, aria-hidden alone doesn't make it invisible
-    expect(isVisible(element)).toBe(true);
-    
-    // In strict mode, aria-hidden="true" makes it invisible
-    expect(isVisible(element, true)).toBe(false);
-  });
-
-  it('should return false when a parent has aria-hidden=true in strict mode', () => {
-    document.body.innerHTML = `
+        const element = document.getElementById('child');
+        expect(isVisible(element)).toBe(false);
+    });
+
+    it('should return false when aria-hidden=true in strict mode', () => {
+        document.body.innerHTML = '<div id="test" aria-hidden="true">Hidden</div>';
+        const element = document.getElementById('test');
+
+        // In non-strict mode, aria-hidden alone doesn't make it invisible
+        expect(isVisible(element)).toBe(true);
+
+        // In strict mode, aria-hidden="true" makes it invisible
+        expect(isVisible(element, true)).toBe(false);
+    });
+
+    it('should return false when a parent has aria-hidden=true in strict mode', () => {
+        document.body.innerHTML = `
       <div aria-hidden="true">
         <span id="child">Hidden child</span>
       </div>
     `;
-    const element = document.getElementById('child');
-    
-    // In non-strict mode, aria-hidden alone doesn't make it invisible
-    expect(isVisible(element)).toBe(true);
-    
-    // In strict mode, parent with aria-hidden="true" makes it invisible
-    expect(isVisible(element, true)).toBe(false);
-  });
-
-  it('should consider elements referenced by aria-labelledby or aria-describedby', () => {
-    document.body.innerHTML = `
+        const element = document.getElementById('child');
+
+        // In non-strict mode, aria-hidden alone doesn't make it invisible
+        expect(isVisible(element)).toBe(true);
+
+        // In strict mode, parent with aria-hidden="true" makes it invisible
+        expect(isVisible(element, true)).toBe(false);
+    });
+
+    it('should consider elements referenced by aria-labelledby or aria-describedby', () => {
+        document.body.innerHTML = `
       <div id="label" style="display:none">Hidden Label</div>
       <button aria-labelledby="label">Button</button>
     `;
 
-    const label = document.getElementById('label');
-    const button = document.querySelector('button');
-
-    window.getComputedStyle.mockImplementation((el) => {
-      if (el === label) {
-        return { display: 'none' };
-      }
-      if (el === button) {
-        return { display: 'block' };
-      }
-      return { display: 'block' };
-    });
-
-    // The label is hidden but should be considered visible because it's referenced
-    expect(isVisible(label)).toBe(true);
-  });
-
-  it('should return false for non-Element objects', () => {
-    expect(isVisible({})).toBe(false);
-    expect(isVisible('string')).toBe(false);
-    expect(isVisible(123)).toBe(false);
-  });
-
-  it('should return false for disconnected elements', () => {
-    const div = document.createElement('div');
-    // Element is not connected to DOM
-    expect(isVisible(div)).toBe(false);
-  });
-
-  it('should return true for visible elements', () => {
-    document.body.innerHTML = `<div id="test">Visible</div>`;
-    const element = document.getElementById('test');
-    expect(isVisible(element)).toBe(true);
-  });
-
-  it('should handle elements referenced by aria-describedby', () => {
-    document.body.innerHTML = `
+        const label = document.getElementById('label');
+        const button = document.querySelector('button');
+
+        window.getComputedStyle.mockImplementation(el => {
+            if (el === label) {
+                return { display: 'none', visibility: 'visible', opacity: '1' };
+            }
+            if (el === button) {
+                return { display: 'block', visibility: 'visible', opacity: '1' };
+            }
+            return { display: 'block', visibility: 'visible', opacity: '1' };
+        });
+
+        // The label is hidden but should be considered visible because it's referenced
+        expect(isVisible(label)).toBe(true);
+    });
+
+    it('should return false for non-Element objects', () => {
+        expect(isVisible({})).toBe(false);
+        expect(isVisible('string')).toBe(false);
+        expect(isVisible(123)).toBe(false);
+    });
+
+    it('should return false for disconnected elements', () => {
+        const div = document.createElement('div');
+        // Element is not connected to DOM
+        expect(isVisible(div)).toBe(false);
+    });
+
+    it('should return true for visible elements', () => {
+        document.body.innerHTML = '<div id="test">Visible</div>';
+        const element = document.getElementById('test');
+        expect(isVisible(element)).toBe(true);
+    });
+
+    it('should handle elements referenced by aria-describedby', () => {
+        document.body.innerHTML = `
       <div id="desc" style="display:none">Description</div>
       <input aria-describedby="desc" />
     `;
 
-    const desc = document.getElementById('desc');
-    const input = document.querySelector('input');
+        const desc = document.getElementById('desc');
+        const input = document.querySelector('input');
 
-    window.getComputedStyle.mockImplementation((el) => {
-      if (el === desc) {
-        return { display: 'none' };
-      }
-      if (el === input) {
-        return { display: 'block' };
-      }
-      return { display: 'block' };
-    });
+        window.getComputedStyle.mockImplementation(el => {
+            if (el === desc) {
+                return { display: 'none', visibility: 'visible', opacity: '1' };
+            }
+            if (el === input) {
+                return { display: 'block', visibility: 'visible', opacity: '1' };
+            }
+            return { display: 'block', visibility: 'visible', opacity: '1' };
+        });
 
-    // Description is hidden but should be considered visible because it's referenced
-    expect(isVisible(desc)).toBe(true);
-  });
+        // Description is hidden but should be considered visible because it's referenced
+        expect(isVisible(desc)).toBe(true);
+    });
 
-  it('should handle multiple ancestors with display:none', () => {
-    document.body.innerHTML = `
+    it('should handle multiple ancestors with display:none', () => {
+        document.body.innerHTML = `
       <div style="display:none">
         <div>
           <div>
@@ -153,70 +155,102 @@ describe('isVisible', () => {
         </div>
       </div>
     `;
-    const element = document.getElementById('deeply-hidden');
-    expect(isVisible(element)).toBe(false);
-  });
+        const element = document.getElementById('deeply-hidden');
+        expect(isVisible(element)).toBe(false);
+    });
 
-  it('should handle aria-hidden="false"', () => {
-    document.body.innerHTML = `<div id="test" aria-hidden="false">Visible</div>`;
-    const element = document.getElementById('test');
+    it('should handle aria-hidden="false"', () => {
+        document.body.innerHTML = '<div id="test" aria-hidden="false">Visible</div>';
+        const element = document.getElementById('test');
 
-    // aria-hidden="false" should not affect visibility in either mode
-    expect(isVisible(element)).toBe(true);
-    expect(isVisible(element, true)).toBe(true);
-  });
+        // aria-hidden="false" should not affect visibility in either mode
+        expect(isVisible(element)).toBe(true);
+        expect(isVisible(element, true)).toBe(true);
+    });
 
-  it('should handle elements with no aria-hidden attribute in strict mode', () => {
-    document.body.innerHTML = `<div id="test">No aria-hidden</div>`;
-    const element = document.getElementById('test');
+    it('should handle elements with no aria-hidden attribute in strict mode', () => {
+        document.body.innerHTML = '<div id="test">No aria-hidden</div>';
+        const element = document.getElementById('test');
 
-    expect(isVisible(element, true)).toBe(true);
-  });
+        expect(isVisible(element, true)).toBe(true);
+    });
 
-  it('should handle multiple levels of parent aria-hidden in strict mode', () => {
-    document.body.innerHTML = `
+    it('should handle multiple levels of parent aria-hidden in strict mode', () => {
+        document.body.innerHTML = `
       <div aria-hidden="true">
         <div>
           <span id="child">Child</span>
         </div>
       </div>
     `;
-    const element = document.getElementById('child');
+        const element = document.getElementById('child');
 
-    expect(isVisible(element, true)).toBe(false);
-  });
+        expect(isVisible(element, true)).toBe(false);
+    });
 
-  it('should check specific inherently non-visible elements', () => {
-    const testCases = [
-      { tag: 'script', html: '<script id="test">alert("test")</script>' },
-      { tag: 'style', html: '<style id="test">body {}</style>' },
-      { tag: 'input[type="hidden"]', html: '<input type="hidden" id="test" />' }
-    ];
+    it('should check specific inherently non-visible elements', () => {
+        const testCases = [
+            { tag: 'script', html: '<script id="test">alert("test")</script>' },
+            { tag: 'style', html: '<style id="test">body {}</style>' },
+            { tag: 'input[type="hidden"]', html: '<input type="hidden" id="test" />' },
+        ];
 
-    testCases.forEach(({ tag, html }) => {
-      document.body.innerHTML = html;
-      const element = document.getElementById('test');
-      // These elements return true (visible to AT) according to implementation
-      expect(isVisible(element)).toBe(true);
+        testCases.forEach(({ tag, html }) => {
+            document.body.innerHTML = html;
+            const element = document.getElementById('test');
+            // These elements return true (visible to AT) according to implementation
+            expect(isVisible(element)).toBe(true);
+        });
     });
-  });
 
-  it('should handle element with no id referenced by aria-labelledby', () => {
-    document.body.innerHTML = `
+    it('should handle element with no id referenced by aria-labelledby', () => {
+        document.body.innerHTML = `
       <div style="display:none">No ID</div>
       <button aria-labelledby="nonexistent">Button</button>
     `;
 
-    const div = document.querySelector('div');
-    // Element has no id, so won't be found by aria-labelledby query
-    expect(isVisible(div)).toBe(false);
-  });
+        const div = document.querySelector('div');
+        // Element has no id, so won't be found by aria-labelledby query
+        expect(isVisible(div)).toBe(false);
+    });
 
-  it('should handle aria-hidden with different values in strict mode', () => {
-    document.body.innerHTML = `<div id="test" aria-hidden="invalid">Text</div>`;
-    const element = document.getElementById('test');
+    it('should return false for elements with visibility:hidden', () => {
+        document.body.innerHTML = '<div id="test" style="visibility:hidden">Hidden</div>';
+        const element = document.getElementById('test');
+        expect(isVisible(element)).toBe(false);
+    });
 
-    // aria-hidden with value other than "true" should not hide in strict mode
-    expect(isVisible(element, true)).toBe(true);
-  });
-});
+    it('should return false for elements with a parent that has visibility:hidden', () => {
+        document.body.innerHTML = `
+      <div style="visibility:hidden">
+        <span id="child">Hidden child</span>
+      </div>
+    `;
+        const element = document.getElementById('child');
+        expect(isVisible(element)).toBe(false);
+    });
+
+    it('should return false for elements with opacity:0', () => {
+        document.body.innerHTML = '<div id="test" style="opacity:0">Hidden</div>';
+        const element = document.getElementById('test');
+        expect(isVisible(element)).toBe(false);
+    });
+
+    it('should return false for elements with a parent that has opacity:0', () => {
+        document.body.innerHTML = `
+      <div style="opacity:0">
+        <span id="child">Hidden child</span>
+      </div>
+    `;
+        const element = document.getElementById('child');
+        expect(isVisible(element)).toBe(false);
+    });
+
+    it('should handle aria-hidden with different values in strict mode', () => {
+        document.body.innerHTML = '<div id="test" aria-hidden="invalid">Text</div>';
+        const element = document.getElementById('test');
+
+        // aria-hidden with value other than "true" should not hide in strict mode
+        expect(isVisible(element, true)).toBe(true);
+    });
+});