Merge 4132c4c into f43c1bc

adamjohnson · web-flow · commit fb0fbd2fa148 · 2026-01-21T22:08:36.000Z
diff --git a/core/pfe-core/controllers/at-focus-controller.ts b/core/pfe-core/controllers/at-focus-controller.ts
@@ -49,8 +49,13 @@ export abstract class ATFocusController<Item extends HTMLElement> {
 
   set atFocusedItemIndex(index: number) {
     const previousIndex = this.#atFocusedItemIndex;
-    const direction = index > previousIndex ? 1 : -1;
     const { items, atFocusableItems } = this;
+    // - Home (index=0): always search forward to find first focusable item
+    // - End (index=last): always search backward to find last focusable item
+    // - Other cases: use comparison to determine direction
+    const direction = index === 0 ? 1
+    : index >= items.length - 1 ? -1
+    : index > previousIndex ? 1 : -1;
     const itemsIndexOfLastATFocusableItem = items.indexOf(this.atFocusableItems.at(-1)!);
     let itemToGainFocus = items.at(index);
     let itemToGainFocusIsFocusable = atFocusableItems.includes(itemToGainFocus!);
diff --git a/core/pfe-core/controllers/combobox-controller.ts b/core/pfe-core/controllers/combobox-controller.ts
@@ -242,6 +242,7 @@ export class ComboboxController<
   #button: HTMLElement | null = null;
   #listbox: HTMLElement | null = null;
   #buttonInitialRole: string | null = null;
+  #buttonHasMouseDown = false;
   #mo = new MutationObserver(() => this.#initItems());
   #microcopy = new Map<string, Record<Lang, string>>(Object.entries({
     dimmed: {
@@ -425,6 +426,8 @@ export class ComboboxController<
   #initButton() {
     this.#button?.removeEventListener('click', this.#onClickButton);
     this.#button?.removeEventListener('keydown', this.#onKeydownButton);
+    this.#button?.removeEventListener('mousedown', this.#onMousedownButton);
+    this.#button?.removeEventListener('mouseup', this.#onMouseupButton);
     this.#button = this.options.getToggleButton();
     if (!this.#button) {
       throw new Error('ComboboxController getToggleButton() option must return an element');
@@ -434,6 +437,8 @@ export class ComboboxController<
     this.#button.setAttribute('aria-controls', this.#listbox?.id ?? '');
     this.#button.addEventListener('click', this.#onClickButton);
     this.#button.addEventListener('keydown', this.#onKeydownButton);
+    this.#button.addEventListener('mousedown', this.#onMousedownButton);
+    this.#button.addEventListener('mouseup', this.#onMouseupButton);
   }
 
   #initInput() {
@@ -580,6 +585,17 @@ export class ComboboxController<
     }
   };
 
+  /**
+   * Distinguish click-to-toggle vs Tab/Shift+Tab
+  */
+  #onMousedownButton = () => {
+    this.#buttonHasMouseDown = true;
+  };
+
+  #onMouseupButton = () => {
+    this.#buttonHasMouseDown = false;
+  };
+
   #onClickListbox = (event: MouseEvent) => {
     if (!this.multi && event.composedPath().some(this.options.isItem)) {
       this.#hide();
@@ -735,9 +751,14 @@ export class ComboboxController<
   #onFocusoutListbox = (event: FocusEvent) => {
     if (!this.#hasTextInput && this.options.isExpanded()) {
       const root = this.#element?.getRootNode();
+      // Check if focus moved to the toggle button via mouse click
+      // If so, let the click handler manage toggle (prevents double-toggle)
+      // But if focus moved via Shift+Tab (no mousedown), we should still hide
+      const isClickOnToggleButton =
+          event.relatedTarget === this.#button && this.#buttonHasMouseDown;
       if ((root instanceof ShadowRoot || root instanceof Document)
           && !this.items.includes(event.relatedTarget as Item)
-      ) {
+          && !isClickOnToggleButton) {
         this.#hide();
       }
     }
diff --git a/core/pfe-core/controllers/roving-tabindex-controller.ts b/core/pfe-core/controllers/roving-tabindex-controller.ts
@@ -77,6 +77,21 @@ export class RovingTabindexController<
       if (container instanceof HTMLElement) {
         container.addEventListener('focusin', () =>
           this.#gainedInitialFocus = true, { once: true });
+        // Sync atFocusedItemIndex when an item receives DOM focus (e.g., via mouse click)
+        // This ensures keyboard navigation starts from the correct position
+        container.addEventListener('focusin', (event: FocusEvent) => {
+          const target = event.target as Item;
+          const index = this.items.indexOf(target);
+          // Only update if the target is a valid item and index differs
+          if (index >= 0 && index !== this.atFocusedItemIndex) {
+            // Update index via setter, but avoid the focus() call by temporarily
+            // clearing #gainedInitialFocus to prevent redundant focus
+            const hadInitialFocus = this.#gainedInitialFocus;
+            this.#gainedInitialFocus = false;
+            this.atFocusedItemIndex = index;
+            this.#gainedInitialFocus = hadInitialFocus;
+          }
+        });
       } else {
         this.#logger.warn('RovingTabindexController requires a getItemsContainer function');
       }
