@afixt/test-utils 1.1.7 → 1.2.0

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/stringUtils.js

@@ -14,7 +14,7 @@ const stringUtils = (function () {
      * @returns {boolean} Whether the value is a string.
      */
     function isString(str) {
-        return typeof str === "string" || str instanceof String;
+        return typeof str === 'string' || str instanceof String;
     }
 
     /**
@@ -32,7 +32,7 @@ const stringUtils = (function () {
      * @returns {boolean}
      */
     function isNormalInteger(str) {
-        const n = ~~Number(str);
+        const n = Math.trunc(Number(str));
         return String(n) === str && n >= 0;
     }
 
@@ -49,14 +49,11 @@ const stringUtils = (function () {
         let char;
         let isUpper = true;
 
-        str = str.replace(/[^\w\s]|_/g, "").replace(/\s+/g, " ");
+        str = str.replace(/[^\w\s]|_/g, '').replace(/\s+/g, ' ');
 
         while (i <= str.length) {
             char = str.charAt(i);
-            if (
-                char.trim() !== "" &&
-                false === (!isNaN(parseFloat(char)) && isFinite(char))
-            ) {
+            if (char.trim() !== '' && false === (!isNaN(parseFloat(char)) && isFinite(char))) {
                 if (char === char.toLowerCase()) {
                     isUpper = false;
                 }
@@ -94,14 +91,15 @@ const stringUtils = (function () {
      * @returns {string} A string containing all concatenated text content from the element.
      */
     function getAllText(el) {
-        const walker = document.createTreeWalker(
-            el,
-            NodeFilter.SHOW_ALL,
-            null,
-            false
-        );
+        // Check for form element value (input, textarea, select)
+        if (el.value !== undefined && el.value !== '') {
+            return el.value;
+        }
+
+        const walker = document.createTreeWalker(el, NodeFilter.SHOW_ALL, null, false);
         const textNodes = [];
-        let node, text;
+        let node;
+        let text;
 
         while (walker.nextNode()) {
             node = walker.currentNode;
@@ -113,15 +111,15 @@ const stringUtils = (function () {
                     textNodes.push(node.textContent.trim());
                 }
             } else if (node.nodeType === Node.ELEMENT_NODE) {
-                if (node.hasAttribute("aria-label")) {
-                    textNodes.push(node.getAttribute("aria-label"));
-                } else if (node.tagName === "IMG" && node.hasAttribute("alt")) {
-                    textNodes.push(node.getAttribute("alt"));
+                if (node.hasAttribute('aria-label')) {
+                    textNodes.push(node.getAttribute('aria-label'));
+                } else if (node.tagName === 'IMG' && node.hasAttribute('alt')) {
+                    textNodes.push(node.getAttribute('alt'));
                 }
             }
         }
 
-        return textNodes.join(" ");
+        return textNodes.join(' ');
     }
 
     /**
@@ -131,7 +129,7 @@ const stringUtils = (function () {
      * @returns {boolean} True if the element contains text, false otherwise.
      */
     function hasText(element) {
-        return getAllText(element).trim() !== "";
+        return getAllText(element).trim() !== '';
     }
 
     return {
@@ -143,7 +141,7 @@ const stringUtils = (function () {
         isAlphaNumeric,
         getPathFromUrl,
         getAllText,
-        hasText
+        hasText,
     };
 })();
 

package/src/testContrast.js

@@ -1,13 +1,21 @@
 /**
  * Get the computed background color for an element.
  * @param  {Element} el - the element to be tested
+ * @param  {Object} [options] - Configuration options
+ * @param  {string} [options.fallbackColor='rgb(255, 255, 255)'] - Color to use when background can't be determined
+ * @param  {boolean} [options.skipBackgroundImages=true] - If true (default), return false for background images. If false, use fallbackColor instead.
  * @returns {string|boolean} background color or false
  */
-function getComputedBackgroundColor(el) {
+function getComputedBackgroundColor(el, options) {
     if (!window.getComputedStyle || !el || el.nodeType === 9) {
         return false;
     }
 
+    const opts = options || {};
+    const fallbackColor = opts.fallbackColor || 'rgb(255, 255, 255)';
+    const skipBackgroundImages =
+        opts.skipBackgroundImages !== undefined ? opts.skipBackgroundImages : true;
+
     const styles = window.getComputedStyle(el);
     if (!styles) {
         return false;
@@ -17,12 +25,18 @@ function getComputedBackgroundColor(el) {
     if (bgImage === 'none') {
         const bgColor = styles.getPropertyValue('background-color');
 
-        if (bgColor === 'rgba(0, 0, 0, 0)' && el.parentElement) {
-            return getComputedBackgroundColor(el.parentElement);
+        if (bgColor === 'rgba(0, 0, 0, 0)') {
+            if (el.parentElement) {
+                return getComputedBackgroundColor(el.parentElement, options);
+            }
+            return opts.fallbackColor !== undefined ? fallbackColor : false;
         }
 
         return bgColor;
     } else {
+        if (!skipBackgroundImages) {
+            return fallbackColor;
+        }
         return false;
     }
 }
@@ -40,9 +54,9 @@ function luminance(R8bit, G8bit, B8bit) {
     const GsRGB = G8bit / 255;
     const BsRGB = B8bit / 255;
 
-    const R = (RsRGB <= 0.03928) ? RsRGB / 12.92 : Math.pow((RsRGB + 0.055) / 1.055, 2.4);
-    const G = (GsRGB <= 0.03928) ? GsRGB / 12.92 : Math.pow((GsRGB + 0.055) / 1.055, 2.4);
-    const B = (BsRGB <= 0.03928) ? BsRGB / 12.92 : Math.pow((BsRGB + 0.055) / 1.055, 2.4);
+    const R = RsRGB <= 0.03928 ? RsRGB / 12.92 : Math.pow((RsRGB + 0.055) / 1.055, 2.4);
+    const G = GsRGB <= 0.03928 ? GsRGB / 12.92 : Math.pow((GsRGB + 0.055) / 1.055, 2.4);
+    const B = BsRGB <= 0.03928 ? BsRGB / 12.92 : Math.pow((BsRGB + 0.055) / 1.055, 2.4);
 
     // For the sRGB colorspace, the relative luminance of a color is defined as:
     const L = 0.2126 * R + 0.7152 * G + 0.0722 * B;
@@ -50,6 +64,24 @@ function luminance(R8bit, G8bit, B8bit) {
     return L;
 }
 
+/**
+ * Calculate relative luminance from an RGB object.
+ * Wrapper around luminance() that accepts an object instead of three separate arguments.
+ * @param {{ r: number, g: number, b: number }} rgb - Object with r, g, b properties (0-255)
+ * @returns {number|null} Relative luminance value (0-1) or null if input is invalid
+ */
+function getRelativeLuminance(rgb) {
+    if (
+        !rgb ||
+        typeof rgb.r !== 'number' ||
+        typeof rgb.g !== 'number' ||
+        typeof rgb.b !== 'number'
+    ) {
+        return null;
+    }
+    return luminance(rgb.r, rgb.g, rgb.b);
+}
+
 /**
  * Parse an RGB or RGBA color string into its components
  * @param  {string} rgb - RGB(A) color string (e.g., "rgb(255, 0, 0)" or "rgba(255, 0, 0, 0.5)")
@@ -60,6 +92,57 @@ function parseRGB(rgb) {
     return rgbvals;
 }
 
+/**
+ * Parse an RGB/RGBA color string into a structured object.
+ * @param {string} colorStr - e.g., 'rgb(255, 128, 0)' or 'rgba(255, 128, 0, 0.5)'
+ * @returns {{ r: number, g: number, b: number, a?: number } | null}
+ */
+function parseColor(colorStr) {
+    if (!colorStr) {
+        return null;
+    }
+
+    const match = parseRGB(colorStr);
+    if (!match) {
+        return null;
+    }
+
+    const result = {
+        r: parseInt(match[1], 10),
+        g: parseInt(match[2], 10),
+        b: parseInt(match[3], 10),
+    };
+
+    if (match[4] !== undefined) {
+        result.a = parseFloat(match[4]);
+    }
+
+    return result;
+}
+
+/**
+ * Calculate contrast ratio between two color strings.
+ * @param {string} color1 - e.g., 'rgb(0, 0, 0)'
+ * @param {string} color2 - e.g., 'rgb(255, 255, 255)'
+ * @returns {number|null} Contrast ratio (1 to 21) or null if colors can't be parsed
+ */
+function getContrastRatio(color1, color2) {
+    const c1 = parseColor(color1);
+    const c2 = parseColor(color2);
+
+    if (!c1 || !c2) {
+        return null;
+    }
+
+    const lum1 = luminance(c1.r, c1.g, c1.b);
+    const lum2 = luminance(c2.r, c2.g, c2.b);
+
+    const lighter = Math.max(lum1, lum2);
+    const darker = Math.min(lum1, lum2);
+
+    return Math.round(((lighter + 0.05) / (darker + 0.05)) * 100) / 100;
+}
+
 /**
  * Calculate color contrast ratio between foreground and background
  * @param  {Element} el - DOM element to check
@@ -105,7 +188,7 @@ function getColorContrast(el) {
         lighter = fgLuminance;
     }
 
-    return Math.round((lighter + 0.05) / (darker + 0.05) * 100) / 100;
+    return Math.round(((lighter + 0.05) / (darker + 0.05)) * 100) / 100;
 }
 
 /**
@@ -132,10 +215,11 @@ function testContrast(el, options = { level: 'AA' }) {
 
     // Check if element is offscreen
     const rect = el.getBoundingClientRect();
-    const selfOffscreen = rect.left + rect.width <= 0 ||
-                          rect.top + rect.height <= 0 ||
-                          rect.left >= window.innerWidth ||
-                          rect.top >= window.innerHeight;
+    const selfOffscreen =
+        rect.left + rect.width <= 0 ||
+        rect.top + rect.height <= 0 ||
+        rect.left >= window.innerWidth ||
+        rect.top >= window.innerHeight;
 
     // Get direct text (excluding child elements)
     let selfDirectText = '';
@@ -157,14 +241,6 @@ function testContrast(el, options = { level: 'AA' }) {
         return true;
     }
 
-    // JSDOM Test Compatibility: Handle test case for identical colors
-    if (selfFG === selfBG || (selfFG === 'rgb(0, 0, 0)' && selfBG === 'rgb(0, 0, 0)')) {
-        // Special case for test
-        if (el.textContent === 'Test text') {
-            return false;
-        }
-    }
-
     // Determine the contrast required based on the level passed to the function
     if (level === 'AA') {
         if (selfSize < 18) {
@@ -209,8 +285,10 @@ function testContrast(el, options = { level: 'AA' }) {
         // Only test contrast if there's a difference between the element and its parent
         // in terms of colors, font size, or font weight
         if (
-            (selfFG !== parentFG || selfBG !== parentBG) ||
-            (selfSize !== parentSize || selfWeight !== parentWeight)
+            selfFG !== parentFG ||
+            selfBG !== parentBG ||
+            selfSize !== parentSize ||
+            selfWeight !== parentWeight
         ) {
             const contrast = getColorContrast(el);
 
@@ -237,5 +315,8 @@ module.exports = {
     getComputedBackgroundColor,
     luminance,
     parseRGB,
-    getColorContrast
+    parseColor,
+    getRelativeLuminance,
+    getContrastRatio,
+    getColorContrast,
 };