@afixt/test-utils 1.1.6 → 1.1.7

package/package.json

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

package/src/getAccessibleName.js

@@ -436,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) {
@@ -458,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;
 }