Class TabListPattern

src/aria/private/tabs/tabs.ts:123–306

/** Controls the state of a tablist. */
export class TabListPattern {
  /** The list focus behavior for the tablist. */
  readonly focusBehavior: ListFocus<TabPattern>;

  /** The list navigation behavior for the tablist. */
  readonly navigationBehavior: ListNavigation<TabPattern>;

  /** Controls expansion for the tablist. */
  readonly expansionBehavior: ListExpansion;

  /** Whether the tablist has been interacted with. */
  readonly hasBeenInteracted = signal(false);

  /** The currently active tab. */
  readonly activeTab: SignalLike<TabPattern | undefined>; // set from inputs

  /** The currently selected tab. */
  readonly selectedTab: WritableSignalLike<TabPattern | undefined>; // set from inputs

  /** Whether the tablist is vertically or horizontally oriented. */
  readonly orientation: SignalLike<'vertical' | 'horizontal'>; // set from inputs

  /** Whether the tablist is disabled. */
  readonly disabled: SignalLike<boolean>; // set from inputs

  /** The tab index of the tablist. */
  readonly tabIndex = computed(() => this.focusBehavior.getListTabIndex());

  /** The id of the current active tab. */
  readonly activeDescendant = computed(() => this.focusBehavior.getActiveDescendant());

  /** Whether selection should follow focus. */
  readonly followFocus = computed(() => this.inputs.selectionMode() === 'follow');

  /** The key used to navigate to the previous tab in the tablist. */
  readonly prevKey = computed(() => {
    if (this.inputs.orientation() === 'vertical') {
      return 'ArrowUp';
    }
    return this.inputs.textDirection() === 'rtl' ? 'ArrowRight' : 'ArrowLeft';
  });

  /** The key used to navigate to the next item in the list. */
  readonly nextKey = computed(() => {
    if (this.inputs.orientation() === 'vertical') {
      return 'ArrowDown';
    }
    return this.inputs.textDirection() === 'rtl' ? 'ArrowLeft' : 'ArrowRight';
  });

  /** The keydown event manager for the tablist. */
  readonly keydown = computed(() => {
    return new KeyboardEventManager()
      .on(
        this.prevKey,
        () => this._navigate(() => this.navigationBehavior.prev(), this.followFocus()),
        {ignoreRepeat: false},
      )