@afixt/test-utils 1.2.1 → 1.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@afixt/test-utils",
-    "version": "1.2.1",
+    "version": "1.2.2",
     "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/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');