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/grid/grid-focus.ts

@@ -98,7 +98,7 @@ export class GridFocus<T extends GridFocusCell> {
   });
 
   /** The tab index for the grid container. */
-  readonly gridTabIndex = computed<-1 | 0 | null>(() => {
+  readonly gridTabIndex = computed<-1 | 0>(() => {
     const isTabbable = this.inputs.tabbable?.();
     if (isTabbable === false) {
       return -1;

src/aria/private/behaviors/grid/grid.ts

@@ -83,7 +83,7 @@ export class Grid<T extends GridCell> {
   );
 
   /** The tab index for the grid container. */
-  readonly gridTabIndex: SignalLike<-1 | 0 | null> = () => this.focusBehavior.gridTabIndex();
+  readonly gridTabIndex: SignalLike<-1 | 0> = () => this.focusBehavior.gridTabIndex();
 
   /** Whether the grid is in a disabled state. */
   readonly gridDisabled: SignalLike<boolean> = () => this.focusBehavior.gridDisabled();

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,225 @@
+import {SimpleComboboxPattern, SimpleComboboxPopupPattern} from './simple-combobox';
+import {signal} from '../behaviors/signal-like/signal-like';
+import {createKeyboardEvent} from '@angular/cdk/testing/private';
+
+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);
+    });
+  });
+});