refactor(aria/toolbar): remove selection behavior (#33747)

Author: ok7sai

goldens/aria/private/index.api.md

@@ -641,85 +641,80 @@ export class TabPattern {
 }
 
 // @public
-export type ToolbarInputs<V> = Omit<ListInputs<ToolbarWidgetPattern<V>, V>, 'multi' | 'typeaheadDelay' | 'selectionMode' | 'focusMode'> & {
-    getItem: (e: Element) => ToolbarWidgetPattern<V> | undefined;
+export type ToolbarInputs = {
+    element: SignalLike<HTMLElement | undefined>;
+    activeItem: WritableSignalLike<ToolbarWidgetPattern | undefined>;
+    items: SignalLike<ToolbarWidgetPattern[]>;
+    softDisabled: SignalLike<boolean>;
+    disabled: SignalLike<boolean>;
+    orientation: SignalLike<'vertical' | 'horizontal'>;
+    textDirection: SignalLike<'rtl' | 'ltr'>;
+    wrap: SignalLike<boolean>;
+    getItem: (e: Element) => ToolbarWidgetPattern | undefined;
 };
 
 // @public
-export class ToolbarPattern<V> {
-    constructor(inputs: ToolbarInputs<V>);
+export class ToolbarPattern {
+    constructor(inputs: ToolbarInputs);
     readonly activeDescendant: SignalLike<string | undefined>;
-    readonly activeItem: () => ToolbarWidgetPattern<V> | undefined;
+    readonly activeItem: () => ToolbarWidgetPattern | undefined;
     readonly disabled: SignalLike<boolean>;
+    readonly focusManager: ListFocus<ToolbarWidgetPattern>;
     readonly hasBeenInteracted: WritableSignalLike<boolean>;
     // (undocumented)
-    readonly inputs: ToolbarInputs<V>;
-    readonly listBehavior: List<ToolbarWidgetPattern<V>, V>;
+    readonly inputs: ToolbarInputs;
+    readonly navigationBehavior: ListNavigation<ToolbarWidgetPattern>;
     onClick(event: MouseEvent): void;
     // (undocumented)
     onFocusIn(): void;
     onKeydown(event: KeyboardEvent): void;
     // (undocumented)
     onPointerdown(event: PointerEvent): void;
     readonly orientation: SignalLike<'vertical' | 'horizontal'>;
-    // (undocumented)
-    select(): void;
     setDefaultState(): void;
     setDefaultStateEffect(): void;
     readonly softDisabled: SignalLike<boolean>;
     readonly tabIndex: SignalLike<-1 | 0>;
-    validate(): string[];
 }
 
 // @public
-export interface ToolbarWidgetGroupInputs<T extends ListItem<V>, V> {
+export interface ToolbarWidgetGroupInputs {
     disabled: SignalLike<boolean>;
-    items: SignalLike<T[]>;
-    multi: SignalLike<boolean>;
-    toolbar: SignalLike<ToolbarPattern<V> | undefined>;
+    items: SignalLike<ToolbarWidgetPattern[]>;
+    toolbar: SignalLike<ToolbarPattern | undefined>;
 }
 
 // @public
-export class ToolbarWidgetGroupPattern<T extends ListItem<V>, V> {
-    constructor(inputs: ToolbarWidgetGroupInputs<T, V>);
+export class ToolbarWidgetGroupPattern {
+    constructor(inputs: ToolbarWidgetGroupInputs);
     readonly disabled: () => boolean;
     // (undocumented)
-    readonly element: () => undefined;
-    // (undocumented)
-    readonly inputs: ToolbarWidgetGroupInputs<T, V>;
-    readonly multi: () => boolean;
-    // (undocumented)
-    readonly searchTerm: () => string;
-    // (undocumented)
-    readonly selectable: () => boolean;
-    readonly toolbar: () => ToolbarPattern<V> | undefined;
-    // (undocumented)
-    readonly value: () => V;
+    readonly inputs: ToolbarWidgetGroupInputs;
+    readonly toolbar: () => ToolbarPattern | undefined;
 }
 
 // @public
-export interface ToolbarWidgetInputs<V> extends Omit<ListItem<V>, 'searchTerm' | 'index' | 'selectable'> {
-    group: SignalLike<ToolbarWidgetGroupPattern<ToolbarWidgetPattern<V>, V> | undefined>;
-    toolbar: SignalLike<ToolbarPattern<V>>;
+export interface ToolbarWidgetInputs {
+    disabled: SignalLike<boolean>;
+    element: SignalLike<HTMLElement | undefined>;
+    group: SignalLike<ToolbarWidgetGroupPattern | undefined>;
+    id: SignalLike<string>;
+    toolbar: SignalLike<ToolbarPattern>;
 }
 
 // @public (undocumented)
-export class ToolbarWidgetPattern<V> implements ListItem<V> {
-    constructor(inputs: ToolbarWidgetInputs<V>);
+export class ToolbarWidgetPattern implements ListFocusItem, ListNavigationItem {
+    constructor(inputs: ToolbarWidgetInputs);
     readonly active: SignalLike<boolean>;
     readonly disabled: () => boolean;
     readonly element: () => HTMLElement | undefined;
-    readonly group: () => ToolbarWidgetGroupPattern<ToolbarWidgetPattern<V>, V> | undefined;
+    readonly group: () => ToolbarWidgetGroupPattern | undefined;
     readonly id: () => string;
     readonly index: SignalLike<number>;
     // (undocumented)
-    readonly inputs: ToolbarWidgetInputs<V>;
-    readonly searchTerm: () => string;
-    readonly selectable: () => boolean;
-    readonly selected: SignalLike<boolean>;
+    readonly inputs: ToolbarWidgetInputs;
     readonly tabIndex: SignalLike<-1 | 0>;
-    readonly toolbar: () => ToolbarPattern<V>;
-    readonly value: () => V;
+    readonly toolbar: () => ToolbarPattern;
 }
 
 // @public

goldens/aria/toolbar/index.api.md

@@ -12,62 +12,58 @@ import { OnInit } from '@angular/core';
 import { Signal } from '@angular/core';
 
 // @public
-export class Toolbar<V> implements OnDestroy {
+export class Toolbar implements OnDestroy {
     constructor();
-    readonly _collection: SortedCollection<ToolbarWidget<V>>;
+    readonly _collection: SortedCollection<ToolbarWidget>;
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly element: HTMLElement;
-    readonly _itemPatterns: _angular_core.Signal<ToolbarWidgetPattern<V>[]>;
+    readonly _itemPatterns: _angular_core.Signal<ToolbarWidgetPattern[]>;
     // (undocumented)
     ngOnDestroy(): void;
     readonly orientation: _angular_core.InputSignal<"horizontal" | "vertical">;
-    readonly _pattern: ToolbarPattern<V>;
+    readonly _pattern: ToolbarPattern;
     readonly softDisabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly textDirection: _angular_core.WritableSignal<_angular_cdk_bidi.Direction>;
-    readonly value: _angular_core.ModelSignal<V[]>;
     readonly wrap: _angular_core.InputSignalWithTransform<boolean, unknown>;
     // (undocumented)
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Toolbar<any>, "[ngToolbar]", ["ngToolbar"], { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "softDisabled": { "alias": "softDisabled"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Toolbar, "[ngToolbar]", ["ngToolbar"], { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "softDisabled": { "alias": "softDisabled"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
     // (undocumented)
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Toolbar<any>, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<Toolbar, never>;
 }
 
 // @public
-export const TOOLBAR_WIDGET_GROUP: InjectionToken<ToolbarWidgetGroup<unknown>>;
+export const TOOLBAR_WIDGET_GROUP: InjectionToken<ToolbarWidgetGroup>;
 
 // @public
-export class ToolbarWidget<V> implements OnInit, OnDestroy {
+export class ToolbarWidget implements OnInit, OnDestroy {
     readonly active: _angular_core.Signal<boolean>;
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly element: HTMLElement;
-    readonly _group: ToolbarWidgetGroup<V> | null;
+    readonly _group: ToolbarWidgetGroup | null;
     readonly hardDisabled: _angular_core.Signal<boolean>;
     readonly id: _angular_core.InputSignal<string>;
     // (undocumented)
     ngOnDestroy(): void;
     // (undocumented)
     ngOnInit(): void;
-    readonly _pattern: ToolbarWidgetPattern<V>;
-    readonly selected: () => boolean;
-    readonly _toolbarPattern: _angular_core.Signal<ToolbarPattern<V>>;
-    readonly value: _angular_core.InputSignal<V>;
+    readonly _pattern: ToolbarWidgetPattern;
+    readonly _toolbarPattern: _angular_core.Signal<ToolbarPattern>;
     // (undocumented)
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ToolbarWidget<any>, "[ngToolbarWidget]", ["ngToolbarWidget"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ToolbarWidget, "[ngToolbarWidget]", ["ngToolbarWidget"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
     // (undocumented)
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ToolbarWidget<any>, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ToolbarWidget, never>;
 }
 
 // @public
-export class ToolbarWidgetGroup<V> {
+export class ToolbarWidgetGroup {
     constructor();
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly element: HTMLElement;
-    readonly multi: _angular_core.InputSignalWithTransform<boolean, unknown>;
-    readonly _pattern: ToolbarWidgetGroupPattern<ToolbarWidgetPattern<V>, V>;
+    readonly _pattern: ToolbarWidgetGroupPattern;
     // (undocumented)
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ToolbarWidgetGroup<any>, "[ngToolbarWidgetGroup]", ["ngToolbarWidgetGroup"], { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "multi": { "alias": "multi"; "required": false; "isSignal": true; }; }, {}, ["_widgets"], never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<ToolbarWidgetGroup, "[ngToolbarWidgetGroup]", ["ngToolbarWidgetGroup"], { "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, ["_widgets"], never, true, never>;
     // (undocumented)
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ToolbarWidgetGroup<any>, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ToolbarWidgetGroup, never>;
 }
 
 // (No @packageDocumentation comment for this package)

src/aria/private/public-api.ts

@@ -15,7 +15,6 @@ export * from './toolbar/toolbar';
 export * from './toolbar/toolbar-widget';
 export * from './toolbar/toolbar-widget-group';
 export * from './accordion/accordion';
-export * from './toolbar/toolbar';
 export * from './tree/tree';
 export * from './grid/grid';
 export * from './grid/row';

src/aria/private/toolbar/BUILD.bazel

@@ -12,7 +12,8 @@ ts_project(
     deps = [
         "//:node_modules/@angular/core",
         "//src/aria/private/behaviors/event-manager",
-        "//src/aria/private/behaviors/list",
+        "//src/aria/private/behaviors/list-focus",
+        "//src/aria/private/behaviors/list-navigation",
         "//src/aria/private/behaviors/signal-like",
         "//src/cdk/platform",
     ],

src/aria/private/toolbar/toolbar-widget-group.ts

@@ -6,40 +6,29 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {ListItem} from '../behaviors/list/list';
 import {SignalLike} from '../behaviors/signal-like/signal-like';
 import type {ToolbarPattern} from './toolbar';
+import type {ToolbarWidgetPattern} from './toolbar-widget';
 
 /** Represents the required inputs for a toolbar widget group. */
-export interface ToolbarWidgetGroupInputs<T extends ListItem<V>, V> {
+export interface ToolbarWidgetGroupInputs {
   /** A reference to the parent toolbar. */
-  toolbar: SignalLike<ToolbarPattern<V> | undefined>;
+  toolbar: SignalLike<ToolbarPattern | undefined>;
 
   /** Whether the widget group is disabled. */
   disabled: SignalLike<boolean>;
 
   /** The list of items within the widget group. */
-  items: SignalLike<T[]>;
-
-  /** Whether the group allows multiple widgets to be selected. */
-  multi: SignalLike<boolean>;
+  items: SignalLike<ToolbarWidgetPattern[]>;
 }
 
 /** A group of widgets within a toolbar that provides nested navigation. */
-export class ToolbarWidgetGroupPattern<T extends ListItem<V>, V> {
+export class ToolbarWidgetGroupPattern {
   /** Whether the widget is disabled. */
   readonly disabled = () => this.inputs.disabled();
 
   /** A reference to the parent toolbar. */
   readonly toolbar = () => this.inputs.toolbar();
 
-  /** Whether the group allows multiple widgets to be selected. */
-  readonly multi = () => this.inputs.multi();
-
-  readonly searchTerm = () => ''; // Unused because toolbar does not support typeahead.
-  readonly value = () => '' as V; // Unused because toolbar does not support selection.
-  readonly selectable = () => true; // Unused because toolbar does not support selection.
-  readonly element = () => undefined; // Unused because toolbar does not focus the group element.
-
-  constructor(readonly inputs: ToolbarWidgetGroupInputs<T, V>) {}
+  constructor(readonly inputs: ToolbarWidgetGroupInputs) {}
 }

src/aria/private/toolbar/toolbar-widget.ts

@@ -7,23 +7,30 @@
  */
 
 import {SignalLike, computed} from '../behaviors/signal-like/signal-like';
-import {ListItem} from '../behaviors/list/list';
+import {ListFocusItem} from '../behaviors/list-focus/list-focus';
+import {ListNavigationItem} from '../behaviors/list-navigation/list-navigation';
 import type {ToolbarPattern} from './toolbar';
 import {ToolbarWidgetGroupPattern} from './toolbar-widget-group';
 
 /** Represents the required inputs for a toolbar widget in a toolbar. */
-export interface ToolbarWidgetInputs<V> extends Omit<
-  ListItem<V>,
-  'searchTerm' | 'index' | 'selectable'
-> {
+export interface ToolbarWidgetInputs {
+  /** A unique identifier for the widget. */
+  id: SignalLike<string>;
+
+  /** The html element that should receive focus. */
+  element: SignalLike<HTMLElement | undefined>;
+
+  /** Whether the widget is disabled. */
+  disabled: SignalLike<boolean>;
+
   /** A reference to the parent toolbar. */
-  toolbar: SignalLike<ToolbarPattern<V>>;
+  toolbar: SignalLike<ToolbarPattern>;
 
   /** A reference to the parent widget group. */
-  group: SignalLike<ToolbarWidgetGroupPattern<ToolbarWidgetPattern<V>, V> | undefined>;
+  group: SignalLike<ToolbarWidgetGroupPattern | undefined>;
 }
 
-export class ToolbarWidgetPattern<V> implements ListItem<V> {
+export class ToolbarWidgetPattern implements ListFocusItem, ListNavigationItem {
   /** A unique identifier for the widget. */
   readonly id = () => this.inputs.id();
 
@@ -40,27 +47,13 @@ export class ToolbarWidgetPattern<V> implements ListItem<V> {
   readonly toolbar = () => this.inputs.toolbar();
 
   /** The tabindex of the widget. */
-  readonly tabIndex = computed(() => this.toolbar().listBehavior.getItemTabindex(this));
-
-  /** The text used by the typeahead search. */
-  readonly searchTerm = () => ''; // Unused because toolbar does not support typeahead.
-
-  /** The value associated with the widget. */
-  readonly value = () => this.inputs.value();
-
-  /** Whether the widget is selectable. */
-  readonly selectable = () => true; // Unused because toolbar does not support selection.
+  readonly tabIndex = computed(() => this.toolbar().focusManager.getItemTabIndex(this));
 
   /** The position of the widget within the toolbar. */
   readonly index = computed(() => this.toolbar().inputs.items().indexOf(this) ?? -1);
 
-  /** Whether the widget is selected (only relevant in a selection group). */
-  readonly selected = computed(() =>
-    this.toolbar().listBehavior.inputs.value().includes(this.value()),
-  );
-
   /** Whether the widget is currently the active one (focused). */
   readonly active: SignalLike<boolean> = computed(() => this.toolbar().activeItem() === this);
 
-  constructor(readonly inputs: ToolbarWidgetInputs<V>) {}
+  constructor(readonly inputs: ToolbarWidgetInputs) {}
 }