@aurodesignsystem/auro-library 4.4.1 → 5.0.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Semantic Release Automated Changelog
 
+# [5.0.0](https://github.com/AlaskaAirlines/auro-library/compare/v4.5.0...v5.0.0) (2025-05-29)
+
+
+### Bug Fixes
+
+* update positioning strategy and remove dom node transportation from FloatingUI ([3e01ab2](https://github.com/AlaskaAirlines/auro-library/commit/3e01ab2e8cadfa76d7d057abc6626b7b09ef568f))
+
+
+### BREAKING CHANGES
+
+* this changes the fundamental strategy for implementing FloatingUI and will require accommodating changes in consuming code to work correctly
+
+# [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": "5.0.0",
   "description": "This repository holds shared scripts, utilities, and workflows utilized across repositories along the Auro Design System.",
   "repository": {
     "type": "git",

package/scripts/runtime/floatingUI.mjs

@@ -152,6 +152,7 @@ export default class AuroFloatingUI {
 
       // Compute the position of the bib
       computePosition(this.element.trigger, this.element.bib, {
+        strategy: this.element.floaterConfig?.strategy || 'fixed',
         placement: this.element.floaterConfig?.placement,
         middleware: middleware || []
       }).then(({ x, y }) => { // eslint-disable-line id-length
@@ -589,8 +590,6 @@ export default class AuroFloatingUI {
       this.element.hoverToggle = this.element.floaterConfig.hoverToggle;
     }
 
-    document.body.append(this.element.bib);
-
     this.regenerateBibId();
     this.handleTriggerTabIndex();
 

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