+ Now Available in Angular Aria!
+
+ The Angular team has introduced a new low-level component library called Angular Aria.
+ Consider using the
+ Angular Aria {{ componentName }}
+ component as an alternative to this CDK component.
+
+
diff --git a/docs/src/app/shared/doc-viewer/angular-aria-banner/angular-aria-banner.ts b/docs/src/app/shared/doc-viewer/angular-aria-banner/angular-aria-banner.ts
new file mode 100644
index 000000000000..cb4741730a83
--- /dev/null
+++ b/docs/src/app/shared/doc-viewer/angular-aria-banner/angular-aria-banner.ts
@@ -0,0 +1,36 @@
+/**
+ * @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 {Component, Input} from '@angular/core';
+
+/**
+ * Mapping of CDK component names to their Angular Aria documentation URLs.
+ */
+const ANGULAR_ARIA_LINKS: Record = {
+ 'listbox': 'https://angular.dev/guide/aria/listbox',
+ 'tree': 'https://angular.dev/guide/aria/tree',
+ 'accordion': 'https://angular.dev/guide/aria/accordion',
+ 'menu': 'https://angular.dev/guide/aria/menu',
+};
+
+/**
+ * Banner component that guides users to use the new Angular Aria components for CDK components
+ * that have equivalent Angular Aria components.
+ */
+@Component({
+ selector: 'angular-aria-banner',
+ templateUrl: 'angular-aria-banner.html',
+ styleUrl: 'angular-aria-banner.css',
+})
+export class AngularAriaBanner {
+ @Input() componentName: string = '';
+
+ get ariaLink(): string {
+ return ANGULAR_ARIA_LINKS[this.componentName.toLowerCase()] || '';
+ }
+}
diff --git a/docs/src/app/shared/doc-viewer/doc-viewer.ts b/docs/src/app/shared/doc-viewer/doc-viewer.ts
index 93eb369c1227..aba8ca165325 100644
--- a/docs/src/app/shared/doc-viewer/doc-viewer.ts
+++ b/docs/src/app/shared/doc-viewer/doc-viewer.ts
@@ -38,6 +38,7 @@ import {ExampleViewer} from '../example-viewer/example-viewer';
import {HeaderLink} from './header-link';
import {DeprecatedFieldComponent} from './deprecated-tooltip';
import {ModuleImportCopyButton} from './module-import-copy-button';
+import {AngularAriaBanner} from './angular-aria-banner/angular-aria-banner';
@Injectable({providedIn: 'root'})
class DocFetcher {
@@ -154,6 +155,9 @@ export class DocViewer implements OnDestroy {
this._loadComponents('material-docs-example', ExampleViewer);
this._loadComponents('header-link', HeaderLink);
+ // Inject Angular Aria banner for specific CDK components
+ this._injectAngularAriaBanner();
+
// Create tooltips for the deprecated fields
this._createTooltipsForDeprecated();
@@ -267,4 +271,37 @@ export class DocViewer implements OnDestroy {
this._portalHosts.push(elementPortalOutlet);
});
}
+
+ /**
+ * Injects the Angular Aria migration banner for specific CDK components.
+ */
+ private _injectAngularAriaBanner() {
+ const componentName = this.name();
+ const componentsWithAriaBanner = ['listbox', 'tree', 'accordion', 'menu'];
+
+ if (!componentName || !componentsWithAriaBanner.includes(componentName.toLowerCase())) {
+ return;
+ }
+
+ // Create a container div for the banner at the beginning of the document
+ const bannerContainer = document.createElement('div');
+ bannerContainer.setAttribute('angular-aria-banner', '');
+ bannerContainer.setAttribute('componentName', componentName);
+
+ // Insert the banner at the beginning of the document content
+ const firstChild = this._elementRef.nativeElement.firstChild;
+ if (firstChild) {
+ this._elementRef.nativeElement.insertBefore(bannerContainer, firstChild);
+ } else {
+ this._elementRef.nativeElement.appendChild(bannerContainer);
+ }
+
+ // Create and attach the banner component
+ const portalHost = new DomPortalOutlet(bannerContainer, this._appRef, this._injector);
+ const bannerPortal = new ComponentPortal(AngularAriaBanner, this._viewContainerRef);
+ const bannerComponent = portalHost.attach(bannerPortal);
+ bannerComponent.instance.componentName = componentName;
+
+ this._portalHosts.push(portalHost);
+ }
}