@afixt/test-utils 1.1.8 → 1.2.0

package/.claude/settings.local.json

@@ -19,7 +19,11 @@
       "Bash(npx vitest run:*)",
       "Bash(1)",
       "Bash(npm run test:playwright:css:*)",
-      "Bash(gh run list:*)"
+      "Bash(gh run list:*)",
+      "Bash(gh pr create:*)",
+      "Bash(git checkout:*)",
+      "Bash(git pull:*)",
+      "Bash(git merge:*)"
     ]
   },
   "enableAllProjectMcpServers": false

package/.github/workflows/pr-check.yml

@@ -0,0 +1,88 @@
+name: PR Check
+
+on:
+  pull_request:
+    branches: [main, develop]
+
+permissions:
+  contents: read
+
+jobs:
+  validate-workflows:
+    name: Validate GitHub Actions Workflows
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Validate workflow syntax
+        run: |
+          echo "Validating GitHub Actions workflow files..."
+          errors=0
+
+          for f in .github/workflows/*.yml .github/workflows/*.yaml; do
+            [ -f "$f" ] || continue
+            echo "Checking $f..."
+
+            # Basic YAML syntax check
+            if ! python3 -c "import yaml; yaml.safe_load(open('$f'))" 2>/dev/null; then
+              echo "ERROR: Invalid YAML in $f"
+              errors=$((errors + 1))
+            fi
+
+            # Check for required 'on' and 'jobs' keys
+            if ! grep -q '^on:' "$f" && ! grep -q "^'on':" "$f" && ! grep -q '^"on":' "$f"; then
+              echo "WARNING: Missing 'on' trigger in $f"
+            fi
+
+            if ! grep -q '^jobs:' "$f"; then
+              echo "WARNING: Missing 'jobs' section in $f"
+            fi
+          done
+
+          if [ $errors -gt 0 ]; then
+            echo "Found $errors workflow file(s) with errors"
+            exit 1
+          fi
+
+          echo "All workflow files are valid"
+
+  ci-check:
+    name: CI Readiness Check
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Detect project type
+        id: detect
+        run: |
+          if [ -f "package.json" ]; then
+            echo "type=node" >> $GITHUB_OUTPUT
+          elif [ -f "requirements.txt" ] || [ -f "pyproject.toml" ]; then
+            echo "type=python" >> $GITHUB_OUTPUT
+          else
+            echo "type=other" >> $GITHUB_OUTPUT
+          fi
+
+      - name: Setup Node.js
+        if: steps.detect.outputs.type == 'node'
+        uses: actions/setup-node@v4
+        with:
+          node-version: 'lts/*'
+          cache: 'npm'
+
+      - name: Install dependencies
+        if: steps.detect.outputs.type == 'node'
+        run: npm ci --ignore-scripts
+        continue-on-error: true
+
+      - name: Run lint check
+        if: steps.detect.outputs.type == 'node'
+        run: npm run lint --if-present
+        continue-on-error: true
+
+      - name: Run tests
+        if: steps.detect.outputs.type == 'node'
+        run: npm test --if-present
+        continue-on-error: true

package/.github/workflows/security.yml

@@ -5,9 +5,6 @@ on:
     branches: [main, develop]
   pull_request:
     branches: [main, develop]
-  schedule:
-    # Run comprehensive scan every Sunday at midnight
-    - cron: '0 0 * * 0'
   workflow_dispatch:
 
 permissions:

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@afixt/test-utils",
-    "version": "1.1.8",
+    "version": "1.2.0",
     "description": "Various utilities for accessibility testing",
     "main": "src/index.js",
     "scripts": {

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,
 };