@afixt/test-utils 1.1.6 → 1.1.8

package/src/getAccessibleText.js

@@ -1,7 +1,9 @@
-const { isEmpty } = require("./stringUtils.js");
+const { isEmpty } = require('./stringUtils.js');
 
 /**
  * Get all accessible text for an element, including aria-labels and content from children.
+ * Traverses the DOM subtree collecting text from text nodes, img alt attributes,
+ * and input[type="image"] alt attributes.
  * @param {Element} el - The DOM element.
  * @returns {string} The accessible text.
  */
@@ -13,55 +15,82 @@ function getAccessibleText(el) {
     if (!el.isConnected) {
         return '';
     }
-    
-    let textContent = "";
-    
-    // Check for element's own text content
-    if (el.textContent) {
-        textContent = el.textContent.trim();
-    }
-    
-    // Check for aria-label
-    if (el.hasAttribute("aria-label")) {
-        const ariaLabel = el.getAttribute("aria-label").trim();
+
+    // Check for aria-label first (highest priority)
+    if (el.hasAttribute('aria-label')) {
+        const ariaLabel = el.getAttribute('aria-label').trim();
         if (ariaLabel) {
-            // Prioritize aria-label if present
             return ariaLabel;
         }
     }
-    
-    // Check for img alt text
-    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();
     }
-    
-    // Handle other elements by getting visible text
-    if (!textContent) {
-        const walker = document.createTreeWalker(
-            el, 
-            NodeFilter.SHOW_TEXT, 
-            {
-                acceptNode: function (node) {
-                    // Only accept non-empty text nodes
-                    return node.nodeType === Node.TEXT_NODE && !isEmpty(node.nodeValue)
-                        ? NodeFilter.FILTER_ACCEPT
-                        : NodeFilter.FILTER_REJECT;
-                },
+
+    // Collect accessible text from the subtree, including text nodes
+    // and alt text from embedded images
+    const parts = collectSubtreeText(el);
+    return parts.join(' ').replace(/\s+/g, ' ').trim();
+}
+
+/**
+ * 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.
+ * @returns {string[]} Array of text parts found in the subtree.
+ */
+function collectSubtreeText(node) {
+    const parts = [];
+
+    for (let child = node.firstChild; child; child = child.nextSibling) {
+        if (child.nodeType === Node.TEXT_NODE) {
+            const text = child.nodeValue.trim();
+            if (!isEmpty(text)) {
+                parts.push(text);
+            }
+        } 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);
+                }
+                continue;
             }
-        );
-        
-        let textNodes = [];
-        let node;
-        
-        while ((node = walker.nextNode())) {
-            textNodes.push(node.nodeValue.trim());
+
+            // 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;
+            }
+
+            // Recurse into other element children
+            parts.push(...collectSubtreeText(child));
         }
-        
-        textContent = textNodes.join(" ").trim();
     }
-    
-    return textContent;
+
+    return parts;
 }
 
 // Export for CommonJS module usage
-module.exports = { getAccessibleText };
+module.exports = { getAccessibleText };

package/src/getCSSGeneratedContent.js

@@ -1,67 +1,42 @@
 /**
  * Gets the CSS generated content for an element's ::before or ::after pseudo-elements.
- * Unlike getGeneratedContent, this function focuses only on CSS-generated content
- * and does not include the element's own text content.
- * 
+ * This function only checks for content added via the CSS `content` property,
+ * not the element's own text content.
+ *
  * @param {Element} el - The DOM element to check
  * @param {string} [pseudoElement='both'] - Which pseudo-element to check ('before', 'after', or 'both')
  * @returns {string|boolean} The generated content as a string or false if none exists
  */
 function getCSSGeneratedContent(el, pseudoElement = 'both') {
     if (!el) return false;
-    
-    // jsdom doesn't fully support getComputedStyle for pseudo-elements
-    // This is test code to make the tests pass in the JSDOM environment
-    if (typeof window !== 'undefined' && window.document && el.classList) {
-        if (pseudoElement === 'before' || pseudoElement === 'both') {
-            if (el.classList.contains('with-before')) return 'Before Content';
-            if (el.classList.contains('with-both')) return pseudoElement === 'both' ? 'Before Text After Text' : 'Before Text';
-            if (el.classList.contains('with-quotes')) return 'Quoted Text';
-            if (el.classList.contains('url-content')) return 'url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7")';
-        }
-
-        if (pseudoElement === 'after' || pseudoElement === 'both') {
-            if (el.classList.contains('with-after')) return 'After Content';
-            if (el.classList.contains('with-both') && pseudoElement === 'after') return 'After Text';
-        }
-
-        // If element has classList but no special test classes, we're in JSDOM without mocked getComputedStyle
-        // Return false early to avoid JSDOM errors being logged
-        return false;
-    }
 
-    try {
-        // This would be the actual implementation for browsers
-        let content = '';
+    let content = '';
 
-        if (pseudoElement === 'before' || pseudoElement === 'both') {
-            const style = window.getComputedStyle(el, '::before');
-            const before = style.getPropertyValue('content');
-            if (before && before !== 'none' && before !== 'normal') {
-                // Remove quotes if present
-                const cleanBefore = before.replace(/^["'](.*)["']$/, '$1');
-                if (cleanBefore) {
-                    content += cleanBefore;
-                }
+    if (pseudoElement === 'before' || pseudoElement === 'both') {
+        const style = window.getComputedStyle(el, '::before');
+        const before = style.getPropertyValue('content');
+        if (before && before !== 'none' && before !== 'normal' && before !== '""' && before !== "''") {
+            // Remove surrounding quotes if present
+            const cleanBefore = before.replace(/^["'](.*)["']$/, '$1');
+            if (cleanBefore) {
+                content += cleanBefore;
             }
         }
+    }
 
-        if (pseudoElement === 'after' || pseudoElement === 'both') {
-            const style = window.getComputedStyle(el, '::after');
-            const after = style.getPropertyValue('content');
-            if (after && after !== 'none' && after !== 'normal') {
-                // Remove quotes if present
-                const cleanAfter = after.replace(/^["'](.*)["']$/, '$1');
-                if (cleanAfter) {
-                    content += (content ? ' ' : '') + cleanAfter;
-                }
+    if (pseudoElement === 'after' || pseudoElement === 'both') {
+        const style = window.getComputedStyle(el, '::after');
+        const after = style.getPropertyValue('content');
+        if (after && after !== 'none' && after !== 'normal' && after !== '""' && after !== "''") {
+            // Remove surrounding quotes if present
+            const cleanAfter = after.replace(/^["'](.*)["']$/, '$1');
+            if (cleanAfter) {
+                content += (content ? ' ' : '') + cleanAfter;
             }
         }
-
-        return content ? content.trim() : false;
-    } catch (error) {
-        return false;
     }
+
+    return content ? content.trim() : false;
 }
 
 module.exports = {

package/src/hasCSSGeneratedContent.js

@@ -1,21 +1,21 @@
 
-const { getGeneratedContent } = require('./getGeneratedContent.js');
+const { getCSSGeneratedContent } = require('./getCSSGeneratedContent.js');
 
 /**
- * Checks if an element has CSS generated content in its ::before or ::after pseudo-elements
- * or text content.
+ * Checks if an element has CSS generated content in its ::before or ::after pseudo-elements.
+ * This only checks for content added via the CSS `content` property, not regular HTML text content.
  *
- * @param {HTMLElement} el - The element to check for generated content.
- * @returns {boolean} True if the element has any generated content, otherwise false.
+ * @param {HTMLElement} el - The element to check for CSS-generated content.
+ * @returns {boolean} True if the element has CSS-generated content, otherwise false.
  */
 function hasCSSGeneratedContent(el) {
     if (!el) return false;
-    
-    // Use getGeneratedContent and convert its result to a boolean
-    const content = getGeneratedContent(el);
-    
-    // getGeneratedContent returns either a string or false
-    // We want to return true if content exists, false otherwise
+
+    // Use getCSSGeneratedContent which only checks ::before and ::after pseudo-elements
+    const content = getCSSGeneratedContent(el);
+
+    // getCSSGeneratedContent returns either a string or false
+    // We want to return true if CSS-generated content exists, false otherwise
     return content !== false;
 }