@afixt/test-utils 1.0.0

package/src/getComputedRole.js

@@ -0,0 +1,169 @@
+export const roleMapping = {
+    'a': {
+        '[href]': 'link',
+        ':not([href])': 'text'
+    },
+    'abbr': 'text',
+    'address': 'text',
+    'area': {
+        '[href]': 'link',
+        ':not([href])': 'text'
+    },
+    'article': 'article',
+    'aside': 'complementary',
+    'audio': 'group',
+    'b': 'text',
+    'base': 'noRole',
+    'bdi': 'noRole',
+    'bdo': 'text',
+    'blockquote': 'text',
+    'body': 'document',
+    'br': 'noRole',
+    'button': 'button',
+    'canvas': 'image',
+    'caption': 'text',
+    'cite': 'text',
+    'code': 'text',
+    'col': 'noRole',
+    'colgroup': 'group',
+    'data': 'noRole',
+    'datalist': 'listbox',
+    'dd': 'definition',
+    'del': 'text',
+    'details': 'group',
+    'dfn': 'term',
+    'dialog': 'dialog',
+    'div': 'group',
+    'dl': 'list',
+    'dt': 'term',
+    'em': 'text',
+    'embed': 'noRole',
+    'fieldset': 'group',
+    'figcaption': 'text',
+    'figure': 'figure',
+    'footer': 'contentinfo',
+    'form': 'form',
+    'h1': 'heading',
+    'h2': 'heading',
+    'h3': 'heading',
+    'h4': 'heading',
+    'h5': 'heading',
+    'h6': 'heading',
+    'head': 'noRole',
+    'header': 'banner',
+    'hr': 'separator',
+    'html': 'noRole',
+    'i': 'text',
+    'iframe': 'noRole',
+    'img': {
+        '[alt=""]': 'presentation',
+        'img': 'image'
+    },
+    'input': {
+        '[type="button"]': 'button',
+        '[type="checkbox"]': 'checkbox',
+        '[type="hidden"]': 'noRole',
+        '[type="image"]': 'button',
+        '[type="number"]': 'spinbutton',
+        '[type="radio"]': 'radio',
+        '[type="range"]': 'slider',
+        '[type="reset"]': 'button',
+        '[type="submit"]': 'button',
+        '[type="password"]': 'textbox',
+        '[type="color"]': 'textbox',
+        '[type="search"]': 'searchbox',
+        '[type="tel"]': 'textbox',
+        '[type="text"]': 'textbox',
+        '[type="url"]': 'textbox'
+    },
+    'ins': 'text',
+    'kbd': 'text',
+    'label': 'text',
+    'legend': 'text',
+    'li': 'listitem',
+    'link': 'noRole',
+    'main': 'main',
+    'map': 'noRole',
+    'mark': 'text',
+    'math': 'math',
+    'menu': 'menu',
+    'meta': 'noRole',
+    'meter': 'text',
+    'nav': 'navigation',
+    'noscript': 'noRole',
+    'object': 'noRole',
+    'ol': 'list',
+    'optgroup': 'group',
+    'option': 'option',
+    'output': 'status',
+    'p': 'text',
+    'param': 'noRole',
+    'picture': 'noRole',
+    'pre': 'text',
+    'progress': 'progressbar',
+    'q': 'text',
+    'rb': 'noRole',
+    'rp': 'noRole',
+    'rt': 'text',
+    'rtc': 'noRole',
+    'ruby': 'text',
+    's': 'text',
+    'samp': 'text',
+    'script': 'noRole',
+    'section': 'region',
+    'select': 'combobox',
+    'small': 'text',
+    'source': 'noRole',
+    'span': 'group',
+    'strong': 'text',
+    'style': 'noRole',
+    'sub': 'text',
+    'summary': 'button',
+    'sup': 'text',
+    'svg': 'noRole',
+    'table': 'table',
+    'tbody': 'rowgroup',
+    'td': 'cell',
+    'template': 'noRole',
+    'textarea': 'textbox',
+    'tfoot': 'rowgroup',
+    'th': 'columnheader',
+    'thead': 'rowgroup',
+    'time': 'text',
+    'title': 'noRole',
+    'tr': 'row',
+    'track': 'noRole',
+    'u': 'text',
+    'ul': 'list',
+    'var': 'text',
+    'video': 'group',
+    'wbr': 'noRole'
+};
+
+/**
+ * Gets the computed role of an HTML element.
+ *
+ * @param {HTMLElement} element - The HTML element to get the role for.
+ * @returns {string|undefined} The computed role of the element, or undefined if no role is found.
+ */
+export function getComputedRole(element) {
+    if (!element) return undefined;
+
+    const roleAttr = element.getAttribute('role');
+    if (roleAttr) return roleAttr;
+
+    const tagName = element.tagName.toLowerCase();
+    const role = roleMapping[tagName];
+
+    if (typeof role === 'string') {
+        return role;
+    } else if (typeof role === 'object') {
+        for (const key in role) {
+            if (element.matches(key)) {
+                return role[key];
+            }
+        }
+    }
+
+    return undefined;
+}

package/src/getFocusableElements.js

@@ -0,0 +1,26 @@
+/**
+ *
+ * @param  {Element} el - the element to be tested
+ * @returns {Array} - Array of focusable elements
+ */
+export function getFocusableElements(el) {
+    const focusableSelectors = [
+        "a[href]",
+        "area",
+        "button",
+        "select",
+        "textarea",
+        'input:not([type="hidden"])',
+        "[tabindex]",
+    ];
+
+    return Array.from(
+        el.querySelectorAll(focusableSelectors.join(", "))
+    ).filter((element) => {
+        const tabindex = element.getAttribute("tabindex");
+        return (
+            (tabindex === null || parseInt(tabindex, 10) >= 0) &&
+            element.offsetParent !== null // Checks visibility
+        );
+    });
+}

package/src/getGeneratedContent.js

@@ -0,0 +1,15 @@
+/**
+ * Get the generated content for an element (`::before`, `::after`, and inner content).
+ * @param {Element} el - The DOM element.
+ * @returns {string|boolean} The generated content or `false` if not available.
+ */
+export function getGeneratedContent(el) {
+    if (!el) return false;
+    const computedStyle = getComputedStyle(el);
+    const before = computedStyle.getPropertyValue("content", "::before") || "";
+    const inner = el.textContent || "";
+    const after = computedStyle.getPropertyValue("content", "::after") || "";
+    return before || inner || after
+        ? `${before} ${inner} ${after}`.trim()
+        : false;
+}

package/src/getImageText.js

@@ -0,0 +1,25 @@
+import Tesseract from 'tesseract.js';
+
+/**
+ * Extracts text from an image using OCR.
+ * @param {string} imagePath - The path or URL of the image.
+ * @returns {Promise<string|false>} Extracted text if found, otherwise false.
+ */
+export async function getImageText(imagePath) {
+    try {
+        const { data: { text } } = await Tesseract.recognize(
+            imagePath,
+            'eng', // Language (English)
+            { logger: m => console.log(m) } // Optional logging
+        );
+
+        const extractedText = text.trim();
+        return extractedText.length > 0 ? extractedText : false;
+    } catch (error) {
+        console.error('Error processing image:', error);
+        return false;
+    }
+}
+
+// Example usage:
+// getImageText('path/to/image.jpg').then(result => console.log(result));

package/src/getStyleObject.js

@@ -0,0 +1,45 @@
+
+/**
+ * Retrieves the computed style properties of a given DOM element and returns them as an object.
+ *
+ * @param {Element} el - The DOM element for which to retrieve the computed style properties.
+ * @returns {Object|boolean} An object containing the computed style properties of the element,
+ *                           with property names in camelCase. Returns false if the style object
+ *                           cannot be retrieved.
+ */
+export function getStyleObject(el) {
+    // Ensure we have a valid DOM element
+    if (!el || !(el instanceof Element)) {
+        return false;
+    }
+
+    let style;
+    const returns = {};
+    let prop;
+
+    if (window.getComputedStyle) {
+        const camelize = function (a, b) {
+            return b.toUpperCase();
+        };
+
+        style = window.getComputedStyle(el, null);
+
+        // Bail out if we don't get a style object
+        if (!style || style.length === 0) {
+            return false;
+        }
+        else {
+            for (let i = 0, l = style.length; i < l; i++) {
+                prop = style[i];
+                let camel = prop.replace(/-([a-z])/g, camelize);
+                let val = style.getPropertyValue(prop);
+                returns[camel] = val;
+            }
+        }
+
+        return returns;
+    }
+    else {
+        return false;
+    }
+}

package/src/hasAccessibleName.js

@@ -0,0 +1,28 @@
+import getAccessibleName from "./getAccessibleName.js";
+
+/**
+ * Determines if an element has an accessible name
+ * @param {Element} element - The DOM element to check
+ * @returns {boolean} True if the element has an accessible name, false otherwise
+ */
+function hasAccessibleName(element) {
+    // If element is invalid, return false
+    if (!element) return false;
+    
+    // Get the accessible name
+    const accessibleName = getAccessibleName(element);
+    
+    // Return true if there is a valid accessible name, false otherwise
+    return accessibleName !== false;
+}
+
+// Export for ES modules
+export default hasAccessibleName;
+
+// Export for CommonJS
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = hasAccessibleName;
+} else if (typeof window !== 'undefined') {
+    // Add to window object for browser usage
+    window.hasAccessibleName = hasAccessibleName;
+}

package/src/hasAttribute.js

@@ -0,0 +1,15 @@
+
+/**
+ * Checks if a given element has a specified attribute.
+ *
+ * @param {string} attribute - The name of the attribute to check for.
+ * @param {Element} element - The DOM element to check the attribute on.
+ * @returns {boolean} - Returns true if the attribute exists on the element, otherwise false.
+ */
+export function hasAttribute(attribute, element) {
+    if (!element || !(element instanceof Element) || typeof attribute !== 'string') {
+        return false;
+    }
+    
+    return element.hasAttribute(attribute);
+};

package/src/hasCSSGeneratedContent.js

@@ -0,0 +1,20 @@
+
+import { getGeneratedContent } from './getGeneratedContent.js';
+
+/**
+ * Checks if an element has CSS generated content in its ::before or ::after pseudo-elements
+ * or text content.
+ *
+ * @param {HTMLElement} el - The element to check for generated content.
+ * @returns {boolean} True if the element has any generated content, otherwise false.
+ */
+export 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
+    return content !== false;
+}

package/src/hasHiddenParent.js

@@ -0,0 +1,29 @@
+
+import isHidden from './isHidden.js';
+
+/**
+ * Checks if the given element has a hidden parent element.
+ *
+ * @param {HTMLElement} element - The DOM element to check.
+ * @returns {boolean} - Returns true if the element has a hidden parent, otherwise false.
+ */
+const hasHiddenParent = (element) => {
+    if (!element || !(element instanceof Element)) {
+        return false;
+    }
+    
+    let visible = true;
+    let parent = element.parentElement;
+
+    while (parent) {
+        if (isHidden(parent)) {
+            visible = false;
+            break;
+        }
+        parent = parent.parentElement;
+    }
+
+    return !visible;
+};
+
+export default hasHiddenParent;

package/src/hasParent.js

@@ -0,0 +1,54 @@
+/**
+ * Checks if the given element has a parent that matches any of the selectors in the array.
+ *
+ * @param {HTMLElement} element - The DOM element to check.
+ * @param {string[]} selectors - An array of selectors to match against the element's parents.
+ * @returns {boolean} - Returns true if the element has a parent that matches any of the selectors, otherwise false.
+ */
+export function hasParent(element, selectors) {
+    // Input validation
+    if (!element || !(element instanceof Element)) {
+        return false;
+    }
+    
+    if (!selectors || !Array.isArray(selectors) || selectors.length === 0) {
+        return false;
+    }
+    
+    // Get all parents
+    let currentParent = element.parentElement;
+    
+    // Check each parent against all selectors
+    while (currentParent) {
+        // Check if the current parent matches any of the selectors
+        for (const selector of selectors) {
+            try {
+                if (!selector || typeof selector !== 'string') {
+                    continue;
+                }
+                
+                // Handle special case for tag name matching
+                if (selector.indexOf('#') === -1 && 
+                    selector.indexOf('.') === -1 && 
+                    selector.indexOf('[') === -1) {
+                    // Simple tag name comparison
+                    if (currentParent.tagName.toLowerCase() === selector.toLowerCase()) {
+                        return true;
+                    }
+                }
+                // Use matches for CSS selector matching
+                else if (currentParent.matches(selector)) {
+                    return true;
+                }
+            } catch (e) {
+                // Invalid selector, skip this one and warn
+                console.warn(`Invalid selector: ${selector}`);
+            }
+        }
+        
+        // Move up to the next parent
+        currentParent = currentParent.parentElement;
+    }
+    
+    return false;
+};

package/src/hasValidAriaAttributes.js

@@ -0,0 +1,30 @@
+import { isAriaAttributeValid } from './isAriaAttributesValid.js';
+
+/**
+ * Checks if an element has any valid ARIA attributes.
+ *
+ * @param {Element} element - The DOM element to check
+ * @returns {boolean} True if the element has at least one valid ARIA attribute, false otherwise
+ */
+export function hasValidAriaAttributes(element) {
+    if (!element || typeof element.hasAttributes !== 'function' || !element.attributes) {
+        return false;
+    }
+
+    // Check if the element has any attributes
+    if (!element.hasAttributes()) {
+        return false;
+    }
+
+    // Iterate through all attributes and check if any are valid ARIA attributes
+    for (const attribute of element.attributes) {
+        const attributeName = attribute.name.toLowerCase();
+
+        // Check if this is an aria attribute (starts with 'aria-')
+        if (attributeName.startsWith('aria-') && isAriaAttributeValid(attributeName)) {
+            return true;
+        }
+    }
+
+    return false;
+}

package/src/hasValidAriaRole.js

@@ -0,0 +1,29 @@
+/**
+ * Checks if the given element has a valid ARIA role.
+ *
+ * @param {HTMLElement} element - The DOM element to check.
+ * @returns {boolean} True if the element has a valid ARIA role, false otherwise.
+ */
+export function hasValidAriaRole(element) {
+    const validAriaRoles = new Set([
+      "alert", "alertdialog", "button", "checkbox", "dialog", "gridcell", "link",
+      "log", "marquee", "menuitem", "menuitemcheckbox", "menuitemradio", "option",
+      "progressbar", "radio", "scrollbar", "searchbox", "slider", "spinbutton",
+      "status", "switch", "tab", "tabpanel", "textbox", "tooltip", "treeitem",
+      "combobox", "grid", "listbox", "menu", "menubar", "radiogroup", "tablist",
+      "tree", "treegrid", "article", "cell", "columnheader", "definition",
+      "directory", "document", "feed", "figure", "group", "heading", "img",
+      "list", "listitem", "math", "none", "note", "presentation", "row",
+      "rowgroup", "rowheader", "separator", "table", "term", "toolbar",
+      "application", "banner", "complementary", "contentinfo", "form", "main",
+      "navigation", "region", "search", "timer"
+    ]);
+
+    if (!element || typeof element.getAttribute !== 'function') return false;
+
+    const roleAttr = element.getAttribute('role');
+    if (!roleAttr) return false;
+
+    const roles = roleAttr.trim().split(/\s+/);
+    return validAriaRoles.has(roles[0]); // Only check the first role
+  }

package/src/index.js

@@ -0,0 +1,64 @@
+/**
+ * @file Main entry point for the AFixt test utilities library
+ * @module afixt-test-utils
+ * @description A collection of utility functions for accessibility testing
+ */
+
+// Array utilities
+export * from './arrayUtils.js';
+
+// DOM utilities
+export * from './domUtils.js';
+
+// Accessibility name computation
+export * from './getAccessibleName.js';
+export * from './getAccessibleText.js';
+export * from './hasAccessibleName.js';
+
+// ARIA utilities
+export * from './getAriaAttributesByElement.js';
+export * from './hasValidAriaAttributes.js';
+export * from './hasValidAriaRole.js';
+export * from './isAriaAttributesValid.js';
+export * from './interactiveRoles.js';
+
+// CSS utilities
+export * from './getCSSGeneratedContent.js';
+export * from './getGeneratedContent.js';
+export * from './getStyleObject.js';
+export * from './hasCSSGeneratedContent.js';
+
+// Table utilities
+export * from './isComplexTable.js';
+export * from './isDataTable.js';
+
+// Visibility and positioning
+export * from './isHidden.js';
+export * from './isOffScreen.js';
+export * from './isVisible.js';
+export * from './hasHiddenParent.js';
+
+// Element relationships
+export * from './hasParent.js';
+export * from './hasAttribute.js';
+
+// Focus management
+export * from './getFocusableElements.js';
+export * from './isFocusable.js';
+
+// Role computation
+export * from './getComputedRole.js';
+
+// Image utilities
+export * from './getImageText.js';
+
+// Testing utilities
+export * from './testContrast.js';
+export * from './testLang.js';
+export * from './testOrder.js';
+
+// URL utilities
+export * from './isValidUrl.js';
+
+// String utilities
+export * from './stringUtils.js';

package/src/interactiveRoles.js

@@ -0,0 +1,20 @@
+const interactiveRoles = [
+    "button",
+    "checkbox",
+    "combobox",
+    "link",
+    "menu",
+    "menuitemcheckbox",
+    "menuitemradio",
+    "radio",
+    "scrollbar",
+    "slider",
+    "spinbutton",
+    "tablist",
+    "textbox",
+    "toolbar",
+    "switch",
+    "tree",
+];
+
+export default interactiveRoles;

package/src/isAriaAttributesValid.js

@@ -0,0 +1,74 @@
+/**
+ * List of valid ARIA attributes based on WAI-ARIA specification.
+ * @type {Set<string>}
+ */
+const validAriaAttributes = new Set([
+    // ARIA States and Properties
+    'aria-activedescendant',
+    'aria-atomic',
+    'aria-autocomplete',
+    'aria-braillelabel',
+    'aria-brailleroledescription',
+    'aria-busy',
+    'aria-checked',
+    'aria-colcount',
+    'aria-colindex',
+    'aria-colindextext',
+    'aria-colspan',
+    'aria-controls',
+    'aria-current',
+    'aria-describedby',
+    'aria-description',
+    'aria-details',
+    'aria-disabled',
+    'aria-dropeffect',
+    'aria-errormessage',
+    'aria-expanded',
+    'aria-flowto',
+    'aria-grabbed',
+    'aria-haspopup',
+    'aria-hidden',
+    'aria-invalid',
+    'aria-keyshortcuts',
+    'aria-label',
+    'aria-labelledby',
+    'aria-level',
+    'aria-live',
+    'aria-modal',
+    'aria-multiline',
+    'aria-multiselectable',
+    'aria-orientation',
+    'aria-owns',
+    'aria-placeholder',
+    'aria-posinset',
+    'aria-pressed',
+    'aria-readonly',
+    'aria-relevant',
+    'aria-required',
+    'aria-roledescription',
+    'aria-rowcount',
+    'aria-rowindex',
+    'aria-rowindextext',
+    'aria-rowspan',
+    'aria-selected',
+    'aria-setsize',
+    'aria-sort',
+    'aria-valuemax',
+    'aria-valuemin',
+    'aria-valuenow',
+    'aria-valuetext'
+]);
+
+/**
+ * Checks if a specific ARIA attribute is valid according to the WAI-ARIA specification.
+ *
+ * @param {string} attributeName - The name of the ARIA attribute to check (e.g., 'aria-label')
+ * @returns {boolean} True if the attribute is a valid ARIA attribute, false otherwise
+ */
+export function isAriaAttributeValid(attributeName) {
+    if (!attributeName || typeof attributeName !== 'string') {
+        return false;
+    }
+    
+    return validAriaAttributes.has(attributeName.toLowerCase());
+}