@afixt/test-utils 2.1.1 → 2.2.0

package/test/isHidden.test.js

@@ -240,6 +240,24 @@ describe('isHidden', () => {
         expect(isHidden(element, { checkDimensions: true })).toBe(true);
     });
 
+    it('should return false for elements with hidden="until-found"', () => {
+        const element = document.createElement('div');
+        element.setAttribute('hidden', 'until-found');
+        document.body.appendChild(element);
+
+        // hidden="until-found" is NOT fully hidden — content is findable by
+        // browser Find-in-Page and may be accessible to AT
+        expect(isHidden(element)).toBe(false);
+    });
+
+    it('should return true for elements with plain hidden attribute (empty string)', () => {
+        const element = document.createElement('div');
+        element.setAttribute('hidden', '');
+        document.body.appendChild(element);
+
+        expect(isHidden(element)).toBe(true);
+    });
+
     it('should detect visibility:hidden applied via CSS class', () => {
         // Arrange
         const style = document.createElement('style');

package/test/playwright/colon-id-a11y-visible.spec.js

@@ -0,0 +1,160 @@
+/**
+ * Playwright tests for isA11yVisible with colon-containing IDs
+ *
+ * Issue #61: CSS.escape is needed when building attribute selectors from
+ * element IDs. Colons in IDs (e.g. Radix UI "radix-:rj:-tab-account")
+ * break unescaped CSS selectors.
+ *
+ * Run with: npm run test:playwright:css
+ */
+
+const { test, expect } = require('@playwright/test');
+const path = require('path');
+
+test.describe('isA11yVisible with colon-containing IDs', () => {
+    test.beforeEach(async ({ page }) => {
+        const fixturePath = path.join(__dirname, 'fixtures', 'colon-id-a11y-visible.html');
+        await page.goto(`file://${fixturePath}`);
+
+        // Inject browser-compatible isA11yVisible (mirrors src/isA11yVisible.js)
+        await page.addScriptTag({
+            content: `
+                const NON_VISIBLE_SELECTORS = [
+                    'base','head','meta','title','link','style','script','br','nobr',
+                    'col','embed','input[type="hidden"]','keygen','source','track',
+                ];
+
+                function isHidden(element, options) {
+                    if (!element || !(element instanceof Element)) return false;
+                    options = options || {};
+                    if (element.hasAttribute('hidden')) return true;
+                    const style = window.getComputedStyle(element);
+                    if (style.display === 'none') return true;
+                    if (style.visibility === 'hidden') return true;
+                    if (options.checkOpacity && style.opacity === '0') return true;
+                    return false;
+                }
+
+                function isA11yVisible(element, strict) {
+                    if (strict === undefined) strict = false;
+                    if (!element || !(element instanceof Element)) return false;
+                    if (!element.isConnected) return false;
+
+                    const id = element.id;
+                    let visible = true;
+
+                    if (NON_VISIBLE_SELECTORS.some(function(s) { return element.matches(s); })) {
+                        return true;
+                    }
+
+                    function optionalAriaHidden(el, strictCheck) {
+                        return strictCheck && el.getAttribute('aria-hidden') === 'true';
+                    }
+
+                    if (isHidden(element, { checkOpacity: true })) {
+                        visible = false;
+                    } else {
+                        let parent = element.parentElement;
+                        while (parent) {
+                            const style = window.getComputedStyle(parent);
+                            if (style.display === 'none' || style.visibility === 'hidden' || style.opacity === '0') {
+                                visible = false;
+                                break;
+                            }
+                            parent = parent.parentElement;
+                        }
+                    }
+
+                    if (visible && optionalAriaHidden(element, strict)) {
+                        visible = false;
+                    }
+
+                    if (id) {
+                        document
+                            .querySelectorAll(
+                                '*[aria-labelledby~="' + CSS.escape(id) + '"], *[aria-describedby~="' + CSS.escape(id) + '"]'
+                            )
+                            .forEach(function(referencingElement) {
+                                if (window.getComputedStyle(referencingElement).display !== 'none') {
+                                    visible = true;
+                                }
+                            });
+                    }
+
+                    if (visible && strict) {
+                        let parent = element.parentElement;
+                        while (parent) {
+                            if (optionalAriaHidden(parent, strict)) {
+                                visible = false;
+                                break;
+                            }
+                            parent = parent.parentElement;
+                        }
+                    }
+
+                    return visible;
+                }
+
+                window.isA11yVisible = isA11yVisible;
+            `,
+        });
+    });
+
+    test('baseline: hidden element with simple ID referenced by aria-labelledby is AT-visible', async ({
+        page,
+    }) => {
+        const result = await page.evaluate(() => {
+            const el = document.getElementById('simple-label');
+            return window.isA11yVisible(el);
+        });
+        expect(result).toBe(true);
+    });
+
+    test('hidden element with colon ID referenced by aria-labelledby is AT-visible', async ({
+        page,
+    }) => {
+        const result = await page.evaluate(() => {
+            const el = document.getElementById('radix-:rj:-tab-account');
+            return window.isA11yVisible(el);
+        });
+        expect(result).toBe(true);
+    });
+
+    test('hidden element with colon ID referenced by aria-describedby is AT-visible', async ({
+        page,
+    }) => {
+        const result = await page.evaluate(() => {
+            const el = document.getElementById('desc-:r1:-help');
+            return window.isA11yVisible(el);
+        });
+        expect(result).toBe(true);
+    });
+
+    test('hidden element with multiple colons in ID referenced by aria-labelledby is AT-visible', async ({
+        page,
+    }) => {
+        const result = await page.evaluate(() => {
+            const el = document.getElementById('ns:component:instance:42');
+            return window.isA11yVisible(el);
+        });
+        expect(result).toBe(true);
+    });
+
+    test('visible element with colon ID (no aria reference) is AT-visible', async ({ page }) => {
+        const result = await page.evaluate(() => {
+            const el = document.getElementById('colon:visible');
+            return window.isA11yVisible(el);
+        });
+        expect(result).toBe(true);
+    });
+
+    test('hidden element with colon ID and no aria reference is NOT AT-visible', async ({
+        page,
+    }) => {
+        const result = await page.evaluate(() => {
+            const el = document.getElementById('colon:hidden');
+            return window.isA11yVisible(el);
+        });
+        expect(result).toBe(false);
+    });
+});

package/test/playwright/fixtures/colon-id-a11y-visible.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>isA11yVisible - Colon ID Test Fixtures</title>
+  <style>
+    .sr-only {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
+    }
+  </style>
+</head>
+<body>
+  <!-- Standard ID: baseline reference -->
+  <span id="simple-label" class="sr-only" style="display:none">Account settings</span>
+  <button aria-labelledby="simple-label">Settings</button>
+
+  <!-- Colon-containing ID: Radix UI style -->
+  <span id="radix-:rj:-tab-account" class="sr-only" style="display:none">Account tab</span>
+  <button aria-labelledby="radix-:rj:-tab-account">Account</button>
+
+  <!-- Colon-containing ID: aria-describedby -->
+  <span id="desc-:r1:-help" class="sr-only" style="display:none">Help text for input</span>
+  <input aria-describedby="desc-:r1:-help" type="text" />
+
+  <!-- Multiple colons -->
+  <span id="ns:component:instance:42" class="sr-only" style="display:none">Namespaced label</span>
+  <div aria-labelledby="ns:component:instance:42">Namespaced widget</div>
+
+  <!-- Visible element with colon ID (no aria reference, just visible) -->
+  <div id="colon:visible">Visible colon ID</div>
+
+  <!-- Hidden element with colon ID, no aria reference (should be hidden) -->
+  <div id="colon:hidden" style="display:none">Hidden colon ID</div>
+
+  <script>
+    window.testReady = true;
+  </script>
+</body>
+</html>

package/test/testContrast.test.js

@@ -95,18 +95,18 @@ describe('testContrast', () => {
         expect(testContrast(div)).toBe(true);
     });
 
-    it('should skip elements with a background image', () => {
+    it('should return null for elements with a background image (cannot determine)', () => {
         const div = document.createElement('div');
         div.textContent = 'Text with background image';
         div.style.color = 'rgb(0, 0, 0)';
         div.style.backgroundImage = 'url(image.jpg)';
         document.body.appendChild(div);
 
-        // Should skip because contrast can't be reliably tested against background images
-        expect(testContrast(div)).toBe(true);
+        // Should return null because contrast can't be reliably tested against background images
+        expect(testContrast(div)).toBe(null);
     });
 
-    it('should skip elements whose ancestor has a background image', () => {
+    it('should return null for elements whose ancestor has a background image (cannot determine)', () => {
         const parent = document.createElement('div');
         parent.style.backgroundImage = 'url(bg.jpg)';
 
@@ -118,7 +118,7 @@ describe('testContrast', () => {
         parent.appendChild(child);
         document.body.appendChild(parent);
 
-        expect(testContrast(child)).toBe(true);
+        expect(testContrast(child)).toBe(null);
     });
 
     it('should not skip elements with opaque background over ancestor background image', () => {
@@ -138,6 +138,43 @@ describe('testContrast', () => {
         expect(testContrast(child)).toBe(true);
     });
 
+    it('should return null for elements with CSS filter (cannot determine)', () => {
+        const div = document.createElement('div');
+        div.textContent = 'Filtered text';
+        div.style.color = 'rgb(0, 0, 0)';
+        div.style.backgroundColor = 'rgb(255, 255, 255)';
+        div.style.filter = 'brightness(0.5)';
+        document.body.appendChild(div);
+
+        expect(testContrast(div)).toBe(null);
+    });
+
+    it('should return null for elements with mix-blend-mode (cannot determine)', () => {
+        const div = document.createElement('div');
+        div.textContent = 'Blended text';
+        div.style.color = 'rgb(0, 0, 0)';
+        div.style.backgroundColor = 'rgb(255, 255, 255)';
+        div.style.mixBlendMode = 'multiply';
+        document.body.appendChild(div);
+
+        expect(testContrast(div)).toBe(null);
+    });
+
+    it('should return null when ancestor has CSS filter (cannot determine)', () => {
+        const parent = document.createElement('div');
+        parent.style.filter = 'invert(1)';
+
+        const child = document.createElement('div');
+        child.textContent = 'Child of filtered parent';
+        child.style.color = 'rgb(0, 0, 0)';
+        child.style.backgroundColor = 'rgb(255, 255, 255)';
+
+        parent.appendChild(child);
+        document.body.appendChild(parent);
+
+        expect(testContrast(child)).toBe(null);
+    });
+
     it('should handle invisible elements', () => {
         const div = document.createElement('div');
         div.textContent = 'Hidden text';