@afixt/test-utils 1.1.7 → 1.1.8

package/test/getAccessibleName.test.js

@@ -2,366 +2,430 @@ import { describe, it, expect, beforeEach } from 'vitest';
 import getAccessibleName from '../src/getAccessibleName';
 
 describe('getAccessibleName', () => {
-  // Set up a clean DOM before each test
-  beforeEach(() => {
-    document.body.innerHTML = '';
-  });
-
-  it('should return false for null or undefined elements', () => {
-    expect(getAccessibleName(null)).toBe(false);
-    expect(getAccessibleName(undefined)).toBe(false);
-  });
-
-  it('should get name from aria-label', () => {
-    document.body.innerHTML = `
+    // Set up a clean DOM before each test
+    beforeEach(() => {
+        document.body.innerHTML = '';
+    });
+
+    it('should return false for null or undefined elements', () => {
+        expect(getAccessibleName(null)).toBe(false);
+        expect(getAccessibleName(undefined)).toBe(false);
+    });
+
+    it('should get name from aria-label', () => {
+        document.body.innerHTML = `
       <button aria-label="Submit Form">Click Me</button>
     `;
-    const button = document.querySelector('button');
-    expect(getAccessibleName(button)).toBe('Submit Form');
-  });
+        const button = document.querySelector('button');
+        expect(getAccessibleName(button)).toBe('Submit Form');
+    });
 
-  it('should get name from aria-labelledby', () => {
-    document.body.innerHTML = `
+    it('should get name from aria-labelledby', () => {
+        document.body.innerHTML = `
       <span id="label-1">Submit</span>
       <span id="label-2">Form</span>
       <button aria-labelledby="label-1 label-2">Click Me</button>
     `;
-    const button = document.querySelector('button');
-    expect(getAccessibleName(button)).toBe('Submit Form');
-  });
+        const button = document.querySelector('button');
+        expect(getAccessibleName(button)).toBe('Submit Form');
+    });
 
-  it('should get name from label element with for attribute', () => {
-    document.body.innerHTML = `
+    it('should get name from label element with for attribute', () => {
+        document.body.innerHTML = `
       <label for="test-input">Email Address</label>
       <input id="test-input" type="email">
     `;
-    const input = document.querySelector('input');
-    expect(getAccessibleName(input)).toBe('Email Address');
-  });
+        const input = document.querySelector('input');
+        expect(getAccessibleName(input)).toBe('Email Address');
+    });
 
-  it('should get name from parent label element', () => {
-    document.body.innerHTML = `
+    it('should get name from parent label element', () => {
+        document.body.innerHTML = `
       <label>
         Phone Number
         <input type="tel">
       </label>
     `;
-    const input = document.querySelector('input');
-    expect(getAccessibleName(input)).toBe('Phone Number');
-  });
+        const input = document.querySelector('input');
+        expect(getAccessibleName(input)).toBe('Phone Number');
+    });
 
-  it('should get name from button content', () => {
-    document.body.innerHTML = `
+    it('should get name from button content', () => {
+        document.body.innerHTML = `
       <button>Save Changes</button>
     `;
-    const button = document.querySelector('button');
-    expect(getAccessibleName(button)).toBe('Save Changes');
-  });
+        const button = document.querySelector('button');
+        expect(getAccessibleName(button)).toBe('Save Changes');
+    });
 
-  it('should get name from img alt attribute', () => {
-    document.body.innerHTML = `
+    it('should get name from img alt attribute', () => {
+        document.body.innerHTML = `
       <img alt="Company Logo">
     `;
-    const img = document.querySelector('img');
-    expect(getAccessibleName(img)).toBe('Company Logo');
-  });
+        const img = document.querySelector('img');
+        expect(getAccessibleName(img)).toBe('Company Logo');
+    });
 
-  it('should use title as fallback for input elements', () => {
-    document.body.innerHTML = `
+    it('should use title as fallback for input elements', () => {
+        document.body.innerHTML = `
       <input type="text" title="Search Query">
     `;
-    const input = document.querySelector('input');
-    expect(getAccessibleName(input)).toBe('Search Query');
-  });
+        const input = document.querySelector('input');
+        expect(getAccessibleName(input)).toBe('Search Query');
+    });
 
-  it('should get name from figcaption for figure elements', () => {
-    document.body.innerHTML = `
+    it('should get name from figcaption for figure elements', () => {
+        document.body.innerHTML = `
       <figure>
         <img src="chart.png">
         <figcaption>Annual Revenue Growth</figcaption>
       </figure>
     `;
-    const figure = document.querySelector('figure');
-    expect(getAccessibleName(figure)).toBe('Annual Revenue Growth');
-  });
+        const figure = document.querySelector('figure');
+        expect(getAccessibleName(figure)).toBe('Annual Revenue Growth');
+    });
 
-  it('should get name from value attribute for submit buttons', () => {
-    document.body.innerHTML = `
+    it('should get name from value attribute for submit buttons', () => {
+        document.body.innerHTML = `
       <input type="submit" value="Register Now">
     `;
-    const submit = document.querySelector('input');
-    expect(getAccessibleName(submit)).toBe('Register Now');
-  });
+        const submit = document.querySelector('input');
+        expect(getAccessibleName(submit)).toBe('Register Now');
+    });
 
-  it('should return default text for submit buttons without value', () => {
-    document.body.innerHTML = `
+    it('should return default text for submit buttons without value', () => {
+        document.body.innerHTML = `
       <input type="submit">
     `;
-    const submit = document.querySelector('input');
-    expect(getAccessibleName(submit)).toBe('Submit');
-  });
+        const submit = document.querySelector('input');
+        expect(getAccessibleName(submit)).toBe('Submit');
+    });
 
-  it('should handle complex aria-labelledby references', () => {
-    document.body.innerHTML = `
+    it('should handle complex aria-labelledby references', () => {
+        document.body.innerHTML = `
       <h2 id="dialog-title">Confirmation</h2>
       <p id="dialog-desc">Are you sure you want to continue?</p>
       <div role="dialog" aria-labelledby="dialog-title dialog-desc"></div>
     `;
-    const dialog = document.querySelector('[role="dialog"]');
-    expect(getAccessibleName(dialog)).toBe('Confirmation Are you sure you want to continue?');
-  });
-
-  it('should handle text-level elements with content', () => {
-    // Test various text-level elements
-    const textLevelElements = ['em', 'strong', 'small', 'cite', 'code', 'var', 'kbd', 'sub', 'sup', 'i', 'b', 'u', 'mark'];
-    
-    textLevelElements.forEach(tagName => {
-      document.body.innerHTML = `<${tagName}>Important text</${tagName}>`;
-      const element = document.querySelector(tagName);
-      expect(getAccessibleName(element)).toBe('Important text');
-    });
-  });
-
-  it('should handle text-level elements with title fallback', () => {
-    document.body.innerHTML = `<em title="Emphasis title"></em>`;
-    const em = document.querySelector('em');
-    expect(getAccessibleName(em)).toBe('Emphasis title');
-  });
-
-  it('should return false for text-level elements without content or title', () => {
-    document.body.innerHTML = `<strong></strong>`;
-    const strong = document.querySelector('strong');
-    expect(getAccessibleName(strong)).toBe(false);
-  });
-
-  it('should handle elements with role-based text content', () => {
-    const textRoles = ['button', 'checkbox', 'link', 'menuitem', 'option', 'tab'];
-    
-    textRoles.forEach(role => {
-      document.body.innerHTML = `<div role="${role}">Role content</div>`;
-      const element = document.querySelector('div');
-      expect(getAccessibleName(element)).toBe('Role content');
-    });
-  });
-
-  it('should return false for elements with roles but no text content', () => {
-    document.body.innerHTML = `<div role="button"></div>`;
-    const element = document.querySelector('div');
-    expect(getAccessibleName(element)).toBe(false);
-  });
-
-  it('should handle input type="button" with value', () => {
-    document.body.innerHTML = `<input type="button" value="Cancel">`;
-    const button = document.querySelector('input');
-    expect(getAccessibleName(button)).toBe('Cancel');
-  });
-
-  it('should handle input type="button" with title fallback', () => {
-    document.body.innerHTML = `<input type="button" title="Close Dialog">`;
-    const button = document.querySelector('input');
-    expect(getAccessibleName(button)).toBe('Close Dialog');
-  });
-
-  it('should return false for input type="button" without value or title', () => {
-    document.body.innerHTML = `<input type="button">`;
-    const button = document.querySelector('input');
-    expect(getAccessibleName(button)).toBe(false);
-  });
-
-  it('should handle input type="reset" with title', () => {
-    document.body.innerHTML = `<input type="reset" title="Clear Form">`;
-    const reset = document.querySelector('input');
-    expect(getAccessibleName(reset)).toBe('Clear Form');
-  });
-
-  it('should return default "Reset" for input type="reset" without title', () => {
-    document.body.innerHTML = `<input type="reset">`;
-    const reset = document.querySelector('input');
-    expect(getAccessibleName(reset)).toBe('Reset');
-  });
-
-  it('should handle input type="image" with alt attribute', () => {
-    document.body.innerHTML = `<input type="image" alt="Submit Button">`;
-    const image = document.querySelector('input');
-    expect(getAccessibleName(image)).toBe('Submit Button');
-  });
-
-  it('should handle input type="image" with value fallback', () => {
-    document.body.innerHTML = `<input type="image" value="Send Message">`;
-    const image = document.querySelector('input');
-    expect(getAccessibleName(image)).toBe('Send Message');
-  });
-
-  it('should handle input type="image" with title fallback', () => {
-    document.body.innerHTML = `<input type="image" title="Upload File">`;
-    const image = document.querySelector('input');
-    expect(getAccessibleName(image)).toBe('Upload File');
-  });
-
-  it('should return false for input type="image" without alt, value, or title', () => {
-    document.body.innerHTML = `<input type="image">`;
-    const image = document.querySelector('input');
-    expect(getAccessibleName(image)).toBe(false);
-  });
-
-  it('should handle button element with title fallback', () => {
-    document.body.innerHTML = `<button title="Submit Form"></button>`;
-    const button = document.querySelector('button');
-    expect(getAccessibleName(button)).toBe('Submit Form');
-  });
-
-  it('should return false for button element without content or title', () => {
-    document.body.innerHTML = `<button></button>`;
-    const button = document.querySelector('button');
-    expect(getAccessibleName(button)).toBe(false);
-  });
-
-  it('should handle empty aria-label gracefully', () => {
-    document.body.innerHTML = `<button aria-label="">Click Me</button>`;
-    const button = document.querySelector('button');
-    expect(getAccessibleName(button)).toBe('Click Me');
-  });
-
-  it('should return false for aria-labelledby with non-existent reference', () => {
-    document.body.innerHTML = `<button aria-labelledby="non-existent">Click Me</button>`;
-    const button = document.querySelector('button');
-    expect(getAccessibleName(button)).toBe(false);
-  });
-
-  it('should handle disconnected elements', () => {
-    const div = document.createElement('div');
-    div.textContent = 'Not connected';
-    expect(getAccessibleName(div)).toBe(false);
-  });
-
-  it('should handle invisible elements', () => {
-    document.body.innerHTML = `<div style="display: none;">Hidden content</div>`;
-    const div = document.querySelector('div');
-    expect(getAccessibleName(div)).toBe(false);
-  });
-
-  it('should handle elements with aria-hidden="true"', () => {
-    document.body.innerHTML = `<div aria-hidden="true">Hidden from AT</div>`;
-    const div = document.querySelector('div');
-    expect(getAccessibleName(div)).toBe(false);
-  });
-
-  it('should handle unlabellable elements', () => {
-    document.body.innerHTML = `<hr>`;
-    const hr = document.querySelector('hr');
-    expect(getAccessibleName(hr)).toBe(false);
-  });
-
-  it('should use fallback accessible text for general elements', () => {
-    document.body.innerHTML = `<span>Fallback text content</span>`;
-    const span = document.querySelector('span');
-    expect(getAccessibleName(span)).toBe('Fallback text content');
-  });
-
-  it('should return false when no accessible name can be determined', () => {
-    document.body.innerHTML = `<div></div>`;
-    const div = document.querySelector('div');
-    expect(getAccessibleName(div)).toBe(false);
-  });
-
-  it('should handle input element with empty title', () => {
-    document.body.innerHTML = `<input type="text" title="">`;
-    const input = document.querySelector('input');
-    expect(getAccessibleName(input)).toBe(false);
-  });
-
-  it('should handle form elements with label', () => {
-    document.body.innerHTML = `
+        const dialog = document.querySelector('[role="dialog"]');
+        expect(getAccessibleName(dialog)).toBe('Confirmation Are you sure you want to continue?');
+    });
+
+    it('should handle text-level elements with content', () => {
+        // Test various text-level elements
+        const textLevelElements = [
+            'em',
+            'strong',
+            'small',
+            'cite',
+            'code',
+            'var',
+            'kbd',
+            'sub',
+            'sup',
+            'i',
+            'b',
+            'u',
+            'mark',
+        ];
+
+        textLevelElements.forEach(tagName => {
+            document.body.innerHTML = `<${tagName}>Important text</${tagName}>`;
+            const element = document.querySelector(tagName);
+            expect(getAccessibleName(element)).toBe('Important text');
+        });
+    });
+
+    it('should handle text-level elements with title fallback', () => {
+        document.body.innerHTML = '<em title="Emphasis title"></em>';
+        const em = document.querySelector('em');
+        expect(getAccessibleName(em)).toBe('Emphasis title');
+    });
+
+    it('should return false for text-level elements without content or title', () => {
+        document.body.innerHTML = '<strong></strong>';
+        const strong = document.querySelector('strong');
+        expect(getAccessibleName(strong)).toBe(false);
+    });
+
+    it('should handle elements with role-based text content', () => {
+        const textRoles = ['button', 'checkbox', 'link', 'menuitem', 'option', 'tab'];
+
+        textRoles.forEach(role => {
+            document.body.innerHTML = `<div role="${role}">Role content</div>`;
+            const element = document.querySelector('div');
+            expect(getAccessibleName(element)).toBe('Role content');
+        });
+    });
+
+    it('should return false for elements with roles but no text content', () => {
+        document.body.innerHTML = '<div role="button"></div>';
+        const element = document.querySelector('div');
+        expect(getAccessibleName(element)).toBe(false);
+    });
+
+    it('should handle input type="button" with value', () => {
+        document.body.innerHTML = '<input type="button" value="Cancel">';
+        const button = document.querySelector('input');
+        expect(getAccessibleName(button)).toBe('Cancel');
+    });
+
+    it('should handle input type="button" with title fallback', () => {
+        document.body.innerHTML = '<input type="button" title="Close Dialog">';
+        const button = document.querySelector('input');
+        expect(getAccessibleName(button)).toBe('Close Dialog');
+    });
+
+    it('should return false for input type="button" without value or title', () => {
+        document.body.innerHTML = '<input type="button">';
+        const button = document.querySelector('input');
+        expect(getAccessibleName(button)).toBe(false);
+    });
+
+    it('should handle input type="reset" with title', () => {
+        document.body.innerHTML = '<input type="reset" title="Clear Form">';
+        const reset = document.querySelector('input');
+        expect(getAccessibleName(reset)).toBe('Clear Form');
+    });
+
+    it('should return default "Reset" for input type="reset" without title', () => {
+        document.body.innerHTML = '<input type="reset">';
+        const reset = document.querySelector('input');
+        expect(getAccessibleName(reset)).toBe('Reset');
+    });
+
+    it('should handle input type="image" with alt attribute', () => {
+        document.body.innerHTML = '<input type="image" alt="Submit Button">';
+        const image = document.querySelector('input');
+        expect(getAccessibleName(image)).toBe('Submit Button');
+    });
+
+    it('should handle input type="image" with value fallback', () => {
+        document.body.innerHTML = '<input type="image" value="Send Message">';
+        const image = document.querySelector('input');
+        expect(getAccessibleName(image)).toBe('Send Message');
+    });
+
+    it('should handle input type="image" with title fallback', () => {
+        document.body.innerHTML = '<input type="image" title="Upload File">';
+        const image = document.querySelector('input');
+        expect(getAccessibleName(image)).toBe('Upload File');
+    });
+
+    it('should return false for input type="image" without alt, value, or title', () => {
+        document.body.innerHTML = '<input type="image">';
+        const image = document.querySelector('input');
+        expect(getAccessibleName(image)).toBe(false);
+    });
+
+    it('should handle button element with title fallback', () => {
+        document.body.innerHTML = '<button title="Submit Form"></button>';
+        const button = document.querySelector('button');
+        expect(getAccessibleName(button)).toBe('Submit Form');
+    });
+
+    it('should return false for button element without content or title', () => {
+        document.body.innerHTML = '<button></button>';
+        const button = document.querySelector('button');
+        expect(getAccessibleName(button)).toBe(false);
+    });
+
+    it('should handle empty aria-label gracefully', () => {
+        document.body.innerHTML = '<button aria-label="">Click Me</button>';
+        const button = document.querySelector('button');
+        expect(getAccessibleName(button)).toBe('Click Me');
+    });
+
+    it('should return false for aria-labelledby with non-existent reference', () => {
+        document.body.innerHTML = '<button aria-labelledby="non-existent">Click Me</button>';
+        const button = document.querySelector('button');
+        expect(getAccessibleName(button)).toBe(false);
+    });
+
+    it('should handle disconnected elements', () => {
+        const div = document.createElement('div');
+        div.textContent = 'Not connected';
+        expect(getAccessibleName(div)).toBe(false);
+    });
+
+    it('should handle invisible elements', () => {
+        document.body.innerHTML = '<div style="display: none;">Hidden content</div>';
+        const div = document.querySelector('div');
+        expect(getAccessibleName(div)).toBe(false);
+    });
+
+    it('should handle elements with aria-hidden="true"', () => {
+        document.body.innerHTML = '<div aria-hidden="true">Hidden from AT</div>';
+        const div = document.querySelector('div');
+        expect(getAccessibleName(div)).toBe(false);
+    });
+
+    it('should handle unlabellable elements', () => {
+        document.body.innerHTML = '<hr>';
+        const hr = document.querySelector('hr');
+        expect(getAccessibleName(hr)).toBe(false);
+    });
+
+    it('should use fallback accessible text for general elements', () => {
+        document.body.innerHTML = '<span>Fallback text content</span>';
+        const span = document.querySelector('span');
+        expect(getAccessibleName(span)).toBe('Fallback text content');
+    });
+
+    it('should return false when no accessible name can be determined', () => {
+        document.body.innerHTML = '<div></div>';
+        const div = document.querySelector('div');
+        expect(getAccessibleName(div)).toBe(false);
+    });
+
+    it('should handle input element with empty title', () => {
+        document.body.innerHTML = '<input type="text" title="">';
+        const input = document.querySelector('input');
+        expect(getAccessibleName(input)).toBe(false);
+    });
+
+    it('should handle form elements with label', () => {
+        document.body.innerHTML = `
       <label for="select-id">Choose option</label>
       <select id="select-id">
         <option>Option 1</option>
       </select>
     `;
-    const select = document.querySelector('select');
-    expect(getAccessibleName(select)).toBe('Choose option');
-  });
-
-  it('should handle form elements without label but with title', () => {
-    document.body.innerHTML = `<select title="Dropdown menu"><option>Option 1</option></select>`;
-    const select = document.querySelector('select');
-    expect(getAccessibleName(select)).toBe('Dropdown menu');
-  });
-
-  it('should return false for form elements without label or title', () => {
-    document.body.innerHTML = `<select><option>Option 1</option></select>`;
-    const select = document.querySelector('select');
-    expect(getAccessibleName(select)).toBe(false);
-  });
-
-  it('should handle object element with title attribute', () => {
-    document.body.innerHTML = `<object data="chart.pdf" type="application/pdf" title="Q4 Sales Report"></object>`;
-    const obj = document.querySelector('object');
-    expect(getAccessibleName(obj)).toBe('Q4 Sales Report');
-  });
-
-  it('should handle object element with fallback content', () => {
-    document.body.innerHTML = `<object data="diagram.svg" type="image/svg+xml"><p>Network architecture diagram</p></object>`;
-    const obj = document.querySelector('object');
-    expect(getAccessibleName(obj)).toBe('Network architecture diagram');
-  });
-
-  it('should handle object element with aria-label', () => {
-    document.body.innerHTML = `<object data="chart.pdf" aria-label="Annual Revenue Chart"></object>`;
-    const obj = document.querySelector('object');
-    expect(getAccessibleName(obj)).toBe('Annual Revenue Chart');
-  });
-
-  it('should return false for object element without accessible name', () => {
-    document.body.innerHTML = `<object data="chart.pdf" type="application/pdf"></object>`;
-    const obj = document.querySelector('object');
-    expect(getAccessibleName(obj)).toBe(false);
-  });
-
-  it('should handle object element with empty title', () => {
-    document.body.innerHTML = `<object data="chart.pdf" title=""></object>`;
-    const obj = document.querySelector('object');
-    expect(getAccessibleName(obj)).toBe(false);
-  });
-
-  it('should handle ARIA meter with aria-label', () => {
-    document.body.innerHTML = `<div role="meter" aria-label="Disk usage" aria-valuenow="75"></div>`;
-    const meter = document.querySelector('[role="meter"]');
-    expect(getAccessibleName(meter)).toBe('Disk usage');
-  });
-
-  it('should handle ARIA meter with title attribute', () => {
-    document.body.innerHTML = `<div role="meter" title="Battery level" aria-valuenow="50"></div>`;
-    const meter = document.querySelector('[role="meter"]');
-    expect(getAccessibleName(meter)).toBe('Battery level');
-  });
-
-  it('should handle native meter with associated label', () => {
-    document.body.innerHTML = `<label for="cpu">CPU usage</label><meter id="cpu" value="0.6">60%</meter>`;
-    const meter = document.querySelector('meter');
-    expect(getAccessibleName(meter)).toBe('CPU usage');
-  });
-
-  it('should handle native meter wrapped in label', () => {
-    document.body.innerHTML = `<label>Memory: <meter value="0.8">80%</meter></label>`;
-    const meter = document.querySelector('meter');
-    expect(getAccessibleName(meter)).toBe('Memory:');
-  });
-
-  it('should return false for meter without accessible name', () => {
-    document.body.innerHTML = `<div role="meter" aria-valuenow="50">50%</div>`;
-    const meter = document.querySelector('[role="meter"]');
-    expect(getAccessibleName(meter)).toBe(false);
-  });
-
-  it('should return false for native meter without label', () => {
-    document.body.innerHTML = `<meter value="0.5">50%</meter>`;
-    const meter = document.querySelector('meter');
-    expect(getAccessibleName(meter)).toBe(false);
-  });
-
-  it('should handle meter with aria-labelledby', () => {
-    document.body.innerHTML = `<span id="signal-label">Signal strength</span><div role="meter" aria-labelledby="signal-label" aria-valuenow="4"></div>`;
-    const meter = document.querySelector('[role="meter"]');
-    expect(getAccessibleName(meter)).toBe('Signal strength');
-  });
-});
+        const select = document.querySelector('select');
+        expect(getAccessibleName(select)).toBe('Choose option');
+    });
+
+    it('should handle form elements without label but with title', () => {
+        document.body.innerHTML =
+            '<select title="Dropdown menu"><option>Option 1</option></select>';
+        const select = document.querySelector('select');
+        expect(getAccessibleName(select)).toBe('Dropdown menu');
+    });
+
+    it('should return false for form elements without label or title', () => {
+        document.body.innerHTML = '<select><option>Option 1</option></select>';
+        const select = document.querySelector('select');
+        expect(getAccessibleName(select)).toBe(false);
+    });
+
+    it('should handle object element with title attribute', () => {
+        document.body.innerHTML =
+            '<object data="chart.pdf" type="application/pdf" title="Q4 Sales Report"></object>';
+        const obj = document.querySelector('object');
+        expect(getAccessibleName(obj)).toBe('Q4 Sales Report');
+    });
+
+    it('should handle object element with fallback content', () => {
+        document.body.innerHTML =
+            '<object data="diagram.svg" type="image/svg+xml"><p>Network architecture diagram</p></object>';
+        const obj = document.querySelector('object');
+        expect(getAccessibleName(obj)).toBe('Network architecture diagram');
+    });
+
+    it('should handle object element with aria-label', () => {
+        document.body.innerHTML =
+            '<object data="chart.pdf" aria-label="Annual Revenue Chart"></object>';
+        const obj = document.querySelector('object');
+        expect(getAccessibleName(obj)).toBe('Annual Revenue Chart');
+    });
+
+    it('should return false for object element without accessible name', () => {
+        document.body.innerHTML = '<object data="chart.pdf" type="application/pdf"></object>';
+        const obj = document.querySelector('object');
+        expect(getAccessibleName(obj)).toBe(false);
+    });
+
+    it('should handle object element with empty title', () => {
+        document.body.innerHTML = '<object data="chart.pdf" title=""></object>';
+        const obj = document.querySelector('object');
+        expect(getAccessibleName(obj)).toBe(false);
+    });
+
+    it('should handle ARIA meter with aria-label', () => {
+        document.body.innerHTML =
+            '<div role="meter" aria-label="Disk usage" aria-valuenow="75"></div>';
+        const meter = document.querySelector('[role="meter"]');
+        expect(getAccessibleName(meter)).toBe('Disk usage');
+    });
+
+    it('should handle ARIA meter with title attribute', () => {
+        document.body.innerHTML =
+            '<div role="meter" title="Battery level" aria-valuenow="50"></div>';
+        const meter = document.querySelector('[role="meter"]');
+        expect(getAccessibleName(meter)).toBe('Battery level');
+    });
+
+    it('should handle native meter with associated label', () => {
+        document.body.innerHTML =
+            '<label for="cpu">CPU usage</label><meter id="cpu" value="0.6">60%</meter>';
+        const meter = document.querySelector('meter');
+        expect(getAccessibleName(meter)).toBe('CPU usage');
+    });
+
+    it('should handle native meter wrapped in label', () => {
+        document.body.innerHTML = '<label>Memory: <meter value="0.8">80%</meter></label>';
+        const meter = document.querySelector('meter');
+        expect(getAccessibleName(meter)).toBe('Memory:');
+    });
+
+    it('should return false for meter without accessible name', () => {
+        document.body.innerHTML = '<div role="meter" aria-valuenow="50">50%</div>';
+        const meter = document.querySelector('[role="meter"]');
+        expect(getAccessibleName(meter)).toBe(false);
+    });
+
+    it('should return false for native meter without label', () => {
+        document.body.innerHTML = '<meter value="0.5">50%</meter>';
+        const meter = document.querySelector('meter');
+        expect(getAccessibleName(meter)).toBe(false);
+    });
+
+    // Subtree image-based accessible name tests
+    it('should get name from img alt text inside a button', () => {
+        document.body.innerHTML = '<button><img src="foo.png" alt="Submit"></button>';
+        const button = document.querySelector('button');
+        expect(getAccessibleName(button)).toBe('Submit');
+    });
+
+    it('should get name from img alt text inside a link', () => {
+        document.body.innerHTML = '<a href="/home"><img src="logo.png" alt="Home"></a>';
+        const link = document.querySelector('a');
+        expect(getAccessibleName(link)).toBe('Home');
+    });
+
+    it('should combine text and img alt text inside a button', () => {
+        document.body.innerHTML = '<button><img src="icon.png" alt="Save"> Document</button>';
+        const button = document.querySelector('button');
+        const name = getAccessibleName(button);
+        expect(name).toContain('Save');
+        expect(name).toContain('Document');
+    });
+
+    it('should combine text and img alt text inside a link', () => {
+        document.body.innerHTML =
+            '<a href="/profile"><img src="avatar.png" alt="User"> Profile</a>';
+        const link = document.querySelector('a');
+        const name = getAccessibleName(link);
+        expect(name).toContain('User');
+        expect(name).toContain('Profile');
+    });
+
+    it('should get name from img alt text inside a role="button" element', () => {
+        document.body.innerHTML = '<div role="button"><img src="play.png" alt="Play"></div>';
+        const div = document.querySelector('div');
+        expect(getAccessibleName(div)).toBe('Play');
+    });
+
+    it('should get name from img alt text inside a role="link" element', () => {
+        document.body.innerHTML = '<div role="link"><img src="ext.png" alt="External Link"></div>';
+        const div = document.querySelector('div');
+        expect(getAccessibleName(div)).toBe('External Link');
+    });
+
+    it('should handle meter with aria-labelledby', () => {
+        document.body.innerHTML =
+            '<span id="signal-label">Signal strength</span><div role="meter" aria-labelledby="signal-label" aria-valuenow="4"></div>';
+        const meter = document.querySelector('[role="meter"]');
+        expect(getAccessibleName(meter)).toBe('Signal strength');
+    });
+});