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

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

@@ -840,188 +840,6 @@ 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 */
 
 /**
@@ -1067,82 +885,6 @@ 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.
@@ -1241,18 +983,36 @@ 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)) {
-      if (evt.shiftKey) {
-        if (selectAndExitBackward(component)) {
-          evt.preventDefault();
-        }
-        return;
-      }
-
-      selectAndClose(component);
+      // 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 (ctx.isModal) {
-        // Fullscreen close does not automatically restore focus to the input.
+      // 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) {
         component.setClearBtnFocus();
       }
     }
@@ -5151,7 +4911,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$3 {
   }
 };
 
-var formkitVersion$2 = '202607090129';
+var formkitVersion$2 = '202607091532';
 
 let AuroElement$2 = class AuroElement extends i$3 {
   static get properties() {
@@ -18776,7 +18536,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
   }
 };
 
-var formkitVersion$1 = '202607090129';
+var formkitVersion$1 = '202607091532';
 
 // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -19897,7 +19657,7 @@ class AuroBibtemplate extends i$3 {
   }
 }
 
-var formkitVersion = '202607090129';
+var formkitVersion = '202607091532';
 
 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}`;
 
@@ -21429,11 +21189,8 @@ 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,
-        // unless the Shift+Tab handler opted this selection out.
-        if (this._suppressClearBtnFocusOnSelection) {
-          this._suppressClearBtnFocusOnSelection = false;
-        } else if (!isEcho && this.menu.value !== undefined) {
+        // Move focus to the clear button when the user makes a selection.
+        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 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 <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.
 </td>
 </tr>
 </tbody>

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

@@ -507,7 +507,6 @@ 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.