@afixt/test-utils 1.2.1 → 1.2.3

package/package.json

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

package/src/getAccessibleText.js

@@ -5,9 +5,16 @@ const { isEmpty } = require('./stringUtils.js');
  * Traverses the DOM subtree collecting text from text nodes, img alt attributes,
  * and input[type="image"] alt attributes.
  * @param {Element} el - The DOM element.
+ * @param {Object} [options] - Configuration options.
+ * @param {boolean} [options.visibleOnly=false] - If true, return only visually rendered text,
+ *        skipping aria-label, img alt, input[type="image"] alt, style, script, and
+ *        aria-hidden="true" elements. Useful for WCAG 2.5.3 Label in Name comparisons.
  * @returns {string} The accessible text.
  */
-function getAccessibleText(el) {
+function getAccessibleText(el, options) {
+    const opts = options || {};
+    const visibleOnly = opts.visibleOnly || false;
+
     if (!el || !(el instanceof Element)) {
         return '';
     }
@@ -16,31 +23,32 @@ function getAccessibleText(el) {
         return '';
     }
 
-    // Check for aria-label first (highest priority)
-    if (el.hasAttribute('aria-label')) {
-        const ariaLabel = el.getAttribute('aria-label').trim();
-        if (ariaLabel) {
-            return ariaLabel;
+    if (!visibleOnly) {
+        // Check for aria-label first (highest priority)
+        if (el.hasAttribute('aria-label')) {
+            const ariaLabel = el.getAttribute('aria-label').trim();
+            if (ariaLabel) {
+                return ariaLabel;
+            }
         }
-    }
 
-    // Check for img alt text when the element itself is an img
-    if (el.tagName.toLowerCase() === 'img' && el.hasAttribute('alt')) {
-        return el.getAttribute('alt').trim();
-    }
+        // Check for img alt text when the element itself is an img
+        if (el.tagName.toLowerCase() === 'img' && el.hasAttribute('alt')) {
+            return el.getAttribute('alt').trim();
+        }
 
-    // Check for input[type="image"] alt text when the element itself is one
-    if (
-        el.tagName.toLowerCase() === 'input' &&
-        el.getAttribute('type') === 'image' &&
-        el.hasAttribute('alt')
-    ) {
-        return el.getAttribute('alt').trim();
+        // Check for input[type="image"] alt text when the element itself is one
+        if (
+            el.tagName.toLowerCase() === 'input' &&
+            el.getAttribute('type') === 'image' &&
+            el.hasAttribute('alt')
+        ) {
+            return el.getAttribute('alt').trim();
+        }
     }
 
-    // Collect accessible text from the subtree, including text nodes
-    // and alt text from embedded images
-    const parts = collectSubtreeText(el);
+    // Collect text from the subtree
+    const parts = collectSubtreeText(el, visibleOnly);
     return parts.join(' ').replace(/\s+/g, ' ').trim();
 }
 
@@ -48,9 +56,10 @@ function getAccessibleText(el) {
  * Recursively collect accessible text parts from an element's subtree.
  * Handles text nodes, img alt text, and input[type="image"] alt text.
  * @param {Node} node - The DOM node to traverse.
+ * @param {boolean} [visibleOnly=false] - If true, skip non-visible content.
  * @returns {string[]} Array of text parts found in the subtree.
  */
-function collectSubtreeText(node) {
+function collectSubtreeText(node, visibleOnly) {
     const parts = [];
 
     for (let child = node.firstChild; child; child = child.nextSibling) {
@@ -62,30 +71,42 @@ function collectSubtreeText(node) {
         } else if (child.nodeType === Node.ELEMENT_NODE) {
             const tag = child.tagName.toLowerCase();
 
-            // img with non-empty alt contributes its alt text
-            if (tag === 'img' && child.hasAttribute('alt')) {
-                const alt = child.getAttribute('alt').trim();
-                if (alt) {
-                    parts.push(alt);
+            // In visibleOnly mode, skip non-rendered content
+            if (visibleOnly) {
+                if (tag === 'style' || tag === 'script') {
+                    continue;
+                }
+                if (child.getAttribute('aria-hidden') === 'true') {
+                    continue;
                 }
-                continue;
             }
 
-            // input[type="image"] with non-empty alt contributes its alt text
-            if (
-                tag === 'input' &&
-                child.getAttribute('type') === 'image' &&
-                child.hasAttribute('alt')
-            ) {
-                const alt = child.getAttribute('alt').trim();
-                if (alt) {
-                    parts.push(alt);
+            if (!visibleOnly) {
+                // img with non-empty alt contributes its alt text
+                if (tag === 'img' && child.hasAttribute('alt')) {
+                    const alt = child.getAttribute('alt').trim();
+                    if (alt) {
+                        parts.push(alt);
+                    }
+                    continue;
+                }
+
+                // input[type="image"] with non-empty alt contributes its alt text
+                if (
+                    tag === 'input' &&
+                    child.getAttribute('type') === 'image' &&
+                    child.hasAttribute('alt')
+                ) {
+                    const alt = child.getAttribute('alt').trim();
+                    if (alt) {
+                        parts.push(alt);
+                    }
+                    continue;
                 }
-                continue;
             }
 
             // Recurse into other element children
-            parts.push(...collectSubtreeText(child));
+            parts.push(...collectSubtreeText(child, visibleOnly));
         }
     }
 

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/getAccessibleText.test.js

@@ -300,6 +300,99 @@ describe('getAccessibleText', () => {
         });
     });
 
+    describe('visibleOnly option', () => {
+        it('should skip aria-label when visibleOnly is true', () => {
+            const div = document.createElement('div');
+            div.setAttribute('aria-label', 'Accessible Label');
+            div.textContent = 'Visual Text';
+            document.body.appendChild(div);
+
+            expect(getAccessibleText(div, { visibleOnly: true })).toBe('Visual Text');
+        });
+
+        it('should skip img alt text on the element itself when visibleOnly is true', () => {
+            const img = document.createElement('img');
+            img.setAttribute('alt', 'Image description');
+            img.setAttribute('src', 'test.jpg');
+            document.body.appendChild(img);
+
+            expect(getAccessibleText(img, { visibleOnly: true })).toBe('');
+        });
+
+        it('should skip input[type="image"] alt when visibleOnly is true', () => {
+            const input = document.createElement('input');
+            input.setAttribute('type', 'image');
+            input.setAttribute('alt', 'Search');
+            document.body.appendChild(input);
+
+            expect(getAccessibleText(input, { visibleOnly: true })).toBe('');
+        });
+
+        it('should skip child img alt text when visibleOnly is true', () => {
+            const container = document.createElement('div');
+            container.innerHTML = 'Click <img src="icon.png" alt="here"> to continue';
+            document.body.appendChild(container);
+
+            const result = getAccessibleText(container, { visibleOnly: true });
+            expect(result).toContain('Click');
+            expect(result).not.toContain('here');
+            expect(result).toContain('to continue');
+        });
+
+        it('should skip style element content when visibleOnly is true', () => {
+            const container = document.createElement('div');
+            container.innerHTML = '<style>.cls-1{fill:#09141d;}</style>Visible text';
+            document.body.appendChild(container);
+
+            expect(getAccessibleText(container, { visibleOnly: true })).toBe('Visible text');
+        });
+
+        it('should skip script element content when visibleOnly is true', () => {
+            const container = document.createElement('div');
+            container.innerHTML = '<script>var x = 1;</script>Visible text';
+            document.body.appendChild(container);
+
+            expect(getAccessibleText(container, { visibleOnly: true })).toBe('Visible text');
+        });
+
+        it('should skip aria-hidden="true" elements when visibleOnly is true', () => {
+            const container = document.createElement('div');
+            container.innerHTML = 'Visible <span aria-hidden="true">Hidden</span> text';
+            document.body.appendChild(container);
+
+            expect(getAccessibleText(container, { visibleOnly: true })).toBe('Visible text');
+        });
+
+        it('should return empty for SVG-only element with style when visibleOnly is true', () => {
+            const link = document.createElement('a');
+            link.setAttribute('aria-label', 'Code Enforcement');
+            link.innerHTML =
+                '<svg><defs><style>.cls-1{fill:#09141d;}</style></defs><path d="M25,49"></path></svg>';
+            document.body.appendChild(link);
+
+            expect(getAccessibleText(link, { visibleOnly: true })).toBe('');
+        });
+
+        it('should still include style/script content when visibleOnly is false (default)', () => {
+            const container = document.createElement('div');
+            container.innerHTML = '<style>.cls{color:red;}</style>Visible';
+            document.body.appendChild(container);
+
+            const result = getAccessibleText(container);
+            expect(result).toContain('.cls{color:red;}');
+            expect(result).toContain('Visible');
+        });
+
+        it('should behave normally when options are not provided', () => {
+            const div = document.createElement('div');
+            div.setAttribute('aria-label', 'Label');
+            div.textContent = 'Text';
+            document.body.appendChild(div);
+
+            expect(getAccessibleText(div)).toBe('Label');
+        });
+    });
+
     describe('special cases', () => {
         it('should handle elements with only child elements and no text', () => {
             const container = document.createElement('div');

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