docs(material/dialog): use h2 for dialog title (#28519)

Because the vast majority of pages will already have an `<h1>`, and MDN
now recommends to avoid using multiple `<h1>` elements on one page. So
we should strive to show code examples that can be copy-pasted as is.

See also:

- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#avoid_using_multiple_h1_elements_on_one_page
- https://stackoverflow.com/a/38467898/37706
- https://accessibleweb.com/question-answer/how-should-i-handle-headings-in-a-modal/

(cherry picked from commit 14d5de1)

Author: PowerKiKi

src/cdk/dialog/dialog.spec.ts

@@ -875,7 +875,7 @@ describe('Dialog', () => {
       flushMicrotasks();
 
       let firstHeader = overlayContainerElement.querySelector(
-        'h1[tabindex="-1"]',
+        'h2[tabindex="-1"]',
       ) as HTMLInputElement;
 
       expect(document.activeElement)
@@ -1270,7 +1270,7 @@ class PizzaMsg {
 
 @Component({
   template: `
-    <h1>This is the title</h1>
+    <h2>This is the title</h2>
   `,
   standalone: true,
   imports: [DialogModule],

src/components-examples/material/dialog/dialog-animations/dialog-animations-example-dialog.html

@@ -1,4 +1,4 @@
-<h1 mat-dialog-title>Delete file</h1>
+<h2 mat-dialog-title>Delete file</h2>
 <mat-dialog-content>
   Would you like to delete cat.jpeg?
 </mat-dialog-content>

src/components-examples/material/dialog/dialog-data/dialog-data-example-dialog.html

@@ -1,4 +1,4 @@
-<h1 mat-dialog-title>Favorite Animal</h1>
+<h2 mat-dialog-title>Favorite Animal</h2>
 <mat-dialog-content>
   My favorite animal is:
   <ul>

src/components-examples/material/dialog/dialog-elements/dialog-elements-example-dialog.html

@@ -1,4 +1,4 @@
-<h1 mat-dialog-title>Dialog with elements</h1>
+<h2 mat-dialog-title>Dialog with elements</h2>
 <mat-dialog-content>This dialog showcases the title, close, content and actions elements.</mat-dialog-content>
 <mat-dialog-actions>
   <button mat-button mat-dialog-close>Close</button>

src/components-examples/material/dialog/dialog-overview/dialog-overview-example-dialog.html

@@ -1,4 +1,4 @@
-<h1 mat-dialog-title>Hi {{data.name}}</h1>
+<h2 mat-dialog-title>Hi {{data.name}}</h2>
 <mat-dialog-content>
   <p>What's your favorite animal?</p>
   <mat-form-field>

src/dev-app/slider/slider-demo.ts

@@ -123,7 +123,7 @@ export class SliderDemo {
   selector: 'slider-dialog-demo',
   styleUrls: ['slider-demo.css'],
   template: `
-  <h1 mat-dialog-title>Slider in a dialog</h1>
+  <h2 mat-dialog-title>Slider in a dialog</h2>
   <mat-dialog-content class="demo-dialog-content">
   <mat-slider [discrete]="this.data.discrete" [showTickMarks]="this.data.showTickMarks" [color]="this.data.color" step="10">
       <input value="50" matSliderThumb>

src/material/dialog/dialog.spec.ts

@@ -1217,7 +1217,7 @@ describe('MDC-based MatDialog', () => {
       flushMicrotasks();
 
       let firstHeader = overlayContainerElement.querySelector(
-        'h1[tabindex="-1"]',
+        'h2[tabindex="-1"]',
       ) as HTMLInputElement;
 
       expect(document.activeElement)
@@ -1628,7 +1628,7 @@ describe('MDC-based MatDialog', () => {
       @Component({
         standalone: true,
         imports: [MatDialogTitle],
-        template: `@if (showTitle()) { <h1 mat-dialog-title>This is the first title</h1> }`,
+        template: `@if (showTitle()) { <h2 mat-dialog-title>This is the first title</h2> }`,
       })
       class DialogCmp {
         showTitle = signal(true);
@@ -2243,13 +2243,13 @@ class PizzaMsg {
 @Component({
   template: `
     @if (shouldShowTitle('first')) {
-      <h1 mat-dialog-title>This is the first title</h1>
+      <h2 mat-dialog-title>This is the first title</h2>
     }
     @if (shouldShowTitle('second')) {
-      <h1 mat-dialog-title>This is the second title</h1>
+      <h2 mat-dialog-title>This is the second title</h2>
     }
     @if (shouldShowTitle('third')) {
-      <h1 mat-dialog-title>This is the third title</h1>
+      <h2 mat-dialog-title>This is the third title</h2>
     }
     <mat-dialog-content>Lorem ipsum dolor sit amet.</mat-dialog-content>
     <mat-dialog-actions align="end">
@@ -2278,13 +2278,13 @@ class ContentElementDialog {
   template: `
     <ng-template>
       @if (shouldShowTitle('first')) {
-        <h1 mat-dialog-title>This is the first title</h1>
+        <h2 mat-dialog-title>This is the first title</h2>
       }
       @if (shouldShowTitle('second')) {
-        <h1 mat-dialog-title>This is the second title</h1>
+        <h2 mat-dialog-title>This is the second title</h2>
       }
       @if (shouldShowTitle('third')) {
-        <h1 mat-dialog-title>This is the third title</h1>
+        <h2 mat-dialog-title>This is the third title</h2>
       }
       <mat-dialog-content>Lorem ipsum dolor sit amet.</mat-dialog-content>
       <mat-dialog-actions align="end">