@afixt/test-utils 1.1.7 → 1.2.0

package/src/getAccessibleName.js

@@ -1,5 +1,5 @@
-const { isEmpty } = require("./stringUtils.js");
-const { getAccessibleText } = require("./getAccessibleText.js");
+const { isEmpty } = require('./stringUtils.js');
+const { getAccessibleText } = require('./getAccessibleText.js');
 
 /**
  * Gets the accessible name of an element according to the accessible name calculation algorithm
@@ -18,8 +18,7 @@ function getAccessibleName(element) {
     // These are elements which are totally not able to be labeled at all.
     // Even if the title attribute is valid per HTML for these elements,
     // the title won't be used in any meaningful way by Accessibility APIs
-    const unlabellable =
-        "head *, hr, param, caption, colgroup, col, tbody, tfoot, thead, tr";
+    const unlabellable = 'head *, hr, param, caption, colgroup, col, tbody, tfoot, thead, tr';
 
     // STEP 0 - verify item is visible and can be labelled
     // if it isn't visible or can't be labelled then just bail
@@ -27,13 +26,15 @@ function getAccessibleName(element) {
         return false;
     }
 
-    let id, ids, label;
+    let id;
+    let ids;
+    let label;
 
     // STEP 1 - always check for aria-labelledby first
     // STEP 1.1 - if aria-labelledby exists, check that the referenced element exists
     // STEP 1.1.1 - return the text from the referenced item
-    if (element.hasAttribute("aria-labelledby")) {
-        ids = element.getAttribute("aria-labelledby").trim().split(" ");
+    if (element.hasAttribute('aria-labelledby')) {
+        ids = element.getAttribute('aria-labelledby').trim().split(' ');
 
         const text = [];
         for (const id of ids) {
@@ -44,13 +45,13 @@ function getAccessibleName(element) {
             text.push(getAccessibleText(labelElement));
         }
 
-        return text.join(" ");
+        return text.join(' ');
     }
 
     // STEP 2 - (next) always check for aria-label second
     // STEP 2.1 - if aria-label exists, return the text in it
-    if (element.hasAttribute("aria-label")) {
-        const ariaLabel = element.getAttribute("aria-label");
+    if (element.hasAttribute('aria-label')) {
+        const ariaLabel = element.getAttribute('aria-label');
         if (ariaLabel) {
             return ariaLabel;
         }
@@ -61,18 +62,35 @@ function getAccessibleName(element) {
     // Most ARIA controls/ widgets rely on labelling per steps 1 & 2 above.
     // If a label isn't found in Step 1 & 2, we can (for some roles) use DOM subtree content to find the label.
     // We check all of those here.
-    if (element.hasAttribute("role")) {
-        const roleValue = element.getAttribute("role");
+    if (element.hasAttribute('role')) {
+        const roleValue = element.getAttribute('role');
         const textRoles = [
-            "button", "checkbox", "columnheader", "gridcell", "heading", "link",
-            "listitem", "menuitem", "menuitemcheckbox", "menuitemradio", "option",
-            "radio", "row", "rowgroup", "rowheader", "tab", "tooltip", "treeitem"
+            'button',
+            'checkbox',
+            'columnheader',
+            'gridcell',
+            'heading',
+            'link',
+            'listitem',
+            'menuitem',
+            'menuitemcheckbox',
+            'menuitemradio',
+            'option',
+            'radio',
+            'row',
+            'rowgroup',
+            'rowheader',
+            'tab',
+            'tooltip',
+            'treeitem',
         ];
 
         if (textRoles.includes(roleValue)) {
-            // quick sanity check to make sure the object can hold text in the first place and that it actually has text in it
-            if (!isEmpty(element.textContent)) {
-                return getAccessibleText(element);
+            // Use getAccessibleText which handles both text nodes and
+            // image alt text in the subtree (not just textContent)
+            const text = getAccessibleText(element);
+            if (!isEmpty(text)) {
+                return text;
             }
         }
     }
@@ -85,7 +103,8 @@ function getAccessibleName(element) {
     // STEP 4.3 Otherwise use the title attribute
     // STEP 4.4 - return false. If none of the above yield a usable text string there is no accessible name
     if (
-        matchesSelector(element,
+        matchesSelector(
+            element,
             'input:not([type]), input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"], textarea'
         )
     ) {
@@ -102,14 +121,14 @@ function getAccessibleName(element) {
         }
 
         // if the element's parent is a label, use the text in that
-        else if (element.closest("label")) {
-            return getAccessibleText(element.closest("label"));
+        else if (element.closest('label')) {
+            return getAccessibleText(element.closest('label'));
         }
 
         // title attribute is last resort
-        else if (element.hasAttribute("title")) {
-            if (strlen(element.getAttribute("title")) > 0) {
-                return element.getAttribute("title");
+        else if (element.hasAttribute('title')) {
+            if (strlen(element.getAttribute('title')) > 0) {
+                return element.getAttribute('title');
             } else {
                 return false;
             }
@@ -129,17 +148,15 @@ function getAccessibleName(element) {
     // STEP 5.4 For input type=button: return title attribute
     // STEP 5.5 - return false. If none of the above yield a usable text string there is no accessible name
     if (
-        matchesSelector(element,
-            'input[type="button"], input[type="submit"], input[type="reset"]'
-        )
+        matchesSelector(element, 'input[type="button"], input[type="submit"], input[type="reset"]')
     ) {
-        if (element.hasAttribute("value")) {
-            if (element.getAttribute("value")) {
-                return element.getAttribute("value");
+        if (element.hasAttribute('value')) {
+            if (element.getAttribute('value')) {
+                return element.getAttribute('value');
             }
         } else if (matchesSelector(element, 'input[type="button"]')) {
-            if (element.hasAttribute("title")) {
-                return element.getAttribute("title");
+            if (element.hasAttribute('title')) {
+                return element.getAttribute('title');
             }
             return false;
         }
@@ -149,16 +166,16 @@ function getAccessibleName(element) {
         // but we make a safe guess here anyway because getting the real name involves inspecting the Shadow DOM
         // which we cannot do
         else if (matchesSelector(element, 'input[type="submit"]')) {
-            if (element.hasAttribute("title")) {
-                return element.getAttribute("title");
+            if (element.hasAttribute('title')) {
+                return element.getAttribute('title');
             } else {
-                return "Submit";
+                return 'Submit';
             }
         } else if (matchesSelector(element, 'input[type="reset"]')) {
-            if (element.hasAttribute("title")) {
-                return element.getAttribute("title");
+            if (element.hasAttribute('title')) {
+                return element.getAttribute('title');
             } else {
-                return "Reset";
+                return 'Reset';
             }
         }
     }
@@ -170,12 +187,12 @@ function getAccessibleName(element) {
     // STEP 6.4: Otherwise use title attribute
     // STEP 6.5: return false. If none of the above yield a usable text string there is no accessible name
     if (matchesSelector(element, 'input[type="image"]')) {
-        if (element.hasAttribute("alt")) {
-            return element.getAttribute("alt");
-        } else if (element.hasAttribute("value")) {
-            return element.getAttribute("value");
-        } else if (element.hasAttribute("title")) {
-            return element.getAttribute("title");
+        if (element.hasAttribute('alt')) {
+            return element.getAttribute('alt');
+        } else if (element.hasAttribute('value')) {
+            return element.getAttribute('value');
+        } else if (element.hasAttribute('title')) {
+            return element.getAttribute('title');
         } else {
             return false;
         }
@@ -185,11 +202,11 @@ function getAccessibleName(element) {
     // STEP 7.1: use the button element subtree
     // STEP 7.2: use title attribute
     // STEP 7.3: return false. If none of the above yield a usable text string there is no accessible name
-    if (element.tagName.toLowerCase() === "button") {
+    if (element.tagName.toLowerCase() === 'button') {
         if (strlen(getAccessibleText(element)) > 0) {
             return getAccessibleText(element);
-        } else if (element.hasAttribute("title")) {
-            return element.getAttribute("title");
+        } else if (element.hasAttribute('title')) {
+            return element.getAttribute('title');
         } else {
             return false;
         }
@@ -201,7 +218,8 @@ function getAccessibleName(element) {
     // STEP 8.3: return false. If none of the above yield a usable text
     // string there is no accessible name
     if (
-        matchesSelector(element,
+        matchesSelector(
+            element,
             'select, input[type="checkbox"], input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="file"], input[type="month"], input[type="number"], input[type="radio"], input[type="range"], input[type="time"], input[type="week"]'
         )
     ) {
@@ -217,13 +235,13 @@ function getAccessibleName(element) {
         }
 
         // if the element's parent is a label, use the text in that
-        else if (element.closest("label")) {
-            return getAccessibleText(element.closest("label"));
+        else if (element.closest('label')) {
+            return getAccessibleText(element.closest('label'));
         }
 
         // title attribute is last resort
-        else if (element.hasAttribute("title")) {
-            return element.getAttribute("title");
+        else if (element.hasAttribute('title')) {
+            return element.getAttribute('title');
         }
 
         //if we got this far, there is no accessible name
@@ -242,20 +260,20 @@ function getAccessibleName(element) {
     // And these return values are especially not accurate for
     // non-english users, but we make a safe guess here anyway because
     // like Submit buttons, getting the real value involves inspecting Shadow DOM
-    if (element.tagName.toLowerCase() === "details") {
-        const summary = element.querySelector("summary");
+    if (element.tagName.toLowerCase() === 'details') {
+        const summary = element.querySelector('summary');
         if (summary) {
             if (strlen(getAccessibleText(summary)) > 0) {
                 return getAccessibleText(summary);
             }
-        } else if (element.hasAttribute("title")) {
-            if (strlen(element.getAttribute("title")) > 0) {
-                return element.getAttribute("title");
+        } else if (element.hasAttribute('title')) {
+            if (strlen(element.getAttribute('title')) > 0) {
+                return element.getAttribute('title');
             } else {
-                return "Details";
+                return 'Details';
             }
         } else {
-            return "Details";
+            return 'Details';
         }
     }
 
@@ -264,14 +282,14 @@ function getAccessibleName(element) {
     // STEP 10.2: title attribute
     // STEP 10.3: return false. If none of the above yield a usable text
     // string there is no accessible name
-    if (element.tagName.toLowerCase() === "figure") {
-        const figcaption = element.querySelector("figcaption");
+    if (element.tagName.toLowerCase() === 'figure') {
+        const figcaption = element.querySelector('figcaption');
         if (figcaption) {
             if (strlen(getAccessibleText(figcaption)) > 0) {
                 return getAccessibleText(figcaption);
             }
-        } else if (element.hasAttribute("title")) {
-            return element.getAttribute("title");
+        } else if (element.hasAttribute('title')) {
+            return element.getAttribute('title');
         } else {
             return false;
         }
@@ -282,11 +300,11 @@ function getAccessibleName(element) {
     // STEP 11.2: use title attribute
     // STEP 11.3: return false. If none of the above yield a usable
     // text string there is no accessible name
-    if (element.tagName.toLowerCase() === "img") {
-        if (element.hasAttribute("alt")) {
-            return element.getAttribute("alt");
-        } else if (element.hasAttribute("title")) {
-            return element.getAttribute("title");
+    if (element.tagName.toLowerCase() === 'img') {
+        if (element.hasAttribute('alt')) {
+            return element.getAttribute('alt');
+        } else if (element.hasAttribute('title')) {
+            return element.getAttribute('title');
         } else {
             return false;
         }
@@ -297,11 +315,11 @@ function getAccessibleName(element) {
     // STEP 11-1.2: use title attribute
     // STEP 11-1.3: return false. If none of the above yield a usable
     // text string there is no accessible name
-    if (matchesSelector(element, "area[href]")) {
-        if (element.hasAttribute("alt")) {
-            return element.getAttribute("alt");
-        } else if (element.hasAttribute("title")) {
-            return element.getAttribute("title");
+    if (matchesSelector(element, 'area[href]')) {
+        if (element.hasAttribute('alt')) {
+            return element.getAttribute('alt');
+        } else if (element.hasAttribute('title')) {
+            return element.getAttribute('title');
         } else {
             return false;
         }
@@ -311,9 +329,9 @@ function getAccessibleName(element) {
     // STEP 11-2.1: use alt attribute
     // STEP 11-2.3: return false. If none of the above yield a usable
     // text string there is no accessible name
-    if (element.tagName.toLowerCase() === "applet") {
-        if (element.hasAttribute("alt")) {
-            return element.getAttribute("alt");
+    if (element.tagName.toLowerCase() === 'applet') {
+        if (element.hasAttribute('alt')) {
+            return element.getAttribute('alt');
         } else {
             return false;
         }
@@ -325,9 +343,9 @@ function getAccessibleName(element) {
     // title attribute, or fallback content (handled at end via getAccessibleText)
     // STEP 11-3.1: use title attribute
     // STEP 11-3.2: fallback content is handled at the end via getAccessibleText
-    if (element.tagName.toLowerCase() === "object") {
-        if (element.hasAttribute("title")) {
-            const titleValue = element.getAttribute("title");
+    if (element.tagName.toLowerCase() === 'object') {
+        if (element.hasAttribute('title')) {
+            const titleValue = element.getAttribute('title');
             if (strlen(titleValue) > 0) {
                 return titleValue;
             }
@@ -343,16 +361,16 @@ function getAccessibleName(element) {
     // 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 (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") {
+        if (element.tagName.toLowerCase() === 'meter') {
             // Check for label with for attribute
             if (element.id) {
                 const label = document.querySelector('label[for="' + element.id + '"]');
@@ -362,11 +380,11 @@ function getAccessibleName(element) {
             }
 
             // Check for wrapping label
-            const parentLabel = element.closest("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");
+                const meterInClone = clone.querySelector('meter');
                 if (meterInClone) {
                     meterInClone.remove();
                 }
@@ -386,16 +404,16 @@ function getAccessibleName(element) {
     // STEP 12.3: use the summary attribute
     // STEP 12.4: return false. If none of the above yield a usable
     // text string there is no accessible name
-    if (element.tagName.toLowerCase() === "table") {
-        const caption = element.querySelector("caption");
+    if (element.tagName.toLowerCase() === 'table') {
+        const caption = element.querySelector('caption');
         if (caption) {
             if (strlen(getAccessibleText(caption)) > 0) {
                 return getAccessibleText(caption);
             }
-        } else if (element.hasAttribute("title")) {
-            return element.getAttribute("title");
-        } else if (element.hasAttribute("summary")) {
-            return element.getAttribute("summary");
+        } else if (element.hasAttribute('title')) {
+            return element.getAttribute('title');
+        } else if (element.hasAttribute('summary')) {
+            return element.getAttribute('summary');
         }
         return false;
     }
@@ -405,11 +423,11 @@ function getAccessibleName(element) {
     // STEP 13.2: the title attribute
     // STEP 13.3: return false. If none of the above yield a usable
     // text string there is no accessible name
-    if (matchesSelector(element, "a[href]")) {
+    if (matchesSelector(element, 'a[href]')) {
         if (strlen(getAccessibleText(element)) > 0) {
             return getAccessibleText(element);
-        } else if (element.hasAttribute("title")) {
-            return element.getAttribute("title");
+        } else if (element.hasAttribute('title')) {
+            return element.getAttribute('title');
         } else {
             return false;
         }
@@ -423,14 +441,15 @@ function getAccessibleName(element) {
     // STEP 14.2: return false. If none of the above yield a usable
     // text string there is no accessible name
     if (
-        matchesSelector(element,
-            "em, strong, small, s, cite, q, dfn, abbr, time, code, var, samp, kbd, sub, sup, i, b, u, mark, ruby, rt, rp, bdi, bdo, br, wbr"
+        matchesSelector(
+            element,
+            'em, strong, small, s, cite, q, dfn, abbr, time, code, var, samp, kbd, sub, sup, i, b, u, mark, ruby, rt, rp, bdi, bdo, br, wbr'
         )
     ) {
         if (strlen(element.textContent) > 0) {
             return element.textContent;
-        } else if (element.hasAttribute("title")) {
-            return element.getAttribute("title");
+        } else if (element.hasAttribute('title')) {
+            return element.getAttribute('title');
         } else {
             return false;
         }
@@ -442,13 +461,13 @@ function getAccessibleName(element) {
     // 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";
+    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 (element.hasAttribute('title')) {
+            const titleValue = element.getAttribute('title');
             if (strlen(titleValue) > 0) {
                 return titleValue;
             }
@@ -476,14 +495,34 @@ function getAccessibleName(element) {
  */
 function isNotVisible(element) {
     // Importing isVisible would be better, but for this standalone function we'll check it this way
-    if (!element) return true;
+    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', 'param', 'noframes', 'ruby > rp'
+        'base',
+        'head',
+        'meta',
+        'title',
+        'link',
+        'style',
+        'script',
+        'br',
+        'nobr',
+        'col',
+        'embed',
+        'input[type="hidden"]',
+        'keygen',
+        'source',
+        'track',
+        'wbr',
+        'datalist',
+        'param',
+        'noframes',
+        'ruby > rp',
     ];
 
     if (nonVisibleSelectors.some(selector => matchesSelector(element, selector))) {
@@ -493,12 +532,16 @@ function isNotVisible(element) {
     // Check if display is none
     const isElemDisplayed = el => window.getComputedStyle(el).display === 'none';
 
-    if (isElemDisplayed(element)) return true;
+    if (isElemDisplayed(element)) {
+        return true;
+    }
 
     // Check parent elements
     let parent = element.parentElement;
     while (parent) {
-        if (isElemDisplayed(parent)) return true;
+        if (isElemDisplayed(parent)) {
+            return true;
+        }
         parent = parent.parentElement;
     }
 
@@ -512,12 +555,13 @@ function isNotVisible(element) {
  * @returns {boolean} True if element matches the selector
  */
 function matchesSelector(element, selector) {
-    if (!element) return false;
+    if (!element) {
+        return false;
+    }
 
     // Use the right matches function depending on browser support
-    const matchesMethod = element.matches ||
-                           element.mozMatchesSelector ||
-                           element.msMatchesSelector;
+    const matchesMethod =
+        element.matches || element.mozMatchesSelector || element.msMatchesSelector;
 
     // Handle multiple selectors (comma-separated)
     if (selector.includes(',')) {
@@ -533,7 +577,7 @@ function matchesSelector(element, selector) {
  * @returns {number} The string length or 0
  */
 function strlen(str) {
-    return typeof str === "string" && !isEmpty(str.trim()) ? str.trim().length : 0;
+    return typeof str === 'string' && !isEmpty(str.trim()) ? str.trim().length : 0;
 }
 
 // Export the function for CommonJS module usage