From c05f5e4cfd6752f5ef69eeff383055b00073e822 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Thu, 27 Nov 2025 10:53:15 +0100
Subject: [PATCH] docs: prevent aria banner from showing up on Material

The banner for Angular Aria was showing up for Material as well, because we weren't checking the package name.

These changes also fix some minor issues like using an inline SVG instead of `mat-icon`.

Fixes #32420.
---
 .../component-viewer/component-overview.html  |  4 +++-
 .../angular-aria-banner.css                   | 15 +++++++++------
 .../angular-aria-banner.html                  | 19 ++++++++-----------
 .../angular-aria-banner.ts                    |  2 ++
 docs/src/app/shared/doc-viewer/doc-viewer.ts  | 16 ++++++++--------
 5 files changed, 30 insertions(+), 26 deletions(-)

diff --git a/docs/src/app/pages/component-viewer/component-overview.html b/docs/src/app/pages/component-viewer/component-overview.html
index 715e4e126a72..a3397b3ed5e3 100644
--- a/docs/src/app/pages/component-viewer/component-overview.html
+++ b/docs/src/app/pages/component-viewer/component-overview.html
@@ -2,7 +2,9 @@
   <h2 class="cdk-visually-hidden" tabindex="-1">
     Overview for {{docItem.id}}
   </h2>
-  <doc-viewer [name]="docItem.id"
+  <doc-viewer
+    [name]="docItem.id"
+    [packageName]="docItem.packageName"
     [document]="getOverviewDocumentUrl(docItem)"
     class="docs-component-view-text-content docs-component-overview"
     (contentRendered)="updateTableOfContents('Overview Content', $event)" />
diff --git a/docs/src/app/shared/doc-viewer/angular-aria-banner/angular-aria-banner.css b/docs/src/app/shared/doc-viewer/angular-aria-banner/angular-aria-banner.css
index 024ce71a26d8..5bc996314758 100644
--- a/docs/src/app/shared/doc-viewer/angular-aria-banner/angular-aria-banner.css
+++ b/docs/src/app/shared/doc-viewer/angular-aria-banner/angular-aria-banner.css
@@ -11,33 +11,36 @@
   line-height: 1.6;
 }
 
-.docs-angular-aria-banner-icon {
-  font-size: 20px;
+mat-icon {
   flex-shrink: 0;
-  fill: var(--mat-sys-primary);
+  color: var(--mat-sys-primary);
 }
 
 .docs-angular-aria-banner-content {
   flex: 1;
 }
 
-.docs-angular-aria-banner-content strong {
+strong {
   color: var(--mat-sys-primary);
 }
 
-.docs-angular-aria-banner-content a {
+a {
   color: var(--mat-sys-primary);
   text-decoration: underline;
   font-weight: 500;
 }
 
+p {
+  margin: 0;
+}
+
 @media (max-width: 600px) {
   .docs-angular-aria-banner {
     padding: 12px;
     gap: 8px;
   }
 
-  .docs-angular-aria-banner-icon {
+  mat-icon {
     font-size: 18px;
   }
 }
diff --git a/docs/src/app/shared/doc-viewer/angular-aria-banner/angular-aria-banner.html b/docs/src/app/shared/doc-viewer/angular-aria-banner/angular-aria-banner.html
index 888cf5700406..e98063aa474e 100644
--- a/docs/src/app/shared/doc-viewer/angular-aria-banner/angular-aria-banner.html
+++ b/docs/src/app/shared/doc-viewer/angular-aria-banner/angular-aria-banner.html
@@ -1,16 +1,13 @@
 <div class="docs-angular-aria-banner">
-  <svg class="docs-angular-aria-banner-icon" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
-    width="24px">
-    <path d="M0 0h24v24H0V0z" fill="none" />
-    <path
-      d="M11 7h2v2h-2zm0 4h2v6h-2zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" />
-  </svg>
+  <mat-icon>info</mat-icon>
+
   <div class="docs-angular-aria-banner-content">
     <strong>Now Available in Angular Aria!</strong>
-    <br />
-    The Angular team has introduced a new low-level component library called Angular Aria.
-    Consider using the
-    <a [href]="ariaLink" target="_blank" rel="noopener">Angular Aria {{ componentName }}</a>
-    component as an alternative to this CDK component.
+    <p>
+      The Angular team has introduced a new low-level component library called Angular Aria.
+      Consider using the
+      <a [href]="ariaLink" target="_blank" rel="noopener">Angular Aria {{ componentName }}</a>
+      component as an alternative to this CDK component.
+    </p>
   </div>
 </div>
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
index cb4741730a83..4a23a0288986 100644
--- 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
@@ -7,6 +7,7 @@
  */
 
 import {Component, Input} from '@angular/core';
+import {MatIcon} from '@angular/material/icon';
 
 /**
  * Mapping of CDK component names to their Angular Aria documentation URLs.
@@ -26,6 +27,7 @@ const ANGULAR_ARIA_LINKS: Record<string, string> = {
   selector: 'angular-aria-banner',
   templateUrl: 'angular-aria-banner.html',
   styleUrl: 'angular-aria-banner.css',
+  imports: [MatIcon],
 })
 export class AngularAriaBanner {
   @Input() componentName: string = '';
diff --git a/docs/src/app/shared/doc-viewer/doc-viewer.ts b/docs/src/app/shared/doc-viewer/doc-viewer.ts
index aba8ca165325..2fcc06ce5c29 100644
--- a/docs/src/app/shared/doc-viewer/doc-viewer.ts
+++ b/docs/src/app/shared/doc-viewer/doc-viewer.ts
@@ -81,6 +81,7 @@ export class DocViewer implements OnDestroy {
   protected portal: Portal<any> | undefined;
 
   readonly name = input<string>();
+  readonly packageName = input<string>();
 
   /** The document to display, either as a URL to a markdown file or a component to create. */
   @Input()
@@ -277,9 +278,13 @@ export class DocViewer implements OnDestroy {
    */
   private _injectAngularAriaBanner() {
     const componentName = this.name();
-    const componentsWithAriaBanner = ['listbox', 'tree', 'accordion', 'menu'];
+    const packageName = this.packageName();
 
-    if (!componentName || !componentsWithAriaBanner.includes(componentName.toLowerCase())) {
+    if (
+      !componentName ||
+      packageName !== 'cdk' ||
+      !['listbox', 'tree', 'accordion', 'menu'].includes(componentName.toLowerCase())
+    ) {
       return;
     }
 
@@ -289,12 +294,7 @@ export class DocViewer implements OnDestroy {
     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);
-    }
+    this._elementRef.nativeElement.prepend(bannerContainer);
 
     // Create and attach the banner component
     const portalHost = new DomPortalOutlet(bannerContainer, this._appRef, this._injector);