Function tab

packages/react-aria/src/selection/useSelectableCollection.ts:372–400

()

  };

  let tab = () => {
    if (!allowsTabNavigation && ref.current) {
      // There may be elements that are "tabbable" inside a collection (e.g. in a grid cell).
      // However, collections should be treated as a single tab stop, with arrow key navigation internally.
      // We don't control the rendering of these, so we can't override the tabIndex to prevent tabbing.
      // Instead, we handle the Tab key, and move focus manually to the first/last tabbable element
      // in the collection, so that the browser default behavior will apply starting from that element
      // rather than the currently focused one.

      let walker = getFocusableTreeWalker(ref.current, {tabbable: true});
      let next: FocusableElement | undefined = undefined;
      let last: FocusableElement;
      do {
        last = walker.lastChild() as FocusableElement;
        if (last) {
          next = last;
        }
      } while (last);

      // If the active element is NOT tabbable but is contained by an element that IS tabbable (aka the cell), the browser will actually move focus to
      // the containing element. We need to special case this so that tab will move focus out of the grid instead of looping between
      // focusing the containing cell and back to the non-tabbable child element
      let activeElement = getActiveElement();
      if (next && (!isFocusWithin(next) || (activeElement && !isTabbable(activeElement)))) {
        focusWithoutScrolling(next);
      }
    }
    return {shouldContinuePropagation: true, shouldPreventDefault: false};
  };

  let shiftTab = () => {
    if (!allowsTabNavigation && ref.current) {