@afixt/test-utils 1.1.5 → 1.1.7

package/package.json

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

package/src/getAccessibleName.js

@@ -336,6 +336,50 @@ function getAccessibleName(element) {
         // So we don't return false here - let it fall through
     }
 
+    // STEP 11-4: meter element (native or role="meter")
+    // Per Axe aria-meter-name rule, meter elements need accessible name from
+    // aria-labelledby, aria-label (handled above), title, or associated label
+    // Text content inside meter is NOT a valid accessible name (it's fallback content)
+    // STEP 11-4.1: use title attribute
+    // STEP 11-4.2: for native meter, use associated label
+    // STEP 11-4.3: return false (don't use text content)
+    if (element.tagName.toLowerCase() === "meter" || element.getAttribute("role") === "meter") {
+        if (element.hasAttribute("title")) {
+            const titleValue = element.getAttribute("title");
+            if (strlen(titleValue) > 0) {
+                return titleValue;
+            }
+        }
+
+        // For native meter elements, check for associated label
+        if (element.tagName.toLowerCase() === "meter") {
+            // Check for label with for attribute
+            if (element.id) {
+                const label = document.querySelector('label[for="' + element.id + '"]');
+                if (label && strlen(getAccessibleText(label)) > 0) {
+                    return getAccessibleText(label);
+                }
+            }
+
+            // Check for wrapping label
+            const parentLabel = element.closest("label");
+            if (parentLabel) {
+                // Get label text excluding the meter's own content
+                const clone = parentLabel.cloneNode(true);
+                const meterInClone = clone.querySelector("meter");
+                if (meterInClone) {
+                    meterInClone.remove();
+                }
+                if (strlen(clone.textContent) > 0) {
+                    return clone.textContent.trim();
+                }
+            }
+        }
+
+        // Meter text content is not an accessible name, return false
+        return false;
+    }
+
     // STEP 12: table element
     // STEP 12.1: caption element
     // STEP 12.2: use the title attribute
@@ -392,6 +436,27 @@ function getAccessibleName(element) {
         }
     }
 
+    // STEP 15: Landmark elements that require explicit accessible names
+    // Navigation landmarks (nav elements and role="navigation") should NOT get
+    // their accessible name from text content - they require explicit labeling
+    // via aria-labelledby, aria-label, or title attribute.
+    // Since steps 1 & 2 already checked aria-labelledby and aria-label,
+    // we only need to check title here, then return false.
+    const isNavigation = element.tagName.toLowerCase() === "nav" ||
+        element.getAttribute("role") === "navigation";
+
+    if (isNavigation) {
+        // Title attribute is valid for navigation landmarks
+        if (element.hasAttribute("title")) {
+            const titleValue = element.getAttribute("title");
+            if (strlen(titleValue) > 0) {
+                return titleValue;
+            }
+        }
+        // Navigation landmarks do not get accessible name from text content
+        return false;
+    }
+
     // Absolute last ditch for the whole plugin:
     // use the accessible text from the element itself.
     if (strlen(getAccessibleText(element)) > 0) {
@@ -414,9 +479,11 @@ function isNotVisible(element) {
     if (!element) return true;
 
     // These elements are inherently not visible
+    // Note: 'area' is NOT included here because area elements DO have accessible names
+    // via the alt attribute and should participate in accessible name calculation
     const nonVisibleSelectors = [
         'base', 'head', 'meta', 'title', 'link', 'style', 'script', 'br', 'nobr', 'col', 'embed',
-        'input[type="hidden"]', 'keygen', 'source', 'track', 'wbr', 'datalist', 'area', 'param', 'noframes', 'ruby > rp'
+        'input[type="hidden"]', 'keygen', 'source', 'track', 'wbr', 'datalist', 'param', 'noframes', 'ruby > rp'
     ];
 
     if (nonVisibleSelectors.some(selector => matchesSelector(element, selector))) {

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

package/test/getAccessibleName.test.js

@@ -322,4 +322,46 @@ describe('getAccessibleName', () => {
     const obj = document.querySelector('object');
     expect(getAccessibleName(obj)).toBe(false);
   });
+
+  it('should handle ARIA meter with aria-label', () => {
+    document.body.innerHTML = `<div role="meter" aria-label="Disk usage" aria-valuenow="75"></div>`;
+    const meter = document.querySelector('[role="meter"]');
+    expect(getAccessibleName(meter)).toBe('Disk usage');
+  });
+
+  it('should handle ARIA meter with title attribute', () => {
+    document.body.innerHTML = `<div role="meter" title="Battery level" aria-valuenow="50"></div>`;
+    const meter = document.querySelector('[role="meter"]');
+    expect(getAccessibleName(meter)).toBe('Battery level');
+  });
+
+  it('should handle native meter with associated label', () => {
+    document.body.innerHTML = `<label for="cpu">CPU usage</label><meter id="cpu" value="0.6">60%</meter>`;
+    const meter = document.querySelector('meter');
+    expect(getAccessibleName(meter)).toBe('CPU usage');
+  });
+
+  it('should handle native meter wrapped in label', () => {
+    document.body.innerHTML = `<label>Memory: <meter value="0.8">80%</meter></label>`;
+    const meter = document.querySelector('meter');
+    expect(getAccessibleName(meter)).toBe('Memory:');
+  });
+
+  it('should return false for meter without accessible name', () => {
+    document.body.innerHTML = `<div role="meter" aria-valuenow="50">50%</div>`;
+    const meter = document.querySelector('[role="meter"]');
+    expect(getAccessibleName(meter)).toBe(false);
+  });
+
+  it('should return false for native meter without label', () => {
+    document.body.innerHTML = `<meter value="0.5">50%</meter>`;
+    const meter = document.querySelector('meter');
+    expect(getAccessibleName(meter)).toBe(false);
+  });
+
+  it('should handle meter with aria-labelledby', () => {
+    document.body.innerHTML = `<span id="signal-label">Signal strength</span><div role="meter" aria-labelledby="signal-label" aria-valuenow="4"></div>`;
+    const meter = document.querySelector('[role="meter"]');
+    expect(getAccessibleName(meter)).toBe('Signal strength');
+  });
 });