feat(multiple): export aria injection tokens to support custom subclasses (#33607)

Author: ok7sai

goldens/aria/accordion/index.api.md

@@ -6,10 +6,14 @@
 
 import * as _angular_cdk_bidi from '@angular/cdk/bidi';
 import * as _angular_core from '@angular/core';
+import { InjectionToken } from '@angular/core';
 import { OnDestroy } from '@angular/core';
 import { OnInit } from '@angular/core';
 import { Signal } from '@angular/core';
 
+// @public
+export const ACCORDION_GROUP: InjectionToken<AccordionGroup>;
+
 // @public
 export class AccordionContent {
     // (undocumented)

goldens/aria/combobox/index.api.md

@@ -9,6 +9,7 @@ import { ComboboxPattern } from '@angular/aria/private';
 import { ComboboxPopupPattern } from '@angular/aria/private';
 import { DeferredContentAware } from '@angular/aria/private';
 import * as i1 from '@angular/aria/private';
+import { InjectionToken } from '@angular/core';
 import { OnDestroy } from '@angular/core';
 import { OnInit } from '@angular/core';
 
@@ -36,6 +37,9 @@ export class Combobox extends DeferredContentAware implements OnInit {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Combobox, never>;
 }
 
+// @public
+export const COMBOBOX_POPUP: InjectionToken<ComboboxPopup>;
+
 // @public
 export class ComboboxPopup implements OnInit, OnDestroy {
     readonly activeDescendant: _angular_core.Signal<string | undefined>;

goldens/aria/grid/index.api.md

@@ -7,10 +7,14 @@
 import * as _angular_cdk_bidi from '@angular/cdk/bidi';
 import * as _angular_core from '@angular/core';
 import { ElementRef } from '@angular/core';
+import { InjectionToken } from '@angular/core';
 import { OnDestroy } from '@angular/core';
 import { OnInit } from '@angular/core';
 import { Signal } from '@angular/core';
 
+// @public
+export const GRID: InjectionToken<Grid>;
+
 // @public
 export class Grid implements OnDestroy {
     constructor();
@@ -37,6 +41,12 @@ export class Grid implements OnDestroy {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Grid, never>;
 }
 
+// @public
+export const GRID_CELL: InjectionToken<GridCell>;
+
+// @public
+export const GRID_ROW: InjectionToken<GridRow>;
+
 // @public
 export class GridCell implements OnInit, OnDestroy {
     constructor();

goldens/aria/listbox/index.api.md

@@ -6,10 +6,14 @@
 
 import * as _angular_cdk_bidi from '@angular/cdk/bidi';
 import * as _angular_core from '@angular/core';
+import { InjectionToken } from '@angular/core';
 import { OnDestroy } from '@angular/core';
 import { OnInit } from '@angular/core';
 import { Signal } from '@angular/core';
 
+// @public (undocumented)
+export const LISTBOX: InjectionToken<Listbox<any>>;
+
 // @public
 export class Listbox<V> implements OnDestroy {
     constructor();

goldens/aria/menu/index.api.md

@@ -6,6 +6,7 @@
 
 import * as _angular_cdk_bidi from '@angular/cdk/bidi';
 import * as _angular_core from '@angular/core';
+import { InjectionToken } from '@angular/core';
 import { OnDestroy } from '@angular/core';
 import { OnInit } from '@angular/core';
 import { Signal } from '@angular/core';
@@ -37,6 +38,9 @@ export class Menu<V> implements OnDestroy {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Menu<any>, never>;
 }
 
+// @public
+export const MENU_COMPONENT: InjectionToken<Menu<any> | MenuBar<any>>;
+
 // @public
 export class MenuBar<V> implements OnDestroy {
     constructor();

goldens/aria/tabs/index.api.md

@@ -6,6 +6,7 @@
 
 import * as _angular_cdk_bidi from '@angular/cdk/bidi';
 import * as _angular_core from '@angular/core';
+import { InjectionToken } from '@angular/core';
 import { OnDestroy } from '@angular/core';
 import { OnInit } from '@angular/core';
 import { Signal } from '@angular/core';
@@ -32,6 +33,9 @@ export class Tab implements HasElement, OnInit, OnDestroy {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Tab, never>;
 }
 
+// @public
+export const TAB_LIST: InjectionToken<TabList>;
+
 // @public
 export class TabContent {
     // (undocumented)
@@ -87,6 +91,9 @@ export class TabPanel implements OnInit, OnDestroy {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabPanel, never>;
 }
 
+// @public
+export const TABS: InjectionToken<Tabs>;
+
 // @public
 export class Tabs implements OnDestroy {
     constructor();

goldens/aria/toolbar/index.api.md

@@ -6,6 +6,7 @@
 
 import * as _angular_cdk_bidi from '@angular/cdk/bidi';
 import * as _angular_core from '@angular/core';
+import { InjectionToken } from '@angular/core';
 import { OnDestroy } from '@angular/core';
 import { OnInit } from '@angular/core';
 import { Signal } from '@angular/core';
@@ -31,6 +32,9 @@ export class Toolbar<V> implements OnDestroy {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<Toolbar<any>, never>;
 }
 
+// @public
+export const TOOLBAR_WIDGET_GROUP: InjectionToken<ToolbarWidgetGroup<unknown>>;
+
 // @public
 export class ToolbarWidget<V> implements OnInit, OnDestroy {
     readonly active: _angular_core.Signal<boolean>;

src/aria/accordion/public-api.ts

@@ -10,6 +10,7 @@ export {AccordionPanel} from './accordion-panel';
 export {AccordionGroup} from './accordion-group';
 export {AccordionTrigger} from './accordion-trigger';
 export {AccordionContent} from './accordion-content';
+export {ACCORDION_GROUP} from './accordion-tokens';
 
 // This needs to be re-exported, because it's used by the accordion components.
 // See: https://github.com/angular/components/issues/30663.

src/aria/combobox/public-api.ts

@@ -9,6 +9,7 @@
 export {Combobox} from './combobox';
 export {ComboboxPopup} from './combobox-popup';
 export {ComboboxWidget} from './combobox-widget';
+export {COMBOBOX_POPUP} from './combobox-tokens';
 
 // This needs to be re-exported, because it's used by the combobox components.
 // See: https://github.com/angular/components/issues/30663.

src/aria/grid/grid.spec.ts

@@ -5,6 +5,7 @@ import {Grid} from './grid';
 import {GridRow} from './grid-row';
 import {GridCell} from './grid-cell';
 import {GridCellWidget} from './grid-cell-widget';
+import {GRID_ROW, GRID_CELL} from './grid-tokens';
 import {waitForMicrotasks} from '../private/testing/test-helpers';
 
 interface ModifierKeys {
@@ -1174,6 +1175,23 @@ describe('Grid directives', () => {
       expect(consoleSpy).toHaveBeenCalledWith('ngGridRow must contain at least one ngGridCell.');
     });
   });
+
+  describe('subclassing and custom providers', () => {
+    it('should support subclassing GridRow and GridCell using exported injection tokens', async () => {
+      TestBed.resetTestingModule();
+      TestBed.configureTestingModule({
+        imports: [SubclassGridTestComponent],
+      });
+      const subclassFixture = TestBed.createComponent(SubclassGridTestComponent);
+      subclassFixture.detectChanges();
+      await subclassFixture.whenStable();
+
+      const cells = subclassFixture.debugElement.queryAll(By.directive(MyCustomCell));
+      expect(cells.length).toBe(2);
+      expect(cells[0].nativeElement.getAttribute('role')).toBe('gridcell');
+      expect(cells[1].nativeElement.getAttribute('role')).toBe('gridcell');
+    });
+  });
 });
 
 @Component({
@@ -1261,3 +1279,31 @@ class GridTestComponent {
   changeDetection: ChangeDetectionStrategy.Eager,
 })
 class GridRowWithoutCells {}
+
+@Component({
+  selector: 'my-custom-cell',
+  template: `<ng-content></ng-content>`,
+  providers: [{provide: GRID_CELL, useExisting: MyCustomCell}],
+})
+class MyCustomCell extends GridCell {}
+
+@Component({
+  selector: 'my-custom-row',
+  template: `<ng-content></ng-content>`,
+  providers: [{provide: GRID_ROW, useExisting: MyCustomRow}],
+})
+class MyCustomRow extends GridRow {}
+
+@Component({
+  template: `
+    <table ngGrid>
+      <my-custom-row>
+        <my-custom-cell>Cell 1</my-custom-cell>
+        <my-custom-cell>Cell 2</my-custom-cell>
+      </my-custom-row>
+    </table>
+  `,
+  imports: [Grid, MyCustomRow, MyCustomCell],
+  changeDetection: ChangeDetectionStrategy.Eager,
+})
+class SubclassGridTestComponent {}