Merge branch 'angular:main' into aria-validation

Author: adolgachev

goldens/aria/grid/index.api.md

@@ -7,7 +7,6 @@
 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 { OnDestroy } from '@angular/core';
 import { OnInit } from '@angular/core';
 import { Signal } from '@angular/core';
@@ -41,7 +40,6 @@ export class Grid implements OnDestroy {
 // @public
 export class GridCell implements OnInit, OnDestroy {
     constructor();
-    readonly activated: EventEmitter<KeyboardEvent>;
     readonly active: Signal<boolean>;
     readonly colIndex: _angular_core.InputSignal<number | undefined>;
     readonly colSpan: _angular_core.InputSignal<number>;
@@ -62,7 +60,7 @@ export class GridCell implements OnInit, OnDestroy {
     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; }; }, { "activated": "activated"; "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; }; }, { "selected": "selectedChange"; }, ["_widget"], never, true, never>;
     // (undocumented)
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<GridCell, never>;
 }

goldens/aria/private/index.api.md

@@ -301,7 +301,6 @@ 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>;
@@ -341,15 +340,19 @@ export interface GridCellWidgetInputs {
     disabled: SignalLike<boolean>;
     element: SignalLike<HTMLElement>;
     focusTarget: SignalLike<ElementResolver<HTMLElement>>;
+    onActivate?: (event: KeyboardEvent | FocusEvent | undefined) => void;
+    onDeactivate?: (event: KeyboardEvent | FocusEvent | undefined) => void;
     widgetType: SignalLike<'simple' | 'complex' | 'editable'>;
 }
 
 // @public
 export class GridCellWidgetPattern {
     constructor(inputs: GridCellWidgetInputs);
     activate(event?: KeyboardEvent | FocusEvent): void;
+    activationEffect(): void;
     readonly active: SignalLike<boolean>;
     deactivate(event?: KeyboardEvent | FocusEvent): void;
+    deactivationEffect(): void;
     readonly disabled: SignalLike<boolean>;
     readonly element: SignalLike<HTMLElement>;
     focus(): void;

goldens/aria/simple-combobox/testing/index.api.md

@@ -0,0 +1,47 @@
+## API Report File for "@angular/aria_simple-combobox_testing"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+import { BaseHarnessFilters } from '@angular/cdk/testing';
+import { ComponentHarness } from '@angular/cdk/testing';
+import { ComponentHarnessConstructor } from '@angular/cdk/testing';
+import { ContentContainerComponentHarness } from '@angular/cdk/testing';
+import { HarnessLoader } from '@angular/cdk/testing';
+import { HarnessPredicate } from '@angular/cdk/testing';
+
+// @public
+export class ComboboxHarness extends ContentContainerComponentHarness {
+    blur(): Promise<void>;
+    close(): Promise<void>;
+    focus(): Promise<void>;
+    getPlaceholder(): Promise<string | null>;
+    getPopupLoader(): Promise<HarnessLoader>;
+    getPopupWidget<T extends ComponentHarness>(type: ComponentHarnessConstructor<T> & {
+        with: (options?: {
+            selector?: string;
+        }) => HarnessPredicate<T>;
+    }): Promise<T>;
+    protected getRootHarnessLoader(): Promise<HarnessLoader>;
+    getValue(): Promise<string>;
+    // (undocumented)
+    static hostSelector: string;
+    isDisabled(): Promise<boolean>;
+    isFocused(): Promise<boolean>;
+    isOpen(): Promise<boolean>;
+    open(): Promise<void>;
+    setValue(value: string): Promise<void>;
+    static with(options?: ComboboxHarnessFilters): HarnessPredicate<ComboboxHarness>;
+}
+
+// @public
+export interface ComboboxHarnessFilters extends BaseHarnessFilters {
+    disabled?: boolean;
+    placeholder?: string | RegExp;
+    value?: string | RegExp;
+}
+
+// (No @packageDocumentation comment for this package)
+
+```

src/aria/config.bzl

@@ -10,6 +10,7 @@ ARIA_ENTRYPOINTS = [
     "menu",
     "menu/testing",
     "simple-combobox",
+    "simple-combobox/testing",
     "tabs",
     "tabs/testing",
     "toolbar",

src/aria/grid/grid-cell-widget.ts

@@ -88,14 +88,16 @@ export class GridCellWidget {
    * If a focus target exists then return -1. Unless an override.
    */
   protected readonly _tabIndex: Signal<number> = computed(
-    () => this.tabindex() ?? (this.focusTarget() ? -1 : this._pattern.tabIndex()),
+    () => this.tabindex() ?? this._pattern.tabIndex(),
   );
 
   /** The UI pattern for the grid cell widget. */
   readonly _pattern = new GridCellWidgetPattern({
     ...this,
     element: () => this.element,
     cell: () => this._cell._pattern,
+    onActivate: e => this.activated.emit(e),
+    onDeactivate: e => this.deactivated.emit(e),
   });
 
   /** Whether the widget is activated. */
@@ -105,22 +107,11 @@ export class GridCellWidget {
 
   constructor() {
     afterRenderEffect({
-      read: () => {
-        if (this._pattern.isActivated()) {
-          const activateEvent = this._pattern.lastActivateEvent();
-          this.activated.emit(activateEvent);
-          this._pattern.focus();
-        }
-      },
+      write: () => this._pattern.activationEffect(),
     });
 
     afterRenderEffect({
-      read: () => {
-        const deactivateEvent = this._pattern.lastDeactivateEvent();
-        if (deactivateEvent) {
-          this.deactivated.emit(deactivateEvent);
-        }
-      },
+      write: () => this._pattern.deactivationEffect(),
     });
   }
 

src/aria/grid/grid-cell.ts

@@ -14,13 +14,11 @@ import {
   contentChild,
   Directive,
   ElementRef,
-  EventEmitter,
   inject,
   input,
   model,
   OnDestroy,
   OnInit,
-  Output,
   Signal,
   Renderer2,
 } from '@angular/core';
@@ -56,9 +54,6 @@ export class GridCell implements OnInit, OnDestroy {
   /** 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());
 
@@ -122,7 +117,6 @@ export class GridCell implements OnInit, OnDestroy {
     widget: this._widgetPattern,
     getWidget: e => this._getWidget(e),
     element: () => this.element,
-    onActivate: e => this.activated.emit(e),
   });
 
   constructor() {

src/aria/grid/grid.spec.ts

@@ -938,6 +938,56 @@ describe('Grid directives', () => {
         expect(widgetElement.getAttribute('tabindex')).toBe('-1');
       });
 
+      it('should emit the activated output on Enter for simple widget', () => {
+        const gridData = createGridData();
+        gridData[0].cells[0].widgets = [{id: 'w1', type: 'simple'}];
+        setupGrid({gridData});
+        gridInstance._pattern.setDefaultStateEffect();
+        fixture.detectChanges();
+
+        tabIntoGrid();
+
+        expect(fixture.componentInstance.onActivated).not.toHaveBeenCalled();
+
+        keydown('Enter');
+        expect(fixture.componentInstance.onActivated).toHaveBeenCalled();
+      });
+
+      it('should emit the activated output on Space for simple widget', () => {
+        const gridData = createGridData();
+        gridData[0].cells[0].widgets = [{id: 'w1', type: 'simple'}];
+        setupGrid({gridData});
+        gridInstance._pattern.setDefaultStateEffect();
+        fixture.detectChanges();
+
+        tabIntoGrid();
+
+        expect(fixture.componentInstance.onActivated).not.toHaveBeenCalled();
+
+        keydown(' ');
+        expect(fixture.componentInstance.onActivated).toHaveBeenCalled();
+      });
+
+      it('should emit the activated output in activedescendant mode when event is dispatched directly to grid', () => {
+        const gridData = createGridData();
+        gridData[0].cells[0].widgets = [{id: 'w1', type: 'simple'}];
+        setupGrid({gridData, focusMode: 'activedescendant'});
+        gridInstance._pattern.setDefaultStateEffect();
+        fixture.detectChanges();
+
+        expect(fixture.componentInstance.onActivated).not.toHaveBeenCalled();
+
+        // Verify standard activedescendant behavior by targeting the CONTAINER directly
+        const event = new KeyboardEvent('keydown', {
+          key: 'Enter',
+          bubbles: true,
+        });
+        gridElement.dispatchEvent(event);
+        fixture.detectChanges();
+
+        expect(fixture.componentInstance.onActivated).toHaveBeenCalled();
+      });
+
       it('should emit the activated output when the widget becomes active', () => {
         const gridData = createGridData();
         gridData[0].cells[0].widgets = [{id: 'w1', type: 'complex'}];

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/menu/menu-item.ts

@@ -31,7 +31,7 @@ import type {MenuBar} from './menu-bar';
  *
  * ```html
  * <div ngMenu (itemSelected)="doAction()">
- *   <div ngMenuItem >Action Item</div>
+ *   <div ngMenuItem>Action Item</div>
  *   <div ngMenuItem [submenu]="anotherMenu">Submenu Trigger</div>
  * </div>
  * ```
@@ -49,7 +49,6 @@ import type {MenuBar} from './menu-bar';
     '(focusin)': '_pattern.onFocusIn()',
     '[attr.tabindex]': '_pattern.tabIndex()',
     '[attr.data-active]': 'active()',
-    '[attr.aria-label]': 'value()',
     '[attr.aria-haspopup]': 'hasPopup()',
     '[attr.aria-expanded]': 'expanded()',
     '[attr.aria-disabled]': '_pattern.disabled()',
@@ -66,7 +65,7 @@ export class MenuItem<V> implements OnInit, OnDestroy {
   /** The unique ID of the menu item. */
   readonly id = input(inject(_IdGenerator).getId('ng-menu-item-', true));
 
-  /** The value of the menu item, used as the default aria-label */
+  /** The value of the menu item. */
   readonly value = input.required<V>();
 
   /** Whether the menu item is disabled. */