@sveltia/ui 0.78.3 → 0.79.0

package/dist/services/group.svelte.js

@@ -2,36 +2,21 @@ import { isRTL } from '@sveltia/i18n';
 import { generateElementId } from '@sveltia/utils/element';
 import { sleep } from '@sveltia/utils/misc';
 import { untrack } from 'svelte';
+import { scrollIntoViewIfNeeded } from './scroll.js';
 import { getSelectedItemDetail } from './select.svelte.js';
+import { normalize } from './text.js';
+import { getArrowKeys, getGridTargetIndex, getLinearTargetIndex } from './navigation.js';
 import { findTypeAheadMatch, TypeAhead } from './type-ahead.js';
+import { activateBefore, activateLater } from './widget.js';
 
 /**
  * @import { Attachment } from 'svelte/attachments';
  */
 
 /**
- * Diacritic characters regex for normalization. We use a regex instead of `Intl` APIs for better
- * performance, since `transliterate` is slow and we only need basic normalization.
+ * CSS selector matching the members that are disabled or hidden, which are left out of navigation.
  */
-const DIACRITIC_RE = /\p{Diacritic}/gu;
-
-/**
- * Normalize the given string for search value comparison. Since `transliterate` is slow, we only
- * apply basic normalization.
- * @internal
- * @param {string} value Original value.
- * @returns {string} Normalized value.
- * @todo Move this to `@sveltia/utils`.
- */
-export const normalize = (value) => {
-  value = value.trim();
-
-  if (!value) {
-    return '';
-  }
-
-  return value.normalize('NFD').replace(DIACRITIC_RE, '').toLocaleLowerCase();
-};
+const INACTIVE_MEMBER_SELECTOR = '[aria-disabled="true"], [aria-hidden="true"]';
 
 /**
  * Set an element’s `tabindex` attribute, leaving the DOM alone if it already holds that value.
@@ -188,6 +173,18 @@ const getMenuOpener = (element) => {
   return null;
 };
 
+/**
+ * Check whether the given member can hold a selected state. A plain menu item is an action, not a
+ * choice, so it has no checked state, and a member marked with `data-selectable="false"`, such as
+ * the caption row of a collapsible row group in a grid, can be focused but not selected.
+ * @internal
+ * @param {HTMLElement} element Member element.
+ * @param {string | null} [role] The member’s role, if already read.
+ * @returns {boolean} Result.
+ */
+const isSelectable = (element, role = element.getAttribute('role')) =>
+  role !== 'menuitem' && element.dataset.selectable !== 'false';
+
 /**
  * Implement keyboard and mouse interactions for a grouping composite widget.
  */
@@ -198,6 +195,12 @@ export class Group {
    */
   activated = false;
 
+  /**
+   * Observer of the members’ selected state, for the widgets whose panels or tab stop follow it.
+   * @type {MutationObserver | undefined}
+   */
+  selectionObserver = undefined;
+
   /**
    * Whether {@link destroy} has run, so a pending {@link activate} must not run.
    * @type {boolean}
@@ -239,6 +242,13 @@ export class Group {
    */
   #typeAhead = new TypeAhead();
 
+  /**
+   * Whether {@link selectTarget} is clicking a radio button to have its component check it, so the
+   * click that comes back to {@link onClick} is not handled as a second selection.
+   * @type {boolean}
+   */
+  #clickingRadio = false;
+
   /**
    * Get the normalized value a member is searched by, computing it only when the underlying raw
    * value has changed since the last call.
@@ -265,6 +275,30 @@ export class Group {
     return normalized;
   }
 
+  /**
+   * Get the panel a member controls, if the group owns such panels. See {@link controlsPanel}.
+   * @param {HTMLElement} member Member element.
+   * @returns {HTMLElement | null} The member’s `aria-controls` target, or `null` if there’s none
+   * or the group doesn’t own its members’ targets.
+   */
+  #getControlTarget(member) {
+    const controlTargetId = this.controlsPanel ? member.getAttribute('aria-controls') : null;
+
+    // Looked up by ID rather than with a selector, which would throw on an ID that isn’t a valid
+    // CSS identifier, such as one starting with a digit
+    return controlTargetId ? document.getElementById(controlTargetId) : null;
+  }
+
+  /**
+   * Show or hide a panel controlled by a member, both to the user and to assistive technology.
+   * @param {HTMLElement} panel Panel element.
+   * @param {boolean} shown Whether the panel is to be shown.
+   */
+  #setPanelShown(panel, shown) {
+    panel.inert = !shown;
+    panel.setAttribute('aria-hidden', String(!shown));
+  }
+
   /**
    * Initialize a new `Group` instance.
    * @param {HTMLElement} parent Parent element.
@@ -281,19 +315,10 @@ export class Group {
     this.parentGroupSelector = `[role="group"], [role="${this.role}"]`;
     this.clickToSelect = clickToSelect;
 
-    // eslint-disable-next-line jsdoc/require-description
     /** @type {(event: MouseEvent) => void} */
-    this._onClick = (event) => {
-      this.activate();
-      this.onClick(event);
-    };
-
-    // eslint-disable-next-line jsdoc/require-description
+    this._onClick = activateBefore(this, (event) => this.onClick(event));
     /** @type {(event: KeyboardEvent) => void} */
-    this._onKeyDown = (event) => {
-      this.activate();
-      this.onKeyDown(event);
-    };
+    this._onKeyDown = activateBefore(this, (event) => this.onKeyDown(event));
 
     const {
       orientation,
@@ -354,20 +379,30 @@ export class Group {
       attributeFilter: ['aria-disabled', 'aria-hidden'],
     });
 
+    // A member can also be selected from code, as when a `<Tab>`’s `selected` prop changes. The
+    // group’s own writes are already in sync, so this only matters for the ones made elsewhere: the
+    // panels and the roving tab stop have to follow the new selection.
+    if (controlsPanel || (focusChild && rovingTabStop === 'selected')) {
+      this.selectionObserver = new globalThis.MutationObserver(() => {
+        if (this.activated) {
+          this.syncSelection();
+        }
+      });
+
+      this.selectionObserver.observe(parent, {
+        subtree: true,
+        attributes: true,
+        attributeFilter: [childSelectedAttr],
+      });
+    }
+
     // Listen right away: a click or a key press that comes before the activation below activates
     // the members first, rather than being lost
     parent.addEventListener('click', this._onClick);
     parent.addEventListener('keydown', this._onKeyDown);
 
     // Wait a bit before the relevant components, including the `aria-controls` target are mounted
-    (async () => {
-      await sleep(100);
-
-      // The widget may have been unmounted in the meantime
-      if (!this.#destroyed) {
-        this.activate();
-      }
-    })();
+    activateLater(this, () => this.#destroyed);
   }
 
   /**
@@ -388,30 +423,21 @@ export class Group {
         element.getAttribute(this.childSelectedAttr) === 'true' ||
         (defaultSelected ? element === defaultSelected : this.selectFirst && index === 0);
 
-      const controlTargetId = this.controlsPanel ? element.getAttribute('aria-controls') : null;
-      // Looked up by ID rather than with a selector, which would throw on an ID that isn’t a valid
-      // CSS identifier, such as one starting with a digit
-      const controlTarget = controlTargetId ? document.getElementById(controlTargetId) : null;
+      const controlTarget = this.#getControlTarget(element);
 
       element.id ||= `${this.id}-item-${index + 1}`;
-      element.setAttribute(this.childSelectedAttr, String(isSelected));
+
+      if (isSelectable(element)) {
+        element.setAttribute(this.childSelectedAttr, String(isSelected));
+      }
 
       if (controlTarget) {
-        controlTarget.inert = !isSelected;
         controlTarget.setAttribute('aria-labelledby', element.id);
-        controlTarget.setAttribute('aria-hidden', String(!isSelected));
+        this.#setPanelShown(controlTarget, isSelected);
 
         if (isSelected) {
           globalThis.setTimeout(() => {
-            try {
-              controlTarget.scrollIntoView({
-                block: 'nearest',
-                inline: 'nearest',
-                behavior: 'auto',
-              });
-            } catch {
-              controlTarget.scrollIntoView(true);
-            }
+            scrollIntoViewIfNeeded(controlTarget);
           }, 300);
         }
       }
@@ -454,11 +480,7 @@ export class Group {
       focused ??
       (holders.length === 1
         ? holders[0]
-        : ((this.rovingTabStop === 'selected'
-            ? activeMembers.find(
-                (element) => element.getAttribute(this.childSelectedAttr) === 'true',
-              )
-            : undefined) ?? activeMembers[0]));
+        : ((this.rovingTabStop === 'selected' ? this.selected : undefined) ?? activeMembers[0]));
 
     allMembers.forEach((element) => {
       // Only touch the DOM when it changes; this runs on every mutation of a large widget. The
@@ -468,6 +490,39 @@ export class Group {
     });
   }
 
+  /**
+   * Bring the panels and the roving tab stop in line with the members’ selected state, after it has
+   * been changed from outside the group.
+   */
+  syncSelection() {
+    const { allMembers, parent } = this;
+
+    if (this.controlsPanel) {
+      allMembers.forEach((element) => {
+        const controlTarget = this.#getControlTarget(element);
+
+        if (controlTarget) {
+          this.#setPanelShown(
+            controlTarget,
+            element.getAttribute(this.childSelectedAttr) === 'true',
+          );
+        }
+      });
+    }
+
+    // The tab stop moves to the newly selected member, unless the user is in the widget, in which
+    // case it stays where they are
+    if (this.focusChild && !parent.contains(document.activeElement)) {
+      const { selected } = this;
+
+      if (selected) {
+        allMembers.forEach((element) => {
+          setTabIndex(element, element === selected ? 0 : -1);
+        });
+      }
+    }
+  }
+
   /**
    * Count the columns of a grid layout from where the members sit, rather than from their widths:
    * a row of a data grid spans the full width, a tile in a grid listbox doesn’t, and a header row
@@ -516,9 +571,7 @@ export class Group {
 
       this.#memberCache = {
         all,
-        active: all.filter(
-          (element) => !element.matches('[aria-disabled="true"], [aria-hidden="true"]'),
-        ),
+        active: all.filter((element) => !element.matches(INACTIVE_MEMBER_SELECTOR)),
       };
     }
 
@@ -631,7 +684,7 @@ export class Group {
     for (let i = 0; i < 20; i += 1) {
       const first = /** @type {HTMLElement | undefined} */ (
         [...(submenu?.querySelectorAll(this.selector) ?? [])].find(
-          (element) => !element.matches('[aria-disabled="true"], [aria-hidden="true"]'),
+          (element) => !element.matches(INACTIVE_MEMBER_SELECTOR),
         )
       );
 
@@ -692,6 +745,141 @@ export class Group {
     return this.role === 'grid' || (this.role === 'listbox' && this.parent.matches('.grid'));
   }
 
+  /**
+   * Set a member’s selected state and tell its component about the change.
+   * @param {HTMLElement} element Member element.
+   * @param {boolean} selected Whether the member is selected.
+   */
+  #setMemberSelected(element, selected) {
+    element.setAttribute(this.childSelectedAttr, String(selected));
+    element.dispatchEvent(
+      new CustomEvent('Change', { detail: { [this.childSelectedProp]: selected } }),
+    );
+  }
+
+  /**
+   * Click a radio button, so its component checks itself and updates its bound group. The click
+   * bubbles back up to the group, which must not take it as another selection.
+   * @param {HTMLElement} element Radio button.
+   */
+  #clickRadio(element) {
+    this.#clickingRadio = true;
+
+    try {
+      element.click();
+    } finally {
+      this.#clickingRadio = false;
+    }
+  }
+
+  /**
+   * Apply a selection made on the target to one of the members taking part in it: activate a plain
+   * menu item, toggle a member of a multi-select group, or check or uncheck a member of a
+   * single-select group.
+   * @param {MouseEvent | KeyboardEvent} event Triggered event.
+   * @param {HTMLElement} element Member element.
+   * @param {object} context Selection context.
+   * @param {string | null} context.role The member’s role.
+   * @param {boolean} context.isTarget Whether the member is the target.
+   * @param {boolean} context.targetSelectable Whether the target can hold a selected state.
+   * @param {boolean} context.selecting Whether the event is a click or Space, which selects, rather
+   * than a key that merely moves.
+   * @returns {boolean} Whether the member’s selection changed, or an action was taken on it.
+   */
+  #applySelection(event, element, { role, isTarget, targetSelectable, selecting }) {
+    const isMenuItemRadio = role === 'menuitemradio';
+    const selectable = isSelectable(element, role);
+    const multiSelect = selectable && (role === 'menuitemcheckbox' || this.multi);
+    const singleSelect = selectable && targetSelectable && (isMenuItemRadio || !multiSelect);
+    const isSelected = element.getAttribute(this.childSelectedAttr) === 'true';
+    let changed = false;
+
+    // A plain menu item is activated, never checked, and only by a click or Space: the arrow
+    // keys merely move to it
+    if (role === 'menuitem' && isTarget && selecting) {
+      changed = true;
+      element.dispatchEvent(new CustomEvent('Select'));
+    }
+
+    if (multiSelect && isTarget && selecting) {
+      changed = true;
+      this.#setMemberSelected(element, !isSelected);
+
+      if (!isSelected) {
+        element.dispatchEvent(new CustomEvent('Select'));
+      }
+    }
+
+    if (singleSelect && isSelected !== isTarget && (isMenuItemRadio ? selecting : true)) {
+      changed = true;
+      this.#setMemberSelected(element, isTarget);
+
+      if (isTarget) {
+        if (event.type === 'keydown' && role === 'radio') {
+          this.#clickRadio(element);
+        }
+
+        element.dispatchEvent(new CustomEvent('Select'));
+      }
+    }
+
+    return changed;
+  }
+
+  /**
+   * Move the cursor onto the target, or off any other member taking part in a selection: the
+   * focused state where the group itself holds focus, the panel the member controls, and the
+   * group’s active descendant.
+   * @param {HTMLElement} element Member element.
+   * @param {boolean} isTarget Whether the member is the target.
+   * @param {HTMLElement[]} scrollTargets Elements to be scrolled into view, which the target and
+   * its panel are added to.
+   */
+  #moveCursor(element, isTarget, scrollTargets) {
+    const controlTarget = this.#getControlTarget(element);
+
+    if (!this.focusChild) {
+      element.classList.toggle('focused', isTarget);
+
+      if (isTarget) {
+        element.dispatchEvent(new CustomEvent('Focus'));
+      }
+    }
+
+    if (controlTarget) {
+      this.#setPanelShown(controlTarget, isTarget);
+
+      if (isTarget) {
+        scrollTargets.push(controlTarget);
+      }
+    }
+
+    if (isTarget) {
+      this.parent.setAttribute('aria-activedescendant', element.id);
+      scrollTargets.push(element);
+    }
+  }
+
+  /**
+   * Move the roving tab stop and the focus onto the target.
+   * @param {HTMLElement[]} affected Members that took part in the selection.
+   * @param {HTMLElement} newTarget Target element.
+   * @param {boolean} targetAffected Whether the target itself took part, meaning it’s the one to
+   * receive focus.
+   */
+  #moveFocus(affected, newTarget, targetAffected) {
+    // Done right away rather than on the next frame: a key that repeats, or a second press before
+    // the frame, has to start from the member that was just reached, which it reads from the focus
+    affected.forEach((element) => {
+      setTabIndex(element, element === newTarget ? 0 : -1);
+    });
+
+    if (targetAffected) {
+      newTarget.focus();
+      newTarget.dispatchEvent(new CustomEvent('Focus'));
+    }
+  }
+
   /**
    * Select (and move focus to) the given target.
    * @param {(MouseEvent | KeyboardEvent)} event Triggered event.
@@ -706,10 +894,14 @@ export class Group {
 
     const targetRole = newTarget.getAttribute('role');
     const targetParent = newTarget.closest(this.parentGroupSelector);
-    const selectByClick = event.type === 'click';
+    // Moving to a member that can’t be selected, such as a plain menu item, leaves the selection
+    // as it is, rather than clearing it as moving to another member of a single-select group does
+    const targetSelectable = isSelectable(newTarget, targetRole);
 
-    const selectByKeydown =
-      event.type === 'keydown' && /** @type {KeyboardEvent} */ (event).key === ' ';
+    // A click or Space selects; the arrow keys and the like merely move
+    const selecting =
+      event.type === 'click' ||
+      (event.type === 'keydown' && /** @type {KeyboardEvent} */ (event).key === ' ');
 
     /**
      * Members that took part in this selection, and whose roving `tabindex` therefore has to be
@@ -727,82 +919,36 @@ export class Group {
      * @type {HTMLElement[]}
      */
     const scrollTargets = [];
+    /**
+     * Whether the selection changed, or an action was taken on a menu item, which is what the
+     * group’s own `Change` event reports. Moving the cursor alone, or selecting the member that is
+     * already selected, changes nothing.
+     * @type {boolean}
+     */
+    let changed = false;
 
     this.activeMembers.forEach((element) => {
       // Reading the role once and comparing it is markedly cheaper than putting every member
       // through the selector engine three times over
       const role = element.getAttribute('role');
-      const isMenuItemCheckbox = role === 'menuitemcheckbox';
-      const isMenuItemRadio = role === 'menuitemradio';
 
       if (
-        (isMenuItemCheckbox || isMenuItemRadio) &&
+        (role === 'menuitemcheckbox' || role === 'menuitemradio') &&
         (role !== targetRole || element.closest(this.parentGroupSelector) !== targetParent)
       ) {
         return;
       }
 
-      const multiSelect = isMenuItemCheckbox || this.multi;
-      const singleSelect = isMenuItemRadio || !multiSelect;
       const isTarget = element === newTarget;
-      const isSelected = element.getAttribute(this.childSelectedAttr) === 'true';
-      const controlTargetId = this.controlsPanel ? element.getAttribute('aria-controls') : null;
-      const controlTarget = controlTargetId ? document.getElementById(controlTargetId) : null;
 
       affected.push(element);
       targetAffected ||= isTarget;
 
-      if (multiSelect && isTarget && (selectByClick || selectByKeydown)) {
-        element.setAttribute(this.childSelectedAttr, String(!isSelected));
-        element.dispatchEvent(
-          new CustomEvent('Change', { detail: { [this.childSelectedProp]: !isSelected } }),
-        );
-
-        if (!isSelected) {
-          element.dispatchEvent(new CustomEvent('Select'));
-        }
+      if (this.#applySelection(event, element, { role, isTarget, targetSelectable, selecting })) {
+        changed = true;
       }
 
-      if (
-        singleSelect &&
-        isSelected !== isTarget &&
-        (isMenuItemRadio ? selectByKeydown || selectByClick : true)
-      ) {
-        element.setAttribute(this.childSelectedAttr, String(isTarget));
-        element.dispatchEvent(
-          new CustomEvent('Change', { detail: { [this.childSelectedProp]: isTarget } }),
-        );
-
-        if (isTarget) {
-          if (event.type === 'keydown' && role === 'radio') {
-            element.click();
-          }
-
-          element.dispatchEvent(new CustomEvent('Select'));
-        }
-      }
-
-      if (!this.focusChild) {
-        element.classList.toggle('focused', isTarget);
-
-        if (isTarget) {
-          element.dispatchEvent(new CustomEvent('Focus'));
-        }
-      }
-
-      if (controlTarget) {
-        controlTarget.inert = !isTarget;
-        controlTarget.setAttribute('aria-hidden', String(!isTarget));
-
-        if (isTarget) {
-          scrollTargets.push(controlTarget);
-        }
-      }
-
-      if (isTarget) {
-        this.parent.setAttribute('aria-activedescendant', element.id);
-        scrollTargets.push(element);
-      }
+      this.#moveCursor(element, isTarget, scrollTargets);
     });
 
     if (scrollTargets.length) {
@@ -810,22 +956,14 @@ export class Group {
     }
 
     if (this.focusChild) {
-      // Done right away rather than on the next frame: a key that repeats, or a second press
-      // before the frame, has to start from the member that was just reached, which it reads
-      // from the focus
-      affected.forEach((element) => {
-        setTabIndex(element, element === newTarget ? 0 : -1);
-      });
-
-      if (targetAffected) {
-        newTarget.focus();
-        newTarget.dispatchEvent(new CustomEvent('Focus'));
-      }
+      this.#moveFocus(affected, newTarget, targetAffected);
     }
 
-    this.parent.dispatchEvent(
-      new CustomEvent('Change', { detail: getSelectedItemDetail(newTarget) }),
-    );
+    if (changed) {
+      this.parent.dispatchEvent(
+        new CustomEvent('Change', { detail: getSelectedItemDetail(newTarget) }),
+      );
+    }
   }
 
   /**
@@ -839,13 +977,7 @@ export class Group {
     this.#scrollTimer = globalThis.setTimeout(() => {
       this.#scrollTimer = undefined;
 
-      elements.forEach((element) => {
-        try {
-          element.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'auto' });
-        } catch {
-          element.scrollIntoView(true);
-        }
-      });
+      elements.forEach(scrollIntoViewIfNeeded);
     }, 300);
   }
 
@@ -861,7 +993,7 @@ export class Group {
       ? target
       : /** @type {HTMLElement | null} */ (target.closest(this.selector));
 
-    if (!newTarget || event.button !== 0 || !this.clickToSelect) {
+    if (!newTarget || event.button !== 0 || !this.clickToSelect || this.#clickingRadio) {
       return;
     }
 
@@ -904,9 +1036,8 @@ export class Group {
 
     // eslint-disable-next-line prefer-destructuring
     const target = /** @type {HTMLElement} */ (event.target);
-    const { allMembers, activeMembers } = this;
+    const { activeMembers } = this;
 
-    /** @type {HTMLElement | undefined} */
     // A field the user is typing in keeps its keys: the caret moves, the text changes. Escape and
     // Tab still reach the group, so a menu holding a field can be left the usual ways.
     if (
@@ -918,17 +1049,7 @@ export class Group {
       return;
     }
 
-    const currentTarget = (() => {
-      if (!this.focusChild) {
-        return activeMembers.find((member) => member.matches('.focused'));
-      }
-
-      // A key pressed on a control inside a member, such as a checkbox in a grid row, moves from
-      // that member
-      const member = /** @type {HTMLElement | null} */ (target.closest(this.selector));
-
-      return member && this.parent.contains(member) ? member : undefined;
-    })();
+    const currentTarget = this.#getCurrentTarget(target);
 
     if (['Enter', ' ', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(key)) {
       event.preventDefault();
@@ -964,23 +1085,10 @@ export class Group {
       // browser, a printable key on a non-editable element starts Firefox’s find-as-you-type.
       event.preventDefault();
 
-      const labels = activeMembers.map((member) =>
-        normalize(
-          member.dataset.label ??
-            member.querySelector('.label')?.textContent ??
-            member.textContent ??
-            '',
-        ),
-      );
-
-      const index = findTypeAheadMatch(
-        labels,
-        this.#typeAhead.push(key),
-        currentTarget ? activeMembers.indexOf(currentTarget) : -1,
-      );
+      const newTarget = this.#getTypeAheadTarget(key, currentTarget);
 
-      if (index !== -1 && activeMembers[index] !== currentTarget) {
-        this.selectTarget(event, activeMembers[index]);
+      if (newTarget && newTarget !== currentTarget) {
+        this.selectTarget(event, newTarget);
       }
 
       return;
@@ -1015,11 +1123,12 @@ export class Group {
       }
     }
 
+    const rtl = isRTL();
+
     // Submenu traversal. In a vertical menu the inline arrows are free, so they step into a submenu
     // and back out again, as the Menu pattern expects. Mirrored for RTL.
     if (this.orientation === 'vertical' && isMenu) {
-      const intoSubmenuKey = isRTL() ? 'ArrowLeft' : 'ArrowRight';
-      const outOfSubmenuKey = isRTL() ? 'ArrowRight' : 'ArrowLeft';
+      const { prevKey: outOfSubmenuKey, nextKey: intoSubmenuKey } = getArrowKeys('horizontal', rtl);
 
       if (key === intoSubmenuKey && currentTarget?.getAttribute('aria-haspopup') === 'menu') {
         this.enterSubmenu(currentTarget);
@@ -1038,92 +1147,92 @@ export class Group {
       }
     }
 
-    let index;
-    let newTarget;
-
-    if (this.grid) {
-      const colCount = this.columnCount;
-      const lastIndex = allMembers.length - 1;
-      const _isRTL = isRTL();
-
-      index = currentTarget ? allMembers.indexOf(currentTarget) : -1;
-
-      // With nothing focused yet, the arrows start from either end, as in a list
-      if (index === -1) {
-        const forward = key === 'ArrowDown' || key === (_isRTL ? 'ArrowLeft' : 'ArrowRight');
-        const backward = key === 'ArrowUp' || key === (_isRTL ? 'ArrowRight' : 'ArrowLeft');
-
-        if (forward) {
-          [newTarget] = activeMembers;
-        } else if (backward) {
-          newTarget = activeMembers[activeMembers.length - 1];
-        }
-      }
+    const newTarget = this.#getArrowTarget(key, currentTarget, rtl);
 
-      if (key === 'ArrowUp' && index > 0) {
-        newTarget = allMembers[Math.max(index - colCount, 0)];
-      }
+    if (newTarget && newTarget !== currentTarget) {
+      this.selectTarget(event, newTarget);
+    }
+  }
 
-      if (key === 'ArrowDown' && index !== -1 && index < lastIndex) {
-        // A partial last row still gets reached
-        newTarget = allMembers[Math.min(index + colCount, lastIndex)];
-      }
+  /**
+   * Get the member a key press moves from: the member with the cursor where the group itself holds
+   * focus, otherwise the member the key was pressed on.
+   * @param {HTMLElement} target Element the key was pressed on.
+   * @returns {HTMLElement | undefined} Current member, if any.
+   */
+  #getCurrentTarget(target) {
+    if (!this.focusChild) {
+      return this.activeMembers.find((member) => member.matches('.focused'));
+    }
 
-      // In RTL, ArrowLeft moves to the next member, ArrowRight to the previous one
-      const prevKey = _isRTL ? 'ArrowRight' : 'ArrowLeft';
-      const nextKey = _isRTL ? 'ArrowLeft' : 'ArrowRight';
+    // A key pressed on a control inside a member, such as a checkbox in a grid row, moves from
+    // that member
+    const member = /** @type {HTMLElement | null} */ (target.closest(this.selector));
 
-      if (key === prevKey && index > 0) {
-        newTarget = allMembers[index - 1];
-      }
+    return member && this.parent.contains(member) ? member : undefined;
+  }
 
-      if (key === nextKey && index !== -1 && index < lastIndex) {
-        newTarget = allMembers[index + 1];
-      }
+  /**
+   * Get the next member whose label starts with what has been typed so far, including the given
+   * key.
+   * @param {string} key Printable key.
+   * @param {HTMLElement | undefined} currentTarget Current member, if any.
+   * @returns {HTMLElement | undefined} Matching member, if any.
+   */
+  #getTypeAheadTarget(key, currentTarget) {
+    const { activeMembers } = this;
+
+    const labels = activeMembers.map((member) =>
+      normalize(
+        member.dataset.label ??
+          member.querySelector('.label')?.textContent ??
+          member.textContent ??
+          '',
+      ),
+    );
 
-      if (newTarget?.matches('[aria-disabled="true"], [aria-hidden="true"]')) {
-        newTarget = undefined;
-      }
-    } else {
-      index = currentTarget ? activeMembers.indexOf(currentTarget) : -1;
+    const index = findTypeAheadMatch(
+      labels,
+      this.#typeAhead.push(key),
+      currentTarget ? activeMembers.indexOf(currentTarget) : -1,
+    );
 
-      const _isRTL = isRTL();
+    return index === -1 ? undefined : activeMembers[index];
+  }
 
-      // For horizontal orientation in RTL: ArrowLeft moves forward, ArrowRight moves backward
-      const prevKey =
-        this.orientation === 'horizontal' ? (_isRTL ? 'ArrowRight' : 'ArrowLeft') : 'ArrowUp';
+  /**
+   * Get the member an arrow key moves to.
+   * @param {string} key Pressed key.
+   * @param {HTMLElement | undefined} currentTarget Current member, if any.
+   * @param {boolean} rtl Whether the layout runs right to left.
+   * @returns {HTMLElement | undefined} Member to move to, if any.
+   */
+  #getArrowTarget(key, currentTarget, rtl) {
+    const { allMembers, activeMembers } = this;
 
-      const nextKey =
-        this.orientation === 'horizontal' ? (_isRTL ? 'ArrowLeft' : 'ArrowRight') : 'ArrowDown';
+    if (!this.grid) {
+      const index = currentTarget ? activeMembers.indexOf(currentTarget) : -1;
+      const keys = getArrowKeys(this.orientation, rtl);
 
-      if (key === prevKey) {
-        if (index > 0) {
-          // Previous member
-          newTarget = activeMembers[index - 1];
-        }
+      return activeMembers[
+        getLinearTargetIndex({ key, index, count: activeMembers.length, ...keys })
+      ];
+    }
 
-        if (index <= 0) {
-          // Last member (also handles the case when nothing is focused, index === -1)
-          newTarget = activeMembers[activeMembers.length - 1];
-        }
-      }
+    const { columnCount } = this;
+    // Members filtered out by a search take no cell in the layout, so they’re left out of the index
+    // the same way they’re left out of the column count. A disabled member still takes its cell,
+    // and stays in.
+    const members = allMembers.filter((member) => member.getAttribute('aria-hidden') !== 'true');
+    const index = currentTarget ? members.indexOf(currentTarget) : -1;
+    // With nothing focused yet, the arrows start from either end of the active members
+    const list = index === -1 ? activeMembers : members;
+    const keys = getArrowKeys('horizontal', rtl);
 
-      if (key === nextKey) {
-        if (index < activeMembers.length - 1) {
-          // Next member
-          newTarget = activeMembers[index + 1];
-        }
+    const newTarget =
+      list[getGridTargetIndex({ key, index, count: list.length, columnCount, ...keys })];
 
-        if (index === activeMembers.length - 1) {
-          // First member
-          [newTarget] = activeMembers;
-        }
-      }
-    }
-
-    if (newTarget && newTarget !== currentTarget) {
-      this.selectTarget(event, newTarget);
-    }
+    return newTarget?.matches('[aria-disabled="true"]') ? undefined : newTarget;
   }
 
   /**
@@ -1134,6 +1243,7 @@ export class Group {
     globalThis.clearTimeout(this.#scrollTimer);
     this.#typeAhead.reset();
     this.observer.disconnect();
+    this.selectionObserver?.disconnect();
     this.parent.removeEventListener('click', this._onClick);
     this.parent.removeEventListener('keydown', this._onKeyDown);
   }