@aurodesignsystem/auro-library 4.4.1 → 4.5.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Semantic Release Automated Changelog
 
+# [4.5.0](https://github.com/AlaskaAirlines/auro-library/compare/v4.4.1...v4.5.0) (2025-05-15)
+
+
+### Features
+
+* add an advanced `iterate()` to test the given action AND a11y [#159](https://github.com/AlaskaAirlines/auro-library/issues/159) ([0d1734c](https://github.com/AlaskaAirlines/auro-library/commit/0d1734ca3403b51962412444f8264b088482af21))
+
 ## [4.4.1](https://github.com/AlaskaAirlines/auro-library/compare/v4.4.0...v4.4.1) (2025-05-01)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurodesignsystem/auro-library",
-  "version": "4.4.1",
+  "version": "4.5.0",
   "description": "This repository holds shared scripts, utilities, and workflows utilized across repositories along the Auro Design System.",
   "repository": {
     "type": "git",

package/scripts/test-plugin/iterateWithA11Check.mjs

@@ -0,0 +1,82 @@
+import { expect } from '@open-wc/testing';
+
+let originalIt;
+async function checkElementAccessibility(element) {
+  // test only when this element is meaningful.
+  if (element.children.length || element.attributes.length) {
+    await expect(element).to.be.accessible();
+  }
+}
+
+function aIt(desc, action) {
+  const actionWithA11y = async () => {
+    const result = await action();
+
+    let rootElement;
+    if (typeof result === 'string') {
+      rootElement = document.querySelector(result);
+    } else if (result instanceof Element) {
+      rootElement = result;
+    } else {
+      // fallback incase `action()` didnt return the created node.
+      // The framework injdect any elements that are created during `action()` to first `div` layer under `body`.
+      // this `div` will get cleared after the iteration.
+      rootElement = document.body.querySelector('div');
+    }
+
+    if (rootElement) {
+      await checkElementAccessibility(rootElement);
+    }
+
+    const children = [...document.body.children];
+    for (let child of children) {
+      if (child !== rootElement) {
+        // when the iteration's element uses `floatingUI`, there will be an extra child under `body`.
+        if (
+          child.hasAttribute("auro-dropdownbib") ||
+          child.hasAttribute("auro-floater-bib")
+        ) {
+          // test `floatingUI.bib`
+          await checkElementAccessibility(child);
+        }
+      }
+    }
+  };
+
+  originalIt(desc, actionWithA11y);
+}
+
+/**
+ * Usage Example
+ * 
+ * import { getAccessibleIt } from "@aurodesignsystem/auro-library/scripts/test-plugin/iterateWithA11Check.mjs";
+ * 
+ * it = getAccessibleIt();
+ * 
+ * OR
+ * 
+ * import { getAccessibleIt } from "@aurodesignsystem/auro-library/scripts/test-plugin/iterateWithA11Check.mjs";
+ * 
+ * aIt = getAccessibleIt();
+ * 
+ * describe('test', () => {
+ *   aIt('description', () => {
+ *     ...
+ *   }
+ * });
+ */
+export function getAccessibleIt() {
+  originalIt ??= it;
+  return aIt;
+}
+
+/**
+ * Usage Example
+ * 
+ * import { useAccessibleIt } from "@aurodesignsystem/auro-library/scripts/test-plugin/iterateWithA11Check.mjs";
+ * useAccessibleIt();
+ */
+export function useAccessibleIt() {
+  originalIt ??= it;
+  it = aIt;
+}