fix(aria/combobox): add missing apis

src/aria/combobox/BUILD.bazel

@@ -12,6 +12,7 @@ ng_project(
  "//:node_modules/@angular/core",
  "//src/aria/deferred-content",
  "//src/aria/ui-patterns",
+ "//src/cdk/bidi",
  ],
 )
 

src/aria/combobox/combobox.ts

@@ -24,6 +24,8 @@ import {
  ComboboxListboxControls,
  ComboboxTreeControls,
 } from '@angular/aria/ui-patterns';
+import {Directionality} from '@angular/cdk/bidi';
+import {toSignal} from '@angular/core/rxjs-interop';
 
 @Directive({
  selector: '[ngCombobox]',
@@ -44,6 +46,14 @@ import {
  },
 })
 export class Combobox<V> {
+ /** The directionality (LTR / RTL) context for the application (or a subtree of it). */
+ private readonly _directionality = inject(Directionality);
+
+ /** A signal wrapper for directionality. */
+ protected textDirection = toSignal(this._directionality.change, {
+ initialValue: this._directionality.value,
+ });
+
  /** The element that the combobox is attached to. */
  private readonly _elementRef = inject(ElementRef);
 
@@ -59,15 +69,24 @@ export class Combobox<V> {
  /** Whether the combobox is focused. */
  readonly isFocused = signal(false);
 
- /** The value of the first matching item in the popup. */
- firstMatch = input<V | undefined>(undefined);
-
  /** Whether the listbox has received focus yet. */
  private _hasBeenFocused = signal(false);
 
+ /** Whether the combobox is disabled. */
+ readonly disabled = input(false);
+
+ /** Whether the combobox is read-only. */
+ readonly readonly = input(false);
+
+ /** The value of the first matching item in the popup. */
+ readonly firstMatch = input<V | undefined>(undefined);
+
  /** The combobox ui pattern. */
  readonly pattern = new ComboboxPattern<any, V>({
  ...this,
+ textDirection: this.textDirection,
+ disabled: this.disabled,
+ readonly: this.readonly,
  inputValue: signal(''),
  inputEl: signal(undefined),
  containerEl: () => this._elementRef.nativeElement,

src/aria/ui-patterns/combobox/combobox.spec.ts

@@ -97,6 +97,9 @@ function getComboboxPattern(
  const inputValue = signal('');
 
  const combobox = new ComboboxPattern<any, string>({
+ disabled: signal(inputs.disabled ?? false),
+ readonly: signal(inputs.readonly ?? false),
+ textDirection: signal(inputs.textDirection ?? 'ltr'),
  popupControls: signal(undefined), // will be set later
  inputEl,
  containerEl,
@@ -349,6 +352,13 @@ describe('Combobox with Listbox Pattern', () => {
 
  expect(combobox.expanded()).toBe(true);
  });
+
+ it('should not expand when disabled', () => {
+ const {combobox, inputEl} = getPatterns({disabled: true});
+ expect(combobox.expanded()).toBe(false);
+ combobox.onPointerup(clickInput(inputEl));
+ expect(combobox.expanded()).toBe(false);
+ });
  });
 
  describe('Selection', () => {

src/aria/ui-patterns/combobox/combobox.ts

@@ -30,6 +30,15 @@ export interface ComboboxInputs<T extends ListItem<V>, V> {
 
  /** The value of the first matching item in the popup. */
  firstMatch: SignalLike<V | undefined>;
+
+ /** Whether the combobox is disabled. */
+ disabled: SignalLike<boolean>;
+
+ /** Whether the combobox is read-only. */
+ readonly: SignalLike<boolean>;
+
+ /** Whether the combobox is in a right-to-left context. */
+ textDirection: SignalLike<'rtl' | 'ltr'>;
 }
 
 /** An interface that allows combobox popups to expose the necessary controls for the combobox. */
@@ -119,10 +128,12 @@ export class ComboboxPattern<T extends ListItem<V>, V> {
  isFocused = signal(false);
 
  /** The key used to navigate to the previous item in the list. */
- expandKey = computed(() => 'ArrowRight'); // TODO: RTL support.
+ expandKey = computed(() => (this.inputs.textDirection() === 'rtl' ? 'ArrowLeft' : 'ArrowRight'));
 
  /** The key used to navigate to the next item in the list. */
- collapseKey = computed(() => 'ArrowLeft'); // TODO: RTL support.
+ collapseKey = computed(() =>
+ this.inputs.textDirection() === 'rtl' ? 'ArrowRight' : 'ArrowLeft',
+ );
 
  /** The ID of the popup associated with the combobox. */
  popupId = computed(() => this.inputs.popupControls()?.id() || null);
@@ -133,6 +144,9 @@ export class ComboboxPattern<T extends ListItem<V>, V> {
  /** The ARIA role of the popup associated with the combobox. */
  hasPopup = computed(() => this.inputs.popupControls()?.role() || null);
 
+ /** Whether the combobox is interactive. */
+ isInteractive = computed(() => !this.inputs.disabled() && !this.inputs.readonly());
+
  /** The keydown event manager for the combobox. */
  keydown = computed(() => {
  if (!this.expanded()) {
@@ -204,16 +218,24 @@ export class ComboboxPattern<T extends ListItem<V>, V> {
 
  /** Handles keydown events for the combobox. */
  onKeydown(event: KeyboardEvent) {
- this.keydown().handle(event);
+ if (this.isInteractive()) {
+ this.keydown().handle(event);
+ }
  }
 
  /** Handles pointerup events for the combobox. */
  onPointerup(event: PointerEvent) {
- this.pointerup().handle(event);
+ if (this.isInteractive()) {
+ this.pointerup().handle(event);
+ }
  }
 
  /** Handles input events for the combobox. */
  onInput(event: Event) {
+ if (!this.isInteractive()) {
+ return;
+ }
+
  const inputEl = this.inputs.inputEl();
 
  if (!inputEl) {
@@ -233,12 +255,17 @@ export class ComboboxPattern<T extends ListItem<V>, V> {
  }
  }
 
+ /** Handles focus in events for the combobox. */
  onFocusIn() {
  this.isFocused.set(true);
  }
 
  /** Handles focus out events for the combobox. */
  onFocusOut(event: FocusEvent) {
+ if (this.inputs.disabled() || this.inputs.readonly()) {
+ return;
+ }
+
  if (
  !(event.relatedTarget instanceof HTMLElement) ||
  !this.inputs.containerEl()?.contains(event.relatedTarget)
@@ -261,6 +288,7 @@ export class ComboboxPattern<T extends ListItem<V>, V> {
  }
  }
 
+ /** The first matching item in the combobox. */
  firstMatch = computed(() => {
  // TODO(wagnermaciel): Consider whether we should not provide this default behavior for the
  // listbox. Instead, we may want to allow users to have no match so that typing does not focus
@@ -275,6 +303,7 @@ export class ComboboxPattern<T extends ListItem<V>, V> {
  .find(i => i.value() === this.inputs.firstMatch());
  });
 
+ /** Handles filtering logic for the combobox. */
  onFilter() {
  // TODO(wagnermaciel)
  // When the user first interacts with the combobox, the popup will lazily render for the first
@@ -315,6 +344,7 @@ export class ComboboxPattern<T extends ListItem<V>, V> {
  }
  }
 
+ /** Highlights the currently selected item in the combobox. */
  highlight() {
  const inputEl = this.inputs.inputEl();
  const item = this.inputs.popupControls()?.getSelectedItem();
@@ -374,11 +404,13 @@ export class ComboboxPattern<T extends ListItem<V>, V> {
  this._navigate(() => this.inputs.popupControls()?.last());
  }
 
+ /** Collapses the currently focused item in the combobox. */
  collapseItem() {
  const controls = this.inputs.popupControls() as ComboboxTreeControls<T, V>;
  this._navigate(() => controls?.collapseItem());
  }
 
+ /** Expands the currently focused item in the combobox. */
  expandItem() {
  const controls = this.inputs.popupControls() as ComboboxTreeControls<T, V>;
  this._navigate(() => controls?.expandItem());