refactor(aria/combobox): forward advanced combination keys in SimpleComboboxPattern

src/aria/listbox/listbox.spec.ts

@@ -602,6 +602,17 @@ describe('Listbox', () => {
             expect(listboxInstance.value().sort()).toEqual([0, 1, 2]);
           });
 
+          it('should move selection anchor along with focus during normal non-shift navigation', () => {
+            setupListbox({multi: true, selectionMode: 'explicit'});
+            down({shiftKey: true});
+            expect(listboxInstance.value().sort()).toEqual([0, 1]);
+            down();
+            down();
+            down();
+            up({shiftKey: true});
+            expect(listboxInstance.value().sort()).toEqual([0, 1, 3, 4]);
+          });
+
           it('should toggle selection of all options on Ctrl+A', () => {
             setupListbox({multi: true, selectionMode: 'explicit', value: [0]});
             keydown('A', {ctrlKey: true});

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

@@ -229,6 +229,9 @@ export class List<T extends ListItem<V>, V> {
 
     if (moved) {
       this.updateSelection(opts);
+      if (!opts?.selectRange) {
+        this.anchor(this.activeIndex());
+      }
     }
 
     this._wrap.set(true);

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

@@ -222,4 +222,53 @@ describe('SimpleComboboxPattern', () => {
       expect(expanded()).toBe(true);
     });
   });
+
+  describe('Advanced Combo Keys Relay', () => {
+    it('should forward Shift + ArrowUp/ArrowDown for editable inputs', () => {
+      const {pattern, expanded} = setup();
+      expanded.set(true);
+
+      const shiftUp = createKeyboardEvent('keydown', 38, 'ArrowUp');
+      Object.defineProperty(shiftUp, 'shiftKey', {value: true});
+      pattern.onKeydown(shiftUp);
+      expect(pattern.keyboardEventRelay()).toBe(shiftUp);
+
+      const shiftDown = createKeyboardEvent('keydown', 40, 'ArrowDown');
+      Object.defineProperty(shiftDown, 'shiftKey', {value: true});
+      pattern.onKeydown(shiftDown);
+      expect(pattern.keyboardEventRelay()).toBe(shiftDown);
+    });
+
+    it('should NOT forward Ctrl+A or Shift+Home/End for editable inputs', () => {
+      const {pattern, expanded} = setup();
+      expanded.set(true);
+
+      const ctrlA = createKeyboardEvent('keydown', 65, 'a');
+      Object.defineProperty(ctrlA, 'ctrlKey', {value: true});
+      pattern.onKeydown(ctrlA);
+      expect(pattern.keyboardEventRelay()).toBeUndefined();
+
+      const shiftHome = createKeyboardEvent('keydown', 36, 'Home');
+      Object.defineProperty(shiftHome, 'shiftKey', {value: true});
+      pattern.onKeydown(shiftHome);
+      expect(pattern.keyboardEventRelay()).toBeUndefined();
+    });
+
+    it('should forward Ctrl+A and Shift+Home/End for select-only (non-editable) comboboxes', () => {
+      const selectOnlyElement = document.createElement('div');
+      const {pattern, expanded} = setup();
+      pattern.inputs.element = signal(selectOnlyElement);
+      expanded.set(true);
+
+      const ctrlA = createKeyboardEvent('keydown', 65, 'a');
+      Object.defineProperty(ctrlA, 'ctrlKey', {value: true});
+      pattern.onKeydown(ctrlA);
+      expect(pattern.keyboardEventRelay()).toBe(ctrlA);
+
+      const shiftHome = createKeyboardEvent('keydown', 36, 'Home');
+      Object.defineProperty(shiftHome, 'shiftKey', {value: true});
+      pattern.onKeydown(shiftHome);
+      expect(pattern.keyboardEventRelay()).toBe(shiftHome);
+    });
+  });
 });

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

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {KeyboardEventManager, ClickEventManager} from '../behaviors/event-manager';
+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';
@@ -130,6 +130,8 @@ export class SimpleComboboxPattern {
       )
       .on('ArrowUp', e => this.keyboardEventRelay.set(e), {ignoreRepeat: false})
       .on('ArrowDown', e => this.keyboardEventRelay.set(e), {ignoreRepeat: false})
+      .on(Modifier.Shift, 'ArrowUp', e => this.keyboardEventRelay.set(e), {ignoreRepeat: false})
+      .on(Modifier.Shift, 'ArrowDown', e => this.keyboardEventRelay.set(e), {ignoreRepeat: false})
       .on('Home', e => this.keyboardEventRelay.set(e))
       .on('End', e => this.keyboardEventRelay.set(e))
       .on('Enter', e => this.keyboardEventRelay.set(e))
@@ -144,6 +146,10 @@ export class SimpleComboboxPattern {
     if (!this.isEditable()) {
       manager
         .on(' ', e => this.keyboardEventRelay.set(e))
+        .on([Modifier.Ctrl, Modifier.Meta], 'a', e => this.keyboardEventRelay.set(e))
+        .on([Modifier.Ctrl, Modifier.Meta], 'A', e => this.keyboardEventRelay.set(e))
+        .on(Modifier.Shift, 'Home', e => this.keyboardEventRelay.set(e))
+        .on(Modifier.Shift, 'End', e => this.keyboardEventRelay.set(e))
         .on(/^.$/, e => {
           this.keyboardEventRelay.set(e);
         });

src/components-examples/aria/simple-combobox/index.ts

@@ -15,5 +15,6 @@ export {SimpleComboboxAutocompleteAutoSelectExample} from './simple-combobox-aut
 export {SimpleComboboxAutocompleteDisabledExample} from './simple-combobox-autocomplete-disabled/simple-combobox-autocomplete-disabled-example';
 export {SimpleComboboxAutocompleteHighlightExample} from './simple-combobox-autocomplete-highlight/simple-combobox-autocomplete-highlight-example';
 export {SimpleComboboxAutocompleteManualExample} from './simple-combobox-autocomplete-manual/simple-combobox-autocomplete-manual-example';
+export {SimpleComboboxMultiselectDialogExample} from './simple-combobox-multiselect-dialog/simple-combobox-multiselect-dialog-example';
 
 // Force watcher update

src/components-examples/aria/simple-combobox/simple-combobox-editable-multiselect/simple-combobox-editable-multiselect-example.html

@@ -0,0 +1,52 @@
+<div class="example-combobox-container" ngCombobox #combobox="ngCombobox" [(expanded)]="popupExpanded">
+  <div #origin class="example-combobox-input-container">
+    <input class="example-combobox-input example-dialog-input" placeholder="Select countries..." [value]="value()"
+      [readonly]="true" [tabindex]="-1" />
+    <span class="material-symbols-outlined example-icon example-arrow-icon">arrow_drop_down</span>
+  </div>
+
+  <ng-template [cdkConnectedOverlay]="{origin: combobox.element, usePopover: 'inline', matchWidth: true}"
+    [cdkConnectedOverlayOpen]="popupExpanded()" [cdkConnectedOverlayDisableClose]="false"
+    (overlayOutsideClick)="popupExpanded.set(false)">
+    <ng-template ngComboboxPopup [combobox]="combobox" popupType="dialog">
+
+      <div class="example-popover">
+        <div class="example-dialog" ngComboboxWidget>
+          <div class="example-combobox-container">
+            <div class="example-combobox-input-container">
+              <span class="material-symbols-outlined example-icon example-search-icon">search</span>
+              <input ngCombobox #innerCombobox="ngCombobox" #searchInput class="example-combobox-input"
+                placeholder="Search..." [(ngModel)]="searchString" [alwaysExpanded]="true"
+                (keydown.escape)="onSearchEscape($event)" />
+            </div>
+
+            <div aria-live="polite" class="cdk-visually-hidden">
+              {{countries().length === 0 ? 'No results found for ' + searchString() : ''}}
+            </div>
+
+            <ng-template ngComboboxPopup [combobox]="innerCombobox">
+              <div class="example-popup example-popup-no-margin">
+                @if (countries().length === 0) {
+                <div class="example-no-results">No results found</div>
+                }
+                <div #listbox="ngListbox" ngListbox [multi]="true" ngComboboxWidget class="example-listbox" focusMode="activedescendant"
+                  tabindex="-1" selectionMode="explicit" [(value)]="selectedOptions" (click)="onCommit()"
+                  (keydown.enter)="onCommit()" [activeDescendant]="listbox.activeDescendant()"
+                  [class.example-empty]="countries().length === 0">
+                  @for (country of countries(); track country) {
+                  <div class="example-option example-selectable example-stateful" ngOption [value]="country"
+                    [label]="country">
+                    <span>{{country}}</span>
+                    <span aria-hidden="true"
+                      class="material-symbols-outlined example-icon example-selected-icon">check</span>
+                  </div>
+                  }
+                </div>
+              </div>
+            </ng-template>
+          </div>
+        </div>
+      </div>
+    </ng-template>
+  </ng-template>
+</div>

src/components-examples/aria/simple-combobox/simple-combobox-editable-multiselect/simple-combobox-editable-multiselect-example.ts

@@ -0,0 +1,100 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import {Combobox, ComboboxPopup, ComboboxWidget} from '@angular/aria/simple-combobox';
+import {Listbox, Option} from '@angular/aria/listbox';
+import {
+  afterRenderEffect,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  signal,
+  untracked,
+  viewChild,
+  ElementRef,
+} from '@angular/core';
+import {COUNTRIES} from '../countries';
+import {OverlayModule} from '@angular/cdk/overlay';
+import {FormsModule} from '@angular/forms';
+
+/** @title Editable multiselectable combobox with a dialog layout. */
+@Component({
+  selector: 'simple-combobox-editable-multiselect-example',
+  templateUrl: 'simple-combobox-editable-multiselect-example.html',
+  styleUrl: '../simple-combobox-example.css',
+  imports: [Combobox, ComboboxPopup, ComboboxWidget, Listbox, Option, OverlayModule, FormsModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SimpleComboboxEditableMultiselectExample {
+  readonly listbox = viewChild(Listbox);
+  readonly combobox = viewChild(Combobox);
+  readonly searchInput = viewChild<ElementRef<HTMLInputElement>>('searchInput');
+
+  popupExpanded = signal(false);
+  searchString = signal('');
+  selectedOptions = signal<string[]>([]);
+
+  /** The display text for the primary readonly trigger input. */
+  value = computed(() => {
+    const current = this.selectedOptions();
+    if (current.length === 0) return '';
+    if (current.length === 1) return current[0];
+    return `${current[0]} + ${current.length - 1} more`;
+  });
+
+  /** The list of countries filtered by the inner search input query. */
+  countries = computed(() => {
+    const currentQuery = this.searchString().toLowerCase();
+    return COUNTRIES.filter(country => country.toLowerCase().startsWith(currentQuery));
+  });
+
+  constructor() {
+    // Automatically auto-focus the inner search text field when the dialog expands
+    afterRenderEffect(() => {
+      if (this.popupExpanded()) {
+        untracked(() => {
+          setTimeout(() => {
+            this.searchInput()?.nativeElement.focus();
+          });
+        });
+      }
+    });
+
+    afterRenderEffect(() => {
+      if (this.popupExpanded()) {
+        this.listbox()?.scrollActiveItemIntoView();
+      }
+    });
+  }
+
+  /** Clears the search query and all selected options. */
+  clear(): void {
+    this.searchString.set('');
+    this.selectedOptions.set([]);
+  }
+
+  /** Keeps focus inside the dialog when selection changes. */
+  onCommit() {
+    this.searchString.set('');
+  }
+
+  /** Dismisses the dialog overlay on Escape key. */
+  onSearchEscape(event: Event) {
+    this.popupExpanded.set(false);
+    this.combobox()?.element.focus();
+  }
+
+  /** Handles keydown events on the clear button. */
+  onKeydown(event: KeyboardEvent): void {
+    if (event.key === 'Enter') {
+      this.clear();
+      this.popupExpanded.set(false);
+      event.stopPropagation();
+    }
+  }
+}

src/components-examples/aria/simple-combobox/simple-combobox-multiselect-dialog/simple-combobox-multiselect-dialog-example.html

@@ -0,0 +1,52 @@
+<div class="example-combobox-container" ngCombobox #combobox="ngCombobox" [(expanded)]="popupExpanded">
+  <div #origin class="example-combobox-input-container">
+    <input class="example-combobox-input example-dialog-input" placeholder="Select countries..." [value]="value()"
+      [readonly]="true" [tabindex]="-1" />
+    <span class="material-symbols-outlined example-icon example-arrow-icon">arrow_drop_down</span>
+  </div>
+
+  <ng-template [cdkConnectedOverlay]="{origin: combobox.element, usePopover: 'inline', matchWidth: true}"
+    [cdkConnectedOverlayOpen]="popupExpanded()" [cdkConnectedOverlayDisableClose]="false"
+    (overlayOutsideClick)="popupExpanded.set(false)">
+    <ng-template ngComboboxPopup [combobox]="combobox" popupType="dialog">
+
+      <div class="example-popover">
+        <div class="example-dialog" ngComboboxWidget>
+          <div class="example-combobox-container">
+            <div class="example-combobox-input-container">
+              <span class="material-symbols-outlined example-icon example-search-icon">search</span>
+              <input ngCombobox #innerCombobox="ngCombobox" #searchInput class="example-combobox-input"
+                placeholder="Search..." [(ngModel)]="searchString" [alwaysExpanded]="true"
+                (keydown.escape)="onSearchEscape($event)" />
+            </div>
+
+            <div aria-live="polite" class="cdk-visually-hidden">
+              {{countries().length === 0 ? 'No results found for ' + searchString() : ''}}
+            </div>
+
+            <ng-template ngComboboxPopup [combobox]="innerCombobox">
+              <div class="example-popup example-popup-no-margin">
+                @if (countries().length === 0) {
+                <div class="example-no-results">No results found</div>
+                }
+                <div #listbox="ngListbox" ngListbox [multi]="true" ngComboboxWidget class="example-listbox" focusMode="activedescendant"
+                  tabindex="-1" selectionMode="explicit" [(value)]="selectedOptions" (click)="onCommit()"
+                  (keydown.enter)="onCommit()" [activeDescendant]="listbox.activeDescendant()"
+                  [class.example-empty]="countries().length === 0">
+                  @for (country of countries(); track country) {
+                  <div class="example-option example-selectable example-stateful" ngOption [value]="country"
+                    [label]="country">
+                    <span>{{country}}</span>
+                    <span aria-hidden="true"
+                      class="material-symbols-outlined example-icon example-selected-icon">check</span>
+                  </div>
+                  }
+                </div>
+              </div>
+            </ng-template>
+          </div>
+        </div>
+      </div>
+    </ng-template>
+  </ng-template>
+</div>