refactor(multiple): add simple-combobox unit tests and refine interaction logic

- Adds extensive unit tests for SimpleCombobox across Listbox, Tree, and Grid implementations.
- Refines aria-autocomplete calculation to exclude dialog-type popups, as they do not support autocomplete behavior.
- Switches SimpleCombobox from pointerdown to click for popup triggering to improve interaction consistency.
- Fixes ListFocus to properly focus the host element when using activedescendant mode.
- Updates GridPattern to prevent resetting its default active state once a user has already interacted with it.
- Moves alwaysExpanded initialization to ngOnInit in the public Combobox component for better lifecycle management.
- Improves simple-combobox-highlight example to handle disabled states.

Author: tjshiu

src/aria/listbox/listbox.spec.ts

@@ -148,10 +148,10 @@ describe('Listbox', () => {
         expect(listboxElement.getAttribute('aria-multiselectable')).toBe('false');
       });
 
-      it('should set aria-selected to "false" for all options by default', () => {
-        optionElements.forEach(optionElement => {
-          expect(optionElement.getAttribute('aria-selected')).toBe('false');
-        });
+      it('should set aria-selected to "true" for the first option and "false" for others by default', () => {
+        expect(optionElements[0].getAttribute('aria-selected')).toBe('true');
+        expect(optionElements[1].getAttribute('aria-selected')).toBe('false');
+        expect(optionElements[2].getAttribute('aria-selected')).toBe('false');
       });
     });
 

src/aria/private/behaviors/list-focus/list-focus.ts

@@ -114,6 +114,8 @@ export class ListFocus<T extends ListFocusItem> {
     if (opts?.focusElement || opts?.focusElement === undefined) {
       if (this.inputs.focusMode() === 'roving') {
         item.element()?.focus();
+      } else if (this.inputs.focusMode() === 'activedescendant') {
+        this.inputs.element()?.focus();
       }
     }
 

src/aria/private/grid/grid.spec.ts

@@ -275,8 +275,8 @@ describe('Grid', () => {
       });
 
       it('should trigger click on Enter for simple widget', () => {
-        const {grid} = createGrid([{cells: [{widgets: [{widgetType: 'simple'}]}]}], gridInputs);
-        const widget = grid.cells()[0][0].inputs.widgets()[0];
+        const {grid} = createGrid([{cells: [{widget: {widgetType: 'simple'}}]}], gridInputs);
+        const widget = grid.cells()[0][0].inputs.widget()!;
         const element = widget.element();
         spyOn(element, 'click');
 

src/aria/private/grid/grid.ts

@@ -256,6 +256,7 @@ export class GridPattern {
 
   /** Sets the default active state of the grid before receiving focus the first time. */
   setDefaultStateEffect(): void {
+    if (this.hasBeenInteracted()) return;
     this.gridBehavior.setDefaultState();
   }
 

src/aria/private/simple-combobox/BUILD.bazel

@@ -1,4 +1,4 @@
-load("//tools:defaults.bzl", "ts_project")
+load("//tools:defaults.bzl", "ng_web_test_suite", "ts_project")
 
 package(default_visibility = ["//visibility:public"])
 
@@ -16,3 +16,23 @@ ts_project(
         "//src/aria/private/behaviors/signal-like",
     ],
 )
+
+ts_project(
+    name = "unit_test_sources",
+    testonly = True,
+    srcs = glob(["**/*.spec.ts"]),
+    deps = [
+        ":simple-combobox",
+        "//:node_modules/@angular/core",
+        "//src/aria/private/behaviors/signal-like",
+        "//src/aria/private/listbox",
+        "//src/aria/private/tree",
+        "//src/cdk/keycodes",
+        "//src/cdk/testing/private",
+    ],
+)
+
+ng_web_test_suite(
+    name = "unit_tests",
+    deps = [":unit_test_sources"],
+)

src/aria/private/simple-combobox/simple-combobox.spec.ts

@@ -0,0 +1,229 @@
+import {Component} from '@angular/core';
+import {SimpleComboboxPattern, SimpleComboboxPopupPattern} from './simple-combobox';
+import {signal} from '../behaviors/signal-like/signal-like';
+import {createKeyboardEvent} from '@angular/cdk/testing/private';
+
+@Component({template: ''})
+class DummyComponent {}
+
+describe('SimpleComboboxPattern', () => {
+  function setup(
+    inputs: Partial<{
+      disabled: boolean;
+      alwaysExpanded: boolean;
+      inlineSuggestion: string;
+      popupType: 'listbox' | 'tree' | 'grid' | 'dialog';
+    }> = {},
+  ) {
+    const element = document.createElement('input');
+    const value = signal('');
+    const expanded = signal(false);
+    const alwaysExpanded = signal(inputs.alwaysExpanded ?? false);
+    const disabled = signal(inputs.disabled ?? false);
+    const inlineSuggestion = signal<string | undefined>(inputs.inlineSuggestion);
+
+    // Mock a generic popup pattern
+    const popupId = signal('popup-1');
+    const activeDescendant = signal<string | undefined>('item-1');
+    const controlTarget = document.createElement('div');
+    const popupType = signal<'listbox' | 'tree' | 'grid' | 'dialog'>(inputs.popupType ?? 'listbox');
+
+    const popup = new SimpleComboboxPopupPattern({
+      popupType,
+      controlTarget: signal(controlTarget),
+      activeDescendant,
+      popupId,
+    });
+
+    const pattern = new SimpleComboboxPattern({
+      alwaysExpanded,
+      value,
+      element: signal(element),
+      popup: signal(popup),
+      inlineSuggestion,
+      disabled,
+      expanded,
+      expandable: signal(true),
+    });
+
+    return {
+      pattern,
+      element,
+      value,
+      expanded,
+      alwaysExpanded,
+      inlineSuggestion,
+      disabled,
+      popup,
+      controlTarget,
+    };
+  }
+
+  describe('Aria-autocomplete calculation', () => {
+    it('should return "list" when only popup is present', () => {
+      const {pattern} = setup();
+      expect(pattern.autocomplete()).toBe('list');
+    });
+
+    it('should return "both" when popup and inline suggestion are present', () => {
+      const {pattern} = setup({inlineSuggestion: 'suggestion'});
+      expect(pattern.autocomplete()).toBe('both');
+    });
+
+    it('should return "none" when only dialog popup is present', () => {
+      const {pattern} = setup({popupType: 'dialog'});
+      expect(pattern.autocomplete()).toBe('none');
+    });
+
+    it('should return "inline" when dialog popup and inline suggestion are present', () => {
+      const {pattern} = setup({popupType: 'dialog', inlineSuggestion: 'suggestion'});
+      expect(pattern.autocomplete()).toBe('inline');
+    });
+  });
+
+  describe('Expansion via Keyboard', () => {
+    it('should open on ArrowDown when collapsed', () => {
+      const {pattern, expanded} = setup();
+      expect(expanded()).toBe(false);
+
+      pattern.onKeydown(createKeyboardEvent('keydown', 40, 'ArrowDown'));
+      expect(expanded()).toBe(true);
+    });
+
+    it('should close on Escape when expanded', () => {
+      const {pattern, expanded} = setup();
+      expanded.set(true);
+
+      pattern.onKeydown(createKeyboardEvent('keydown', 27, 'Escape'));
+      expect(expanded()).toBe(false);
+    });
+  });
+
+  describe('Input handling', () => {
+    it('should update value and expand on input', () => {
+      const {pattern, element, value, expanded} = setup();
+      expect(expanded()).toBe(false);
+
+      element.value = 'hello';
+      pattern.onInput({target: element} as unknown as Event);
+
+      expect(value()).toBe('hello');
+      expect(expanded()).toBe(true);
+    });
+  });
+
+  describe('Focus handling', () => {
+    it('should track focus state', () => {
+      const {pattern} = setup();
+
+      pattern.onFocusin();
+      expect(pattern.isFocused()).toBe(true);
+
+      pattern.onFocusout(new FocusEvent('focusout'));
+      expect(pattern.isFocused()).toBe(false);
+    });
+  });
+
+  describe('Inline Suggestion / Highlighting', () => {
+    it('should insert the inline suggestion into the input and select the remaining text', () => {
+      const {pattern, element, value, expanded, inlineSuggestion} = setup();
+
+      value.set('App');
+      inlineSuggestion.set('Apple');
+      expanded.set(true);
+      pattern.isFocused.set(true);
+
+      pattern.highlightEffect();
+
+      expect(element.value).toBe('Apple');
+      expect(element.selectionStart).toBe(3);
+      expect(element.selectionEnd).toBe(5);
+    });
+
+    it('should not highlight when deleting text', () => {
+      const {pattern, element, value, expanded, inlineSuggestion} = setup();
+
+      value.set('App');
+      inlineSuggestion.set('Apple');
+      expanded.set(true);
+      pattern.isFocused.set(true);
+
+      const deleteEvent = new InputEvent('input', {inputType: 'deleteContentBackward'});
+      Object.defineProperty(deleteEvent, 'target', {value: element});
+      pattern.onInput(deleteEvent as Event);
+
+      expect(pattern.isDeleting()).toBe(true);
+
+      pattern.highlightEffect();
+
+      expect(element.value).not.toBe('Apple');
+    });
+  });
+
+  describe('Select-only combobox behavior', () => {
+    function setupSelectOnly() {
+      const selectOnlyElement = document.createElement('div');
+      const {pattern, expanded, controlTarget} = setup();
+
+      // Override element to be select-only
+      pattern.inputs.element = signal(selectOnlyElement);
+
+      return {pattern, expanded, selectOnlyElement, controlTarget};
+    }
+
+    it('should toggle expansion on click', () => {
+      const {pattern, expanded} = setupSelectOnly();
+      expect(expanded()).toBe(false);
+
+      pattern.onClick(new PointerEvent('click'));
+      expect(expanded()).toBe(true);
+
+      pattern.onClick(new PointerEvent('click'));
+      expect(expanded()).toBe(false);
+    });
+
+    it('should open on Enter or Space when collapsed', () => {
+      const {pattern, expanded} = setupSelectOnly();
+
+      pattern.onKeydown(createKeyboardEvent('keydown', 13, 'Enter'));
+      expect(expanded()).toBe(true);
+
+      expanded.set(false);
+
+      pattern.onKeydown(createKeyboardEvent('keydown', 32, ' '));
+      expect(expanded()).toBe(true);
+    });
+  });
+
+  describe('alwaysExpanded behavior', () => {
+    it('should stay open on Escape when alwaysExpanded is true', () => {
+      const {pattern, expanded} = setup({alwaysExpanded: true});
+      expanded.set(true);
+
+      pattern.onKeydown(createKeyboardEvent('keydown', 27, 'Escape'));
+      expect(expanded()).toBe(true);
+    });
+  });
+
+  describe('Blur behavior', () => {
+    it('should close when focus leaves both combobox and popup', () => {
+      const {pattern, expanded} = setup();
+      expanded.set(true);
+      pattern.isFocused.set(false);
+      pattern.inputs.popup()!.isFocused.set(false);
+
+      pattern.closePopupOnBlurEffect();
+      expect(expanded()).toBe(false);
+    });
+
+    it('should remain open if popup is focused', () => {
+      const {pattern, expanded} = setup();
+      expanded.set(true);
+      pattern.isFocused.set(false);
+      pattern.inputs.popup()!.isFocused.set(true);
+
+      pattern.closePopupOnBlurEffect();
+      expect(expanded()).toBe(true);
+    });
+  });
+});

src/aria/private/simple-combobox/simple-combobox.ts

@@ -6,8 +6,8 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {KeyboardEventManager, PointerEventManager} from '../behaviors/event-manager';
-import {afterRenderEffect, computed, signal, untracked} from '@angular/core';
+import {KeyboardEventManager, ClickEventManager, Modifier} from '../behaviors/event-manager';
+import {computed, signal, untracked} from '@angular/core';
 import {SignalLike, WritableSignalLike} from '../behaviors/signal-like/signal-like';
 import {ExpansionItem} from '../behaviors/expansion/expansion';
 
@@ -60,12 +60,13 @@ export class SimpleComboboxPattern {
 
   /** The autocomplete behavior of the combobox. */
   readonly autocomplete = computed<'none' | 'inline' | 'list' | 'both'>(() => {
-    const hasPopup = !!this.inputs.popup();
+    const popupType = this.popupType();
+    const hasAutocompletePopup = !!this.inputs.popup() && popupType !== 'dialog';
     const hasInlineSuggestion = !!this.inlineSuggestion();
-    if (hasPopup && hasInlineSuggestion) {
+    if (hasAutocompletePopup && hasInlineSuggestion) {
       return 'both';
     }
-    if (hasPopup) {
+    if (hasAutocompletePopup) {
       return 'list';
     }
     if (hasInlineSuggestion) {
@@ -143,9 +144,9 @@ export class SimpleComboboxPattern {
     return manager;
   });
 
-  /** The pointerdown event manager for the combobox. */
-  pointerdown = computed(() => {
-    const manager = new PointerEventManager();
+  /** The click event manager for the combobox. */
+  click = computed(() => {
+    const manager = new ClickEventManager<PointerEvent>();
 
     if (this.isEditable()) return manager;
 
@@ -157,12 +158,6 @@ export class SimpleComboboxPattern {
   constructor(readonly inputs: SimpleComboboxInputs) {
     this.expanded = inputs.expanded;
     this.value = inputs.value;
-
-    afterRenderEffect(() => {
-      if (this.inputs.alwaysExpanded()) {
-        this.expanded.set(true);
-      }
-    });
   }
 
   /** Handles keydown events for the combobox. */
@@ -172,10 +167,10 @@ export class SimpleComboboxPattern {
     }
   }
 
-  /** Handles pointerdown events for the combobox. */
-  onPointerdown(event: PointerEvent) {
+  /** Handles click events for the combobox. */
+  onClick(event: PointerEvent) {
     if (!this.disabled()) {
-      this.pointerdown().handle(event);
+      this.click().handle(event);
     }
   }
 
@@ -186,9 +181,6 @@ export class SimpleComboboxPattern {
 
   /** Handles focus out events for the combobox. */
   onFocusout(event: FocusEvent) {
-    const focusTarget = event.relatedTarget as Element | null;
-    if (this.element().contains(focusTarget)) return;
-
     this.isFocused.set(false);
   }
 
@@ -209,7 +201,7 @@ export class SimpleComboboxPattern {
 
     const isDeleting = untracked(() => this.isDeleting());
     const isFocused = untracked(() => this.isFocused());
-    const isExpanded = untracked(() => this.expanded());
+    const isExpanded = this.expanded();
 
     if (!inlineSuggestion || !isFocused || !isExpanded || isDeleting) return;