@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.16 → 0.0.0-pr624.17

package/components/counter/dist/registered.js

@@ -9026,7 +9026,266 @@ class AuroElement extends LitElement {
   }
 }
 
-/* eslint-disable lit/no-invalid-html, lit/binding-positions, max-lines, prefer-destructuring, no-underscore-dangle, arrow-parens, no-confusing-arrow, curly */
+// Selectors for focusable elements
+const FOCUSABLE_SELECTORS = [
+  'a[href]',
+  'button:not([disabled])',
+  'textarea:not([disabled])',
+  'input:not([disabled])',
+  'select:not([disabled])',
+  '[role="tab"]:not([disabled])',
+  '[role="link"]:not([disabled])',
+  '[role="button"]:not([disabled])',
+  '[tabindex]:not([tabindex="-1"])',
+  '[contenteditable]:not([contenteditable="false"])'
+];
+
+// List of custom components that are known to be focusable
+const FOCUSABLE_COMPONENTS = [
+  'auro-checkbox',
+  'auro-radio',
+  'auro-dropdown',
+  'auro-button',
+  'auro-combobox',
+  'auro-input',
+  'auro-counter',
+  'auro-menu',
+  'auro-select',
+  'auro-datepicker',
+  'auro-hyperlink',
+  'auro-accordion',
+];
+
+/**
+ * Determines if a given element is a custom focusable component.
+ * Returns true if the element matches a known focusable component and is not disabled.
+ *
+ * @param {HTMLElement} element The element to check for focusability.
+ * @returns {boolean} True if the element is a focusable custom component, false otherwise.
+ */
+function isFocusableComponent(element) {
+  const componentName = element.tagName.toLowerCase();
+
+  // Guard Clause: Element is a focusable component
+  if (!FOCUSABLE_COMPONENTS.includes(componentName)) return false;
+
+  // Guard Clause: Element is not disabled
+  if (element.hasAttribute('disabled')) return false;
+
+  // Guard Clause: The element is a hyperlink and has no href attribute
+  if (componentName.match("hyperlink") && !element.hasAttribute('href')) return false;
+
+  // If all guard clauses pass, the element is a focusable component
+  return true;
+}
+
+/**
+ * Retrieves all focusable elements within the container in DOM order, including those in shadow DOM and slots.
+ * Returns a unique, ordered array of elements that can receive focus.
+ *
+ * @param {HTMLElement} container The container to search within
+ * @returns {Array<HTMLElement>} An array of focusable elements within the container.
+ */
+function getFocusableElements(container) {
+  // Get elements in DOM order by walking the tree
+  const orderedFocusableElements = [];
+
+  // Define a recursive function to collect focusable elements in DOM order
+  const collectFocusableElements = (root) => {
+    // Check if current element is focusable
+    if (root.nodeType === Node.ELEMENT_NODE) {
+      // Check if this is a custom component that is focusable
+      const isComponentFocusable = isFocusableComponent(root);
+
+      if (isComponentFocusable) {
+        // Add the component itself as a focusable element and don't traverse its shadow DOM
+        orderedFocusableElements.push(root);
+        return; // Skip traversing inside this component
+      }
+
+      // Check if the element itself matches any selector
+      for (const selector of FOCUSABLE_SELECTORS) {
+        if (root.matches?.(selector)) {
+          orderedFocusableElements.push(root);
+          break; // Once we know it's focusable, no need to check other selectors
+        }
+      }
+
+      // Process shadow DOM only for non-Auro components
+      if (root.shadowRoot) {
+        // Process shadow DOM children in order
+        if (root.shadowRoot.children) {
+          Array.from(root.shadowRoot.children).forEach(child => {
+            collectFocusableElements(child);
+          });
+        }
+      }
+
+      // Process slots and their assigned nodes in order
+      if (root.tagName === 'SLOT') {
+        const assignedNodes = root.assignedNodes({ flatten: true });
+        for (const node of assignedNodes) {
+          collectFocusableElements(node);
+        }
+      } else {
+        // Process light DOM children in order
+        if (root.children) {
+          Array.from(root.children).forEach(child => {
+            collectFocusableElements(child);
+          });
+        }
+      }
+    }
+  };
+
+  // Start the traversal from the container
+  collectFocusableElements(container);
+
+  // Remove duplicates that might have been collected through different paths
+  // while preserving order
+  const uniqueElements = [];
+  const seen = new Set();
+
+  for (const element of orderedFocusableElements) {
+    if (!seen.has(element)) {
+      seen.add(element);
+      uniqueElements.push(element);
+    }
+  }
+
+  return uniqueElements;
+}
+
+/**
+ * FocusTrap manages keyboard focus within a specified container element, ensuring that focus does not leave the container when tabbing.
+ * It is commonly used for modal dialogs or overlays to improve accessibility by trapping focus within interactive UI components.
+ */
+class FocusTrap {
+  /**
+   * Creates a new FocusTrap instance for the given container element.
+   * Initializes event listeners and prepares the container for focus management.
+   *
+   * @param {HTMLElement} container The DOM element to trap focus within.
+   * @throws {Error} If the provided container is not a valid HTMLElement.
+   */
+  constructor(container) {
+    if (!container || !(container instanceof HTMLElement)) {
+      throw new Error("FocusTrap requires a valid HTMLElement.");
+    }
+
+    this.container = container;
+    this.tabDirection = 'forward'; // or 'backward'
+
+    this._init();
+  }
+
+  /**
+   * Initializes the focus trap by setting up event listeners and attributes on the container.
+   * Prepares the container for focus management, including support for shadow DOM and inert attributes.
+   *
+   * @private
+   */
+  _init() {
+
+    // Add inert attribute to prevent focusing programmatically as well (if supported)
+    if ('inert' in HTMLElement.prototype) {
+      this.container.inert = false; // Ensure the container isn't inert
+      this.container.setAttribute('data-focus-trap-container', true); // Mark for identification
+    }
+
+    // Track tab direction
+    this.container.addEventListener('keydown', this._onKeydown);
+  }
+
+  /**
+   * Handles keydown events to manage tab navigation within the container.
+   * Ensures that focus wraps around when reaching the first or last focusable element.
+   *
+   * @param {KeyboardEvent} e The keyboard event triggered by user interaction.
+   * @private
+   */
+  _onKeydown = (e) => {
+    
+    if (e.key === 'Tab') {
+
+      // Set the tab direction based on the key pressed
+      this.tabDirection = e.shiftKey ? 'backward' : 'forward';
+
+      // Get the active element(s) in the document and shadow root
+      // This will include the active element in the shadow DOM if it exists
+      // Active element may be inside the shadow DOM depending on delegatesFocus, so we need to check both
+      const actives =  [
+        document.activeElement,
+        ...document.activeElement.shadowRoot && [document.activeElement.shadowRoot.activeElement] || []
+      ];
+
+      // Update the focusable elements
+      const focusables = this._getFocusableElements();
+
+      // If we're at either end of the focusable elements, wrap around to the other end
+      const focusIndex =
+        (actives.includes(focusables[0]) || actives.includes(this.container)) && this.tabDirection === 'backward'
+          ? focusables.length - 1
+          : actives.includes(focusables[focusables.length - 1]) && this.tabDirection === 'forward'
+            ? 0
+            : null;
+
+      if (focusIndex !== null) {
+        focusables[focusIndex].focus();
+        e.preventDefault(); // Prevent default tab behavior
+        e.stopPropagation(); // Stop the event from bubbling up
+      }
+    }
+  };
+
+  /**
+   * Retrieves all focusable elements within the container in DOM order, including those in shadow DOM and slots.
+   * Returns a unique, ordered array of elements that can receive focus.
+   *
+   * @returns {Array<HTMLElement>} An array of focusable elements within the container.
+   * @private
+   */
+  _getFocusableElements() {
+    // Use the imported utility function to get focusable elements
+    const elements = getFocusableElements(this.container);
+    
+    // Filter out any elements with the 'focus-bookend' class
+    return elements;
+  }
+
+  /**
+   * Moves focus to the first focusable element within the container.
+   * Useful for setting initial focus when activating the focus trap.
+   */
+  focusFirstElement() {
+    const focusables = this._getFocusableElements();
+    if (focusables.length) focusables[0].focus();
+  }
+
+  /**
+   * Moves focus to the last focusable element within the container.
+   * Useful for setting focus when deactivating or cycling focus in reverse.
+   */
+  focusLastElement() {
+    const focusables = this._getFocusableElements();
+    if (focusables.length) focusables[focusables.length - 1].focus();
+  }
+
+  /**
+   * Removes event listeners and attributes added by the focus trap.
+   * Call this method to clean up when the focus trap is no longer needed.
+   */
+  disconnect() {
+
+    if (this.container.hasAttribute('data-focus-trap-container')) {
+      this.container.removeAttribute('data-focus-trap-container');
+    }
+
+    this.container.removeEventListener('keydown', this._onKeydown);
+  }
+}
+
+/* eslint-disable lit/no-invalid-html, lit/binding-positions, max-lines, prefer-destructuring, no-underscore-dangle, arrow-parens, no-confusing-arrow, curly, no-unused-expressions */
 
 
 /**
@@ -9085,6 +9344,11 @@ class AuroCounterGroup extends AuroElement {
      */
     this.validation = new AuroFormValidation();
 
+    // Bind callback methods since we can't use arrow functions in class properties
+
+    /** @private */
+    this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
+
     /**
      * Generate unique names for dependency components.
      * @private
@@ -9262,51 +9526,6 @@ class AuroCounterGroup extends AuroElement {
     };
   }
 
-  /**
-   * Traps keyboard tab interactions within dropdown when open.
-   * @private
-   * @param {KeyboardEvent} event - The keyboard event.
-   * @param {NodeList} counters - The list of counter elements.
-   */
-  trapKeyboard(event, counters) {
-    if (!this.dropdown.isPopoverVisible) {
-      return;
-    }
-
-    event.stopPropagation();
-    event.preventDefault();
-
-    const firstFocusable = counters[0];
-    const lastFocusable = counters[counters.length - 1];
-
-    if (event.key === 'Enter') {
-      firstFocusable.focus();
-    }
-
-    if (event.key === 'Escape') {
-      this.dropdown.hide();
-    }
-
-    if (event.key === 'Tab' && this.dropdown && event.target.offsetParent === this.dropdown.bib) {
-      this.dropdown.noHideOnThisFocusLoss = true;
-
-      const currentIndex = Array.from(counters).indexOf(document.activeElement);
-
-      if (event.shiftKey) {
-        if (currentIndex === 0) {
-          lastFocusable.focus();
-        } else {
-          counters[currentIndex - 1].focus();
-        }
-      } else if (currentIndex === counters.length - 1) {
-        firstFocusable.focus();
-      } else {
-        counters[currentIndex + 1].focus();
-      }
-
-    }
-  }
-
   /**
    * Dynamically disables increment/decrement buttons on a counter based on group value.
    * This method checks the total aggregated value against the group's min and max properties.
@@ -9340,6 +9559,52 @@ class AuroCounterGroup extends AuroElement {
     });
   }
 
+  /**
+   * Performs state updates that should happen when the dropdown is toggled.
+   * @returns {void}
+   * @private
+   */
+  handleDropdownToggle() {
+
+    // Check if the dropdown is open
+    const dropdownIsOpen = this.dropdown.isPopoverVisible;
+
+    // Adds and removes the focus trap based on the dropdown state
+    this.updateFocusTrap(dropdownIsOpen);
+
+    // Tasks to perform if the dropdown is closed
+    if (!dropdownIsOpen) {
+
+      // Shift focus to the dropdown trigger
+      this.dropdown.trigger.focus();
+    }
+  }
+
+  /**
+   * Updates the focus trap based on whether the dropdown is open or closed.
+   * If the dropdown is open, it creates a new focus trap and focuses the first element
+   * If the dropdown is closed, it disconnects the focus trap if it exists to prevent memory leaks and disable focus trapping.
+   * @param {boolean} dropdownIsOpen - Indicates whether the dropdown is currently open.
+   * @returns {void}
+   * @private
+   */
+  updateFocusTrap(dropdownIsOpen) {
+
+    // If the dropdown is open, create a focus trap and focus the first element
+    if (dropdownIsOpen) {
+      this.dropdownFocusTrap = new FocusTrap(this.dropdown.bibContent);
+      this.dropdownFocusTrap.focusFirstElement();
+      return;
+    }
+
+    // Guard Clause: Ensure there is a focus trap currently active before continuing
+    if (!this.dropdownFocusTrap) return;
+
+    // If the dropdown is not open, disconnect the focus trap if it exists
+    this.dropdownFocusTrap.disconnect();
+    this.dropdownFocusTrap = undefined;
+  }
+
   /**
    * Configures the dropdown counters by selecting all `auro-counter` elements,
    * appending them to the `auro-counter-wrapper` element within the shadow DOM,
@@ -9348,28 +9613,14 @@ class AuroCounterGroup extends AuroElement {
    */
   configureDropdownCounters() {
     this.dropdown = this.shadowRoot.querySelector(this.dropdownTag._$litStatic$);
-    this.dropdown.addEventListener('keydown', (event) => this.trapKeyboard(event, this.counters, 'dropdown'));
-    // notify dropdown to reconfigure as the trigger text is updated
     this.dropdown.requestUpdate();
 
-    this.addEventListener('auroDropdown-toggled', () => {
-      if (!this.dropdown.isPopoverVisible) {
-        this.dropdown.focus();
-      }
-    });
+    this.dropdown.addEventListener("auroDropdown-toggled", this.handleDropdownToggle);
 
     const counterWrapper = this.shadowRoot.querySelector('auro-counter-wrapper');
     const counterSlot = counterWrapper.querySelector('slot');
     this.counters = counterSlot.assignedElements().filter(el => el.tagName.toLowerCase() === 'auro-counter' || el.hasAttribute('auro-counter'));
 
-    if (this.keydownHandler) {
-      counterWrapper.removeEventListener('keydown', this.keydownHandler);
-    }
-    this.keydownHandler = (keydownEvent) => {
-      this.trapKeyboard(keydownEvent, this.counters);
-    };
-    counterWrapper.addEventListener('keydown', this.keydownHandler);
-
     this.counters.forEach((counter) => {
       counter.addEventListener("input", () => this.updateValue());
     });
@@ -9511,6 +9762,13 @@ class AuroCounterGroup extends AuroElement {
     this.updateValueText();
   }
 
+  disconnectedCallback() {
+    super.disconnectedCallback();
+
+    // Remove the event listener for dropdown toggling
+    this.removeEventListener("auroDropdown-toggled", this.handleDropdownToggle);
+  }
+
   /**
    * Registers the custom element with the browser.
    * @param {string} [name="auro-counter-group"] - Custom element name to register.
@@ -9529,6 +9787,7 @@ class AuroCounterGroup extends AuroElement {
   renderCounterDropdown() {
     return html$1`
       <${this.dropdownTag} 
+        noHideOnThisFocusLoss
         chevron common fluid
         part="dropdown"
         ?autoPlacement="${this.autoPlacement}"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurodesignsystem-dev/auro-formkit",
-  "version": "0.0.0-pr624.16",
+  "version": "0.0.0-pr624.17",
   "description": "A collection of web components used to build forms.",
   "homepage": "https://github.com/AlaskaAirlines/auro-formkit#readme",
   "bugs": {
@@ -52,7 +52,7 @@
     "deploy-demo": "npm run build && sh ./deploy-components.sh"
   },
   "dependencies": {
-    "@aurodesignsystem/auro-library": "^5.0.2",
+    "@aurodesignsystem/auro-library": "^5.1.0",
     "@lit/reactive-element": "^2.1.0",
     "lit": "^3.2.1"
   },