refactor(multiple): use output for grid cell activation

Replaced manual clicks with an activated output on GridCell and updated examples. Also cleaned up an unused input that snuck in from a bad rebase.

Author: tjshiu

goldens/aria/grid/index.api.md

@@ -7,6 +7,7 @@
 import * as _angular_cdk_bidi from '@angular/cdk/bidi';
 import * as _angular_core from '@angular/core';
 import { ElementRef } from '@angular/core';
+import { EventEmitter } from '@angular/core';
 import { Signal } from '@angular/core';
 
 // @public
@@ -16,7 +17,6 @@ export class Grid {
     readonly colWrap: _angular_core.InputSignal<"continuous" | "loop" | "nowrap">;
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly element: HTMLElement;
-    readonly enableRangeSelection: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly enableSelection: _angular_core.InputSignalWithTransform<boolean, unknown>;
     readonly focusMode: _angular_core.InputSignal<"roving" | "activedescendant">;
     readonly multi: _angular_core.InputSignalWithTransform<boolean, unknown>;
@@ -28,14 +28,15 @@ export class Grid {
     readonly tabIndex: _angular_core.InputSignalWithTransform<number | undefined, string | number | undefined>;
     readonly textDirection: _angular_core.WritableSignal<_angular_cdk_bidi.Direction>;
     // (undocumented)
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Grid, "[ngGrid]", ["ngGrid"], { "enableSelection": { "alias": "enableSelection"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "softDisabled": { "alias": "softDisabled"; "required": false; "isSignal": true; }; "focusMode": { "alias": "focusMode"; "required": false; "isSignal": true; }; "rowWrap": { "alias": "rowWrap"; "required": false; "isSignal": true; }; "colWrap": { "alias": "colWrap"; "required": false; "isSignal": true; }; "multi": { "alias": "multi"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "enableRangeSelection": { "alias": "enableRangeSelection"; "required": false; "isSignal": true; }; "tabIndex": { "alias": "tabIndex"; "required": false; "isSignal": true; }; }, {}, ["_rows"], never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<Grid, "[ngGrid]", ["ngGrid"], { "enableSelection": { "alias": "enableSelection"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "softDisabled": { "alias": "softDisabled"; "required": false; "isSignal": true; }; "focusMode": { "alias": "focusMode"; "required": false; "isSignal": true; }; "rowWrap": { "alias": "rowWrap"; "required": false; "isSignal": true; }; "colWrap": { "alias": "colWrap"; "required": false; "isSignal": true; }; "multi": { "alias": "multi"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "tabIndex": { "alias": "tabIndex"; "required": false; "isSignal": true; }; }, {}, ["_rows"], never, true, never>;
     // (undocumented)
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Grid, never>;
 }
 
 // @public
 export class GridCell {
     constructor();
+    readonly activated: EventEmitter<KeyboardEvent>;
     readonly active: Signal<boolean>;
     readonly colIndex: _angular_core.InputSignal<number | undefined>;
     readonly colSpan: _angular_core.InputSignal<number>;
@@ -52,7 +53,7 @@ export class GridCell {
     readonly tabindex: _angular_core.InputSignal<number | undefined>;
     readonly textDirection: _angular_core.WritableSignal<_angular_cdk_bidi.Direction>;
     // (undocumented)
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GridCell, "[ngGridCell]", ["ngGridCell"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "role": { "alias": "role"; "required": false; "isSignal": true; }; "rowSpan": { "alias": "rowSpan"; "required": false; "isSignal": true; }; "colSpan": { "alias": "colSpan"; "required": false; "isSignal": true; }; "rowIndex": { "alias": "rowIndex"; "required": false; "isSignal": true; }; "colIndex": { "alias": "colIndex"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "tabindex": { "alias": "tabindex"; "required": false; "isSignal": true; }; }, { "selected": "selectedChange"; }, ["_widget"], never, true, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<GridCell, "[ngGridCell]", ["ngGridCell"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "role": { "alias": "role"; "required": false; "isSignal": true; }; "rowSpan": { "alias": "rowSpan"; "required": false; "isSignal": true; }; "colSpan": { "alias": "colSpan"; "required": false; "isSignal": true; }; "rowIndex": { "alias": "rowIndex"; "required": false; "isSignal": true; }; "colIndex": { "alias": "colIndex"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "tabindex": { "alias": "tabindex"; "required": false; "isSignal": true; }; }, { "activated": "activated"; "selected": "selectedChange"; }, ["_widget"], never, true, never>;
     // (undocumented)
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<GridCell, never>;
 }

goldens/aria/private/index.api.md

@@ -300,6 +300,7 @@ export interface GridCellInputs extends GridCell {
     colIndex: SignalLike<number | undefined>;
     getWidget: (e: Element | null) => GridCellWidgetPattern | undefined;
     grid: SignalLike<GridPattern>;
+    onActivate?: (event: KeyboardEvent) => void;
     row: SignalLike<GridRowPattern>;
     rowIndex: SignalLike<number | undefined>;
     widget: SignalLike<GridCellWidgetPattern | undefined>;

src/aria/grid/grid-cell.ts

@@ -14,9 +14,11 @@ import {
   contentChild,
   Directive,
   ElementRef,
+  EventEmitter,
   inject,
   input,
   model,
+  Output,
   Signal,
   Renderer2,
 } from '@angular/core';
@@ -52,6 +54,9 @@ export class GridCell {
   /** A reference to the host element. */
   readonly element = this._elementRef.nativeElement as HTMLElement;
 
+  /** Emits when the cell is activated via Enter/Space (simple widgets only). */
+  @Output() readonly activated = new EventEmitter<KeyboardEvent>();
+
   /** Whether the cell is currently active (focused). */
   readonly active = computed(() => this._pattern.active());
 
@@ -115,6 +120,7 @@ export class GridCell {
     widget: this._widgetPattern,
     getWidget: e => this._getWidget(e),
     element: () => this.element,
+    onActivate: e => this.activated.emit(e),
   });
 
   constructor() {

src/aria/grid/grid.ts

@@ -121,9 +121,6 @@ export class Grid {
    */
   readonly selectionMode = input<'follow' | 'explicit'>('follow');
 
-  /** Whether enable range selections (with modifier keys or dragging). */
-  readonly enableRangeSelection = input(false, {transform: booleanAttribute});
-
   /** The tabindex of the grid. */
   readonly tabIndex = input(undefined, {
     transform: (v: string | number | undefined) =>

src/aria/private/grid/cell.ts

@@ -36,6 +36,9 @@ export interface GridCellInputs extends GridCell {
 
   /** A function that returns the cell widget associated with a given element. */
   getWidget: (e: Element | null) => GridCellWidgetPattern | undefined;
+
+  /** Callback when the cell is activated via Enter/Space. */
+  onActivate?: (event: KeyboardEvent) => void;
 }
 
 /** The UI pattern for a grid cell. */
@@ -117,6 +120,12 @@ export class GridCellPattern implements GridCell {
   onKeydown(event: KeyboardEvent): void {
     if (this.disabled()) return;
     this.widget()?.onKeydown(event);
+
+    if (this.widget()?.inputs.widgetType() === 'simple') {
+      if (event.key === 'Enter' || event.key === ' ') {
+        this.inputs.onActivate?.(event);
+      }
+    }
   }
 
   /** Handles focusin events for the cell. */

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

@@ -274,16 +274,6 @@ describe('Grid', () => {
         expect(widget.isActivated()).toBe(true);
       });
 
-      it('should trigger click on Enter for simple widget', () => {
-        const {grid} = createGrid([{cells: [{widget: {widgetType: 'simple'}}]}], gridInputs);
-        const widget = grid.cells()[0][0].inputs.widget()!;
-        const element = widget.element();
-        spyOn(element, 'click');
-
-        widget.onKeydown(enter());
-        expect(element.click).toHaveBeenCalled();
-      });
-
       it('should not activate if disabled', () => {
         const {grid} = createGrid(
           [{cells: [{widget: {widgetType: 'complex', disabled: true}}]}],
@@ -375,6 +365,50 @@ describe('Grid', () => {
         cell.onKeydown(event);
         expect(widget.onKeydown).toHaveBeenCalledWith(event);
       });
+
+      it('should call onActivate on Enter for simple widget', () => {
+        const onActivateSpy = jasmine.createSpy('onActivate');
+        const {grid} = createGrid([{cells: [{widget: {widgetType: 'simple'}}]}], gridInputs);
+        const cell = grid.cells()[0][0];
+        (cell.inputs as any).onActivate = onActivateSpy;
+
+        const event = enter();
+        cell.onKeydown(event);
+        expect(onActivateSpy).toHaveBeenCalledWith(event);
+      });
+
+      it('should call onActivate on Space for simple widget', () => {
+        const onActivateSpy = jasmine.createSpy('onActivate');
+        const {grid} = createGrid([{cells: [{widget: {widgetType: 'simple'}}]}], gridInputs);
+        const cell = grid.cells()[0][0];
+        (cell.inputs as any).onActivate = onActivateSpy;
+
+        const event = space();
+        cell.onKeydown(event);
+        expect(onActivateSpy).toHaveBeenCalledWith(event);
+      });
+
+      it('should NOT call onActivate for complex widget', () => {
+        const onActivateSpy = jasmine.createSpy('onActivate');
+        const {grid} = createGrid([{cells: [{widget: {widgetType: 'complex'}}]}], gridInputs);
+        const cell = grid.cells()[0][0];
+        (cell.inputs as any).onActivate = onActivateSpy;
+
+        const event = enter();
+        cell.onKeydown(event);
+        expect(onActivateSpy).not.toHaveBeenCalled();
+      });
+
+      it('should NOT call onActivate for other keys', () => {
+        const onActivateSpy = jasmine.createSpy('onActivate');
+        const {grid} = createGrid([{cells: [{widget: {widgetType: 'simple'}}]}], gridInputs);
+        const cell = grid.cells()[0][0];
+        (cell.inputs as any).onActivate = onActivateSpy;
+
+        const event = up();
+        cell.onKeydown(event);
+        expect(onActivateSpy).not.toHaveBeenCalled();
+      });
     });
   });
 

src/aria/private/grid/widget.ts

@@ -71,14 +71,6 @@ export class GridCellWidgetPattern {
   readonly keydown = computed(() => {
     const manager = new KeyboardEventManager();
 
-    // Simple widget does not need to pause default grid behaviors.
-    // However, it does need to capture Enter key and trigger a click on the host element
-    // since the browser won't do it for us in activedescendant mode.
-    if (this.inputs.widgetType() === 'simple') {
-      manager.on('Enter', () => this.element().click());
-      return manager;
-    }
-
     // If a widget is activated, only listen to events that exits activate state.
     if (this.isActivated()) {
       manager.on('Escape', e => {

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

@@ -1434,12 +1434,12 @@ const states = [
     <div ngComboboxWidget #grid="ngGrid" ngGrid id="grid" focusMode="activedescendant" [tabIndex]="-1" colWrap="continuous" [activeDescendant]="grid.activeDescendant()">
       @for (item of filteredItems(); track item; let i = $index) {
         <div ngGridRow>
-          <div ngGridCell [id]="item + '-label'" [rowIndex]="i" [colIndex]="0">
+          <div ngGridCell [id]="item + '-label'" [rowIndex]="i" [colIndex]="0" (activated)="selectItem(item)">
             <button ngGridCellWidget (click)="selectItem(item)">
               {{item}}
             </button>
           </div>
-          <div ngGridCell [id]="item + '-delete'" [rowIndex]="i" [colIndex]="1">
+          <div ngGridCell [id]="item + '-delete'" [rowIndex]="i" [colIndex]="1" (activated)="removeItem(item)">
             <button ngGridCellWidget (click)="removeItem(item)" (pointerdown)="$event.preventDefault()">
               Delete
             </button>

src/components-examples/aria/simple-combobox/simple-combobox-datepicker/simple-combobox-datepicker-example.html

@@ -8,7 +8,7 @@
 
   <ng-template [cdkConnectedOverlay]="{origin, usePopover: 'inline', matchWidth: false}"
     [cdkConnectedOverlayOpen]="popupExpanded()">
-    <ng-template ngComboboxPopup [combobox]="combobox" popupType="grid">
+    <ng-template ngComboboxPopup [combobox]="combobox" popupType="dialog">
       <div class="example-popover">
         <div ngComboboxWidget class="example-datepicker-popup" cdkTrapFocus (keydown)="handleWidgetKeydown($event)">
           <div class="example-datepicker-header">
@@ -44,7 +44,7 @@
                 }
 
                 @for (day of week; track $index) {
-                <td class="example-datepicker-cell" ngGridCell [(selected)]="day.selected" (click)="selectDate(day)">
+                <td class="example-datepicker-cell" ngGridCell [(selected)]="day.selected" (click)="selectDate(day)" (keydown.enter)="selectDate(day)" (keydown.space)="selectDate(day)">
                   <button ngGridCellWidget class="example-datepicker-day-button" [attr.aria-label]="day.ariaLabel">
                     {{ day.displayName }}
                   </button>

src/components-examples/aria/simple-combobox/simple-combobox-datepicker/simple-combobox-datepicker-example.ts

@@ -13,7 +13,6 @@ import {
   signal,
   Signal,
   computed,
-  untracked,
   viewChild,
   ElementRef,
 } from '@angular/core';
@@ -102,9 +101,10 @@ export class SimpleComboboxDatepickerExample<D> {
     });
     return weekdays.slice(firstDayOfWeek).concat(weekdays.slice(0, firstDayOfWeek));
   });
-  readonly weeks: Signal<CalendarCell<D>[][]> = computed(() =>
-    this._createWeekCells(this.viewMonth()),
-  );
+  readonly weeks: Signal<CalendarCell<D>[][]> = computed(() => {
+    this._activeDate(); // Create dependency on active date
+    return this._createWeekCells(this.viewMonth());
+  });
 
   nextMonth(): void {
     this.viewMonth.set(this._dateAdapter.addCalendarMonths(this.viewMonth(), 1));
@@ -132,7 +132,6 @@ export class SimpleComboboxDatepickerExample<D> {
         this._activeDate.set(parsedDate);
         this.viewMonth.set(parsedDate);
         this.popupExpanded.set(false);
-        event.stopPropagation();
       }
     } else if (event.key === 'ArrowDown' && this.popupExpanded()) {
       setTimeout(() => {
@@ -180,12 +179,7 @@ export class SimpleComboboxDatepickerExample<D> {
         displayName: dateNames[i],
         ariaLabel,
         date,
-        selected: signal(
-          this._dateAdapter.compareDate(
-            date,
-            untracked(() => this._activeDate()),
-          ) === 0,
-        ),
+        selected: signal(this._dateAdapter.compareDate(date, this._activeDate()) === 0),
       });
     }
     return weeks;