feat(material/tabs): Throw error in MDC tabs if [tabPanel] input is not provided (#24517)

* feat(material/tabs): Throw error in MDC tabs if [tabPanel] is not provided.

* feat(material/tabs): Exclude some tests from MDC

* feat(material/tabs): Add tab panel to kitchen sinks

Author: zelliott

scripts/check-mdc-tests-config.ts

@@ -185,5 +185,15 @@ export const config = {
       'should set the old snack bar animation state to complete and the new snack bar ' +
         'animation state to visible on entry of new snack bar',
     ],
+    'mdc-tabs': [
+      // These tests are excluded because they are verifying behavior that is not supported in MDC.
+      'should have no explicit roles',
+      'should not setup aria-controls',
+      'should not manage aria-selected',
+      'should not activate a link when space is pressed',
+      'should manage aria-current',
+      'should support the native tabindex attribute',
+      'should support binding to the tabIndex',
+    ],
   } as {[key: string]: string[]},
 };

src/dev-app/mdc-tabs/mdc-tabs-demo.html

@@ -101,12 +101,13 @@ <h2>Ink bar fit to content</h2>
   </mat-tab-group>
 
   <h2>Ink bar fit to content</h2>
-  <nav mat-tab-nav-bar [fitInkBarToContent]="fitInkBarToContent">
+  <nav mat-tab-nav-bar [fitInkBarToContent]="fitInkBarToContent" [tabPanel]="tabPanelInkBar">
     <a mat-tab-link *ngFor="let link of links"
        (click)="activeLink = link"
        [active]="activeLink == link">{{link}}</a>
     <a mat-tab-link disabled>Disabled Link</a>
   </nav>
+  <mat-tab-nav-panel #tabPanelInkBar></mat-tab-nav-panel>
 
   <h2>Lazy tabs</h2>
   <mat-tab-group>
@@ -121,14 +122,6 @@ <h2>Lazy tabs</h2>
   </mat-tab-group>
 
   <h2>Tab nav bar</h2>
-  <nav mat-tab-nav-bar>
-    <a mat-tab-link *ngFor="let link of links"
-      (click)="activeLink = link"
-      [active]="activeLink == link">{{link}}</a>
-    <a mat-tab-link disabled>Disabled Link</a>
-  </nav>
-
-  <h2>Tab nav bar with panel</h2>
   <nav mat-tab-nav-bar [tabPanel]="tabPanel">
     <a mat-tab-link *ngFor="let link of links"
       (click)="activeLink = link"

src/material-experimental/mdc-tabs/README.md

@@ -80,6 +80,7 @@ The experimental tabs API closely matches the
 as all of the symbols found under `@angular/material/tabs`, except for the following
 differences:
 
+* `MatTabNav` will throw an error in dev mode if a `[tabPanel]` is not provided.
 * `MatTabLink` is defined as a `Component` in the experimental package,
   whereas in the current one it's a `Directive`.