fix(docs-infra): rename "title" by "header" to avoid unwanted tooltips (#26396)

Closes #26174

PR Close #26396

aio/src/app/custom-elements/code/code-example.component.spec.ts

@@ -33,18 +33,18 @@ describe('CodeExampleComponent', () => {
     expect(codeExampleComponent.aioCode.code.trim()).toBe(`const foo = "bar";`);
   });
 
-  it('should change aio-code classes based on title presence', () => {
-    expect(codeExampleComponent.title).toBe('Great Example');
+  it('should change aio-code classes based on header presence', () => {
+    expect(codeExampleComponent.header).toBe('Great Example');
     expect(fixture.nativeElement.querySelector('header')).toBeTruthy();
     expect(codeExampleComponent.classes).toEqual({
       'headed-code': true,
       'simple-code': false
     });
 
-    codeExampleComponent.title = '';
+    codeExampleComponent.header = '';
     fixture.detectChanges();
 
-    expect(codeExampleComponent.title).toBe('');
+    expect(codeExampleComponent.header).toBe('');
     expect(fixture.nativeElement.querySelector('header')).toBeFalsy();
     expect(codeExampleComponent.classes).toEqual({
       'headed-code': false,
@@ -85,14 +85,14 @@ describe('CodeExampleComponent', () => {
 @Component({
   selector: 'aio-host-comp',
   template: `
-    <code-example [title]="title" [path]="path" [hidecopy]="hidecopy">
+    <code-example [header]="header" [path]="path" [hidecopy]="hidecopy">
       {{code}}
     </code-example>
   `
 })
 class HostComponent {
   code = `const foo = "bar";`;
-  title = 'Great Example';
+  header = 'Great Example';
   path = 'code-path';
   hidecopy: boolean | string = false;
 

aio/src/app/custom-elements/code/code-example.component.ts

@@ -7,7 +7,7 @@ import { CodeComponent } from './code.component';
  * Example usage:
  *
  * ```
- * <code-example language="ts" linenums="2" class="special" title="Do Stuff">
+ * <code-example language="ts" linenums="2" class="special" header="Do Stuff">
  * // a code block
  * console.log('do stuff');
  * </code-example>
@@ -19,7 +19,7 @@ import { CodeComponent } from './code.component';
     <!-- Content projection is used to get the content HTML provided to this component -->
     <div #content style="display: none"><ng-content></ng-content></div>
 
-    <header *ngIf="title">{{title}}</header>
+    <header *ngIf="header">{{header}}</header>
 
     <aio-code [ngClass]="classes"
               [language]="language"
@@ -27,7 +27,7 @@ import { CodeComponent } from './code.component';
               [path]="path"
               [region]="region"
               [hideCopy]="hidecopy"
-              [title]="title">
+              [header]="header">
     </aio-code>
   `,
 })
@@ -41,15 +41,15 @@ export class CodeExampleComponent implements AfterViewInit {
   @Input() region: string;
 
   @Input()
-  set title(title: string) {
-    this._title = title;
+  set header(header: string) {
+    this._header = header;
     this.classes = {
-      'headed-code': !!this.title,
-      'simple-code': !this.title,
+      'headed-code': !!this.header,
+      'simple-code': !this.header,
     };
   }
-  get title(): string { return this._title; }
-  private _title: string;
+  get header(): string { return this._header; }
+  private _header: string;
 
   @Input()
   set path(path: string) {

aio/src/app/custom-elements/code/code-tabs.component.spec.ts

@@ -39,7 +39,7 @@ describe('CodeTabsComponent', () => {
     expect(tabs[0].linenums).toBe('linenums-A');
     expect(tabs[0].path).toBe('path-A');
     expect(tabs[0].region).toBe('region-A');
-    expect(tabs[0].title).toBe('title-A');
+    expect(tabs[0].header).toBe('header-A');
     expect(tabs[0].code.trim()).toBe('Code example 1');
 
     // Second code pane expectations
@@ -48,7 +48,7 @@ describe('CodeTabsComponent', () => {
     expect(tabs[1].linenums).toBe('default-linenums', 'Default linenums should have been used');
     expect(tabs[1].path).toBe('path-B');
     expect(tabs[1].region).toBe('region-B');
-    expect(tabs[1].title).toBe('title-B');
+    expect(tabs[1].header).toBe('header-B');
     expect(tabs[1].code.trim()).toBe('Code example 2');
   });
 
@@ -56,10 +56,10 @@ describe('CodeTabsComponent', () => {
     const matTabs = fixture.nativeElement.querySelectorAll('.mat-tab-label');
     expect(matTabs.length).toBe(2);
 
-    expect(matTabs[0].textContent.trim()).toBe('title-A');
+    expect(matTabs[0].textContent.trim()).toBe('header-A');
     expect(matTabs[0].querySelector('.class-A')).toBeTruthy();
 
-    expect(matTabs[1].textContent.trim()).toBe('title-B');
+    expect(matTabs[1].textContent.trim()).toBe('header-B');
     expect(matTabs[1].querySelector('.class-B')).toBeTruthy();
   });
 
@@ -78,14 +78,14 @@ describe('CodeTabsComponent', () => {
                  linenums="linenums-A"
                  path="path-A"
                  region="region-A"
-                 title="title-A">
+                 header="header-A">
         Code example 1
       </code-pane>
       <code-pane class="class-B"
                  language="language-B"
                  path="path-B"
                  region="region-B"
-                 title="title-B">
+                 header="header-B">
         Code example 2
       </code-pane>
     </code-tabs>

aio/src/app/custom-elements/code/code-tabs.component.ts

@@ -9,7 +9,7 @@ export interface TabInfo {
   linenums: any;
   path: string;
   region: string;
-  title: string|null;
+  header: string|null;
 }
 
 /**
@@ -29,14 +29,14 @@ export interface TabInfo {
       <mat-tab-group class="code-tab-group" disableRipple>
         <mat-tab style="overflow-y: hidden;" *ngFor="let tab of tabs">
           <ng-template mat-tab-label>
-            <span class="{{ tab.class }}">{{ tab.title }}</span>
+            <span class="{{ tab.class }}">{{ tab.header }}</span>
           </ng-template>
           <aio-code class="{{ tab.class }}"
                     [language]="tab.language"
                     [linenums]="tab.linenums"
                     [path]="tab.path"
                     [region]="tab.region"
-                    [title]="tab.title">
+                    [header]="tab.header">
           </aio-code>
         </mat-tab>
       </mat-tab-group>
@@ -77,7 +77,7 @@ export class CodeTabsComponent implements OnInit, AfterViewInit {
       linenums: tabContent.getAttribute('linenums') || this.linenums,
       path: tabContent.getAttribute('path') || '',
       region: tabContent.getAttribute('region') || '',
-      title: tabContent.getAttribute('title')
+      header: tabContent.getAttribute('header')
     };
   }
 }

aio/src/app/custom-elements/code/code.component.spec.ts

@@ -200,10 +200,10 @@ describe('CodeComponent', () => {
       expect(getButton().getAttribute('aria-label')).toBe('');
     });
 
-    it('should have aria-label explaining what is being copied when title passed in', () => {
-      hostComponent.title = 'a/b/c/foo.ts';
+    it('should have aria-label explaining what is being copied when header passed in', () => {
+      hostComponent.header = 'a/b/c/foo.ts';
       fixture.detectChanges();
-      expect(getButton().getAttribute('aria-label')).toContain(hostComponent.title);
+      expect(getButton().getAttribute('aria-label')).toContain(hostComponent.header);
     });
 
     it('should call copier service when clicked', () => {
@@ -273,7 +273,7 @@ describe('CodeComponent', () => {
   template: `
     <aio-code [language]="language"
     [linenums]="linenums" [path]="path" [region]="region"
-    [hideCopy]="hideCopy" [title]="title"></aio-code>
+    [hideCopy]="hideCopy" [header]="header"></aio-code>
   `
 })
 class HostComponent implements AfterViewInit {
@@ -282,7 +282,7 @@ class HostComponent implements AfterViewInit {
   linenums: boolean | number | string;
   path: string;
   region: string;
-  title: string;
+  header: string;
 
   @ViewChild(CodeComponent) codeComponent: CodeComponent;
 

aio/src/app/custom-elements/code/code.component.ts

@@ -85,14 +85,14 @@ export class CodeComponent implements OnChanges {
   /** Region of the source of the code being displayed. */
   @Input() region: string;
 
-  /** Optional title to be displayed above the code. */
+  /** Optional header to be displayed above the code. */
   @Input()
-  set title(title: string) {
-    this._title = title;
-    this.ariaLabel = this.title ? `Copy code snippet from ${this.title}` : '';
+  set header(header: string) {
+    this._header = header;
+    this.ariaLabel = this.header ? `Copy code snippet from ${this.header}` : '';
   }
-  get title(): string { return this._title; }
-  private _title: string;
+  get header(): string { return this._header; }
+  private _header: string;
 
   @Output() codeFormatted = new EventEmitter<void>();