@aurodesignsystem-dev/auro-formkit 0.0.0-pr1545.1 → 0.0.0-pr1546.0

package/components/combobox/demo/index.min.js

@@ -840,6 +840,188 @@ function navigateArrow(component, direction, options = {}) {
   }
 }
 
+// Selectors for focusable elements
+const FOCUSABLE_SELECTORS$1 = [
+  "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$1 = [
+  "auro-checkbox",
+  "auro-radio",
+  "auro-dropdown",
+  "auro-button",
+  "auro-combobox",
+  "auro-input",
+  "auro-counter",
+  // 'auro-menu', // Auro menu is not focusable by default, it uses a different interaction model
+  "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$1(element) {
+  const componentName = element.tagName.toLowerCase();
+
+  // Guard Clause: Element is a focusable component
+  if (
+    !FOCUSABLE_COMPONENTS$1.some(
+      (name) => element.hasAttribute(name) || componentName === name,
+    )
+  )
+    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;
+}
+
+/**
+ * Safely get a numeric tabindex for an element.
+ * Returns a number if the tabindex is a valid integer, otherwise null.
+ *
+ * @param {HTMLElement} element The element whose tabindex to read.
+ * @returns {?number} The numeric tabindex or null if missing/invalid.
+ */
+function getNumericTabIndex$1(element) {
+  const raw = element.getAttribute("tabindex");
+  if (raw == null) return null;
+
+  const value = Number.parseInt(raw, 10);
+  return Number.isNaN(value) ? null : value;
+}
+
+/**
+ * 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.
+ * Also sorts elements with tabindex first, preserving their order.
+ *
+ * @param {HTMLElement} container The container to search within
+ * @returns {Array<HTMLElement>} An array of focusable elements within the container.
+ */
+function getFocusableElements$1(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$1(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$1) {
+        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);
+    }
+  }
+
+  // Move tab-indexed elements to the front while preserving their order
+  // This ensures that elements with tabindex are prioritized in the focus order
+
+  // First extract elements with valid positive tabindex
+  const elementsWithTabindex = uniqueElements.filter((el) => {
+    const tabindex = getNumericTabIndex$1(el);
+    return tabindex !== null && tabindex > 0;
+  });
+
+  // Sort these elements by their tabindex value
+  elementsWithTabindex.sort((a, b) => {
+    const aIndex = getNumericTabIndex$1(a) ?? 0;
+    const bIndex = getNumericTabIndex$1(b) ?? 0;
+    return aIndex - bIndex;
+  });
+
+  // Elements without tabindex (preserving their original order)
+  const elementsWithoutTabindex = uniqueElements.filter((el) => {
+    const tabindex = getNumericTabIndex$1(el);
+
+    // Elements without tabindex or with tabindex of 0 stay in DOM order
+    return tabindex === null || tabindex === 0;
+  });
+
+  // Combine both arrays with tabindex elements first
+  const tabIndexedUniqueElements = [
+    ...elementsWithTabindex,
+    ...elementsWithoutTabindex,
+  ];
+
+  return tabIndexedUniqueElements;
+}
+
 /* eslint-disable no-underscore-dangle */
 
 /**
@@ -885,6 +1067,82 @@ function reconcileMenuIndex(menu) {
   }
 }
 
+/**
+ * Commit the highlighted option and close the bib.
+ * @param {Element} component - The auro-combobox host element.
+ */
+function selectAndClose(component) {
+  reconcileMenuIndex(component.menu);
+  component.menu.makeSelection();
+  component.hideBib();
+}
+
+/**
+ * Whether `el` is currently visible enough to receive focus. Prefers the
+ * browser's `checkVisibility()` (Chrome/Safari; Firefox behind a flag until
+ * recently); otherwise combines a display/visibility check with an
+ * ancestor-hidden probe that keeps position:fixed elements visible.
+ * @param {Element} el - The element to test.
+ * @returns {boolean}
+ */
+function isVisibleForFocus(el) {
+  if (typeof el.checkVisibility === 'function') {
+    return el.checkVisibility();
+  }
+  const style = el.ownerDocument.defaultView.getComputedStyle(el);
+  if (style.display === 'none' || style.visibility === 'hidden') {
+    return false;
+  }
+  return el.offsetParent !== null || style.position === 'fixed';
+}
+
+/**
+ * Return the tab stop that comes before `component` in page tab order,
+ * skipping any hidden entries the walker doesn't filter itself.
+ * @param {Element} component - The auro-combobox host element.
+ * @returns {Element|null}
+ */
+function getPreviousTabStop(component) {
+  const tabStops = getFocusableElements$1(component.ownerDocument.body);
+  const componentIndex = tabStops.indexOf(component);
+  for (let index = componentIndex - 1; index >= 0; index -= 1) {
+    if (isVisibleForFocus(tabStops[index])) {
+      return tabStops[index];
+    }
+  }
+  return null;
+}
+
+/**
+ * Commit the highlighted option, close the bib, and move focus to the tab
+ * stop before the combobox — the Shift+Tab exit path (AB#1592239).
+ * Returns true when this function moved focus and the caller should
+ * preventDefault; false when no previous tab stop was found and the browser's
+ * native traversal should run.
+ * @param {Element} component - The auro-combobox host element.
+ * @returns {boolean}
+ */
+function selectAndExitBackward(component) {
+  const previousTabStop = getPreviousTabStop(component);
+
+  // Opts this selection out of setClearBtnFocus so the focus move below
+  // isn't clobbered. Consumed by auro-combobox's selection listener; also
+  // cleared via microtask in case makeSelection is a no-op and the listener
+  // never fires (microtasks run before the next user event, so this can't
+  // leak into an unrelated selection).
+  component._suppressClearBtnFocusOnSelection = true;
+  selectAndClose(component);
+  queueMicrotask(() => {
+    component._suppressClearBtnFocusOnSelection = false;
+  });
+
+  if (!previousTabStop) {
+    return false;
+  }
+  doubleRaf(() => previousTabStop.focus());
+  return true;
+}
+
 const comboboxKeyboardStrategy = {
   ArrowDown(component, evt, ctx) {
     // If the clear button has focus, let the browser handle ArrowDown normally.
@@ -983,36 +1241,18 @@ const comboboxKeyboardStrategy = {
   },
 
   Tab(component, evt, ctx) {
-    // Runs for both Tab and Shift+Tab.
-    //
-    // Current behavior:
-    //   Tab       — select the active option, close the bib, and (in fullscreen
-    //               modal mode only) explicitly move focus to the trigger's
-    //               clear button. In desktop popover mode the browser's native
-    //               tab traversal takes focus forward from the input.
-    //   Shift+Tab — select the active option and close the bib. Focus then
-    //               lands on the trigger's clear button as a byproduct of the
-    //               shadow-DOM tab order, so keyboard users must press
-    //               Shift+Tab three times to exit the component (clear button
-    //               → input → previous element on the page).
-    //
-    // Intended behavior for Shift+Tab (per team decision, tracked in
-    // AB#1590650): a single Shift+Tab should select the active option, close
-    // the bib, and move focus directly to the previous focusable element on
-    // the page — symmetric with Tab.
     if (ctx.isExpanded && !isClearBtnFocused(ctx)) {
-      // When the clear button is focused, Tab events do not bubble out of
-      // its shadow DOM, so this handler only fires when the clear button
-      // is NOT focused. In that case, select the active option and close.
-      reconcileMenuIndex(component.menu);
-      component.menu.makeSelection();
-      component.hideBib();
+      if (evt.shiftKey) {
+        if (selectAndExitBackward(component)) {
+          evt.preventDefault();
+        }
+        return;
+      }
+
+      selectAndClose(component);
 
-      // In fullscreen modal mode, closing the dialog does not
-      // automatically restores focus to the input. In the tab case,
-      // Explicitly move focus to the trigger's clear button so the
-      // user can continues tabbing through the page normally.
-      if (ctx.isModal && !evt.shiftKey) {
+      if (ctx.isModal) {
+        // Fullscreen close does not automatically restore focus to the input.
         component.setClearBtnFocus();
       }
     }
@@ -4911,7 +5151,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$3 {
   }
 };
 
-var formkitVersion$2 = '202607082302';
+var formkitVersion$2 = '202607090129';
 
 let AuroElement$2 = class AuroElement extends i$3 {
   static get properties() {
@@ -18536,7 +18776,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
   }
 };
 
-var formkitVersion$1 = '202607082302';
+var formkitVersion$1 = '202607090129';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -19657,7 +19897,7 @@ class AuroBibtemplate extends i$3 {
   }
 }
 
-var formkitVersion = '202607082302';
+var formkitVersion = '202607090129';
 
 var styleCss$3 = i$6`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
 
@@ -21189,8 +21429,11 @@ class AuroCombobox extends AuroElement {
         // do not close while typing in suggestion mode with no value selected, to allow freeform input
         this.hideBib();
 
-        // Move focus to the clear button when the user makes a selection.
-        if (!isEcho && this.menu.value !== undefined) {
+        // Move focus to the clear button when the user makes a selection,
+        // unless the Shift+Tab handler opted this selection out.
+        if (this._suppressClearBtnFocusOnSelection) {
+          this._suppressClearBtnFocusOnSelection = false;
+        } else if (!isEcho && this.menu.value !== undefined) {
           this.setClearBtnFocus();
         }
 

package/components/combobox/demo/keyboard-behavior.md

@@ -175,7 +175,7 @@
 </div>
 </td>
 <td>
-              The current <code>focused</code> option is selected, the bib is closed and <strong>focus</strong> is moved to the <strong>clear button</strong> in the component trigger. A subsequent Shift+Tab moves focus back to the input, and another Shift+Tab exits the component to the previous focusable element on the page.
+              The current <code>focused</code> option is selected, the bib is closed and <strong>focus</strong> is moved to the previous focusable element on the page.
 </td>
 </tr>
 </tbody>

package/components/combobox/dist/auro-combobox.d.ts

@@ -507,6 +507,7 @@ export class AuroCombobox extends AuroElement {
     defaultMenuShape: string | null | undefined;
     _pendingMenuValueSync: boolean | undefined;
     value: any;
+    _suppressClearBtnFocusOnSelection: boolean | undefined;
     _programmaticFilterRefresh: boolean | undefined;
     /**
      * Binds all behavior needed to the input after rendering.