feat(material/tabs): Changed goldens and added MDC

Author: zelliott

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

@@ -127,4 +127,13 @@ <h2>Tab nav bar</h2>
       [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 [panel]="panel">
+    <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 #panel></mat-tab-nav-panel>
 </div>

src/material-experimental/mdc-tabs/module.ts

@@ -19,7 +19,7 @@ import {MatTabLabelWrapper} from './tab-label-wrapper';
 import {MatTab} from './tab';
 import {MatTabHeader} from './tab-header';
 import {MatTabGroup} from './tab-group';
-import {MatTabNav, MatTabLink} from './tab-nav-bar/tab-nav-bar';
+import {MatTabNav, MatTabNavPanel, MatTabLink} from './tab-nav-bar/tab-nav-bar';
 
 @NgModule({
   imports: [
@@ -37,6 +37,7 @@ import {MatTabNav, MatTabLink} from './tab-nav-bar/tab-nav-bar';
     MatTab,
     MatTabGroup,
     MatTabNav,
+    MatTabNavPanel,
     MatTabLink,
   ],
   declarations: [
@@ -45,6 +46,7 @@ import {MatTabNav, MatTabLink} from './tab-nav-bar/tab-nav-bar';
     MatTab,
     MatTabGroup,
     MatTabNav,
+    MatTabNavPanel,
     MatTabLink,
 
     // Private directives, should not be exported.

src/material-experimental/mdc-tabs/tab-nav-bar/tab-nav-bar.ts

@@ -56,6 +56,7 @@ import {takeUntil} from 'rxjs/operators';
   templateUrl: 'tab-nav-bar.html',
   styleUrls: ['tab-nav-bar.css'],
   host: {
+    '[attr.role]': 'panel ? "tablist" : null',
     'class': 'mat-mdc-tab-nav-bar mat-mdc-tab-header',
     '[class.mat-mdc-tab-header-pagination-controls-enabled]': '_showPaginationControls',
     '[class.mat-mdc-tab-header-rtl]': "_getLayoutDirection() == 'rtl'",
@@ -130,12 +131,16 @@ export class MatTabNav extends _MatTabNavBase implements AfterContentInit {
   styleUrls: ['tab-link.css'],
   host: {
     'class': 'mdc-tab mat-mdc-tab-link mat-mdc-focus-indicator',
-    '[attr.aria-current]': 'active ? "page" : null',
+    '[attr.aria-controls]': '_tabNavBar.panel ? _tabNavBar.panel.id : null',
+    '[attr.aria-current]': '(active && !_tabNavBar.panel) ? "page" : null',
     '[attr.aria-disabled]': 'disabled',
-    '[attr.tabIndex]': 'tabIndex',
+    '[attr.aria-selected]': '_tabNavBar.panel ? (active ? "true" : "false") : null',
+    '[attr.id]': 'id',
+    '[attr.tabIndex]': '_getTabIndex()',
     '[class.mat-mdc-tab-disabled]': 'disabled',
     '[class.mdc-tab--active]': 'active',
     '(focus)': '_handleFocus()',
+    '(keydown)': '_handleKeydown($event)',
   },
 })
 export class MatTabLink extends _MatTabLinkBase implements MatInkBarItem, OnInit, OnDestroy {
@@ -170,3 +175,29 @@ export class MatTabLink extends _MatTabLinkBase implements MatInkBarItem, OnInit
     this._foundation.destroy();
   }
 }
+
+// Increasing integer for generating unique ids for tab nav components.
+let nextUniqueId = 0;
+
+/**
+ * Tab panel component associated with MatTabNav.
+ */
+@Component({
+  selector: 'mat-tab-nav-panel',
+  exportAs: 'matTabNavPanel',
+  template: '<ng-content></ng-content>',
+  host: {
+    '[attr.aria-labelledby]': '_activeTabId',
+    '[attr.id]': 'id',
+    'role': 'tabpanel',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MatTabNavPanel {
+  /** Unique id for the tab panel. */
+  @Input() id = `mat-tab-nav-panel-${nextUniqueId++}`;
+
+  /** Id of the active tab in the nav bar. */
+  _activeTabId?: string;
+}

tools/public_api_guard/material/tabs.md

@@ -367,8 +367,13 @@ export class _MatTabLinkBase extends _MatTabLinkMixinBase implements AfterViewIn
     set active(value: boolean);
     elementRef: ElementRef;
     focus(): void;
+    _getIndex(): number;
+    _getTabIndex(): number;
     // (undocumented)
     _handleFocus(): void;
+    // (undocumented)
+    _handleKeydown(event: KeyboardEvent): void;
+    id: string;
     protected _isActive: boolean;
     // (undocumented)
     static ngAcceptInputType_active: BooleanInput;
@@ -385,7 +390,7 @@ export class _MatTabLinkBase extends _MatTabLinkMixinBase implements AfterViewIn
     rippleConfig: RippleConfig & RippleGlobalOptions;
     get rippleDisabled(): boolean;
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<_MatTabLinkBase, never, never, { "active": "active"; }, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<_MatTabLinkBase, never, never, { "active": "active"; "id": "id"; }, {}, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<_MatTabLinkBase, [null, null, { optional: true; }, { attribute: "tabindex"; }, null, { optional: true; }]>;
 }
@@ -425,18 +430,30 @@ export abstract class _MatTabNavBase extends MatPaginatedTabHeader implements Af
     set disableRipple(value: any);
     abstract _items: QueryList<MatPaginatedTabHeaderItem & {
         active: boolean;
+        id: string;
     }>;
     // (undocumented)
     protected _itemSelected(): void;
     // (undocumented)
     ngAfterContentInit(): void;
+    panel?: MatTabNavPanel;
     updateActiveLink(): void;
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<_MatTabNavBase, never, never, { "backgroundColor": "backgroundColor"; "disableRipple": "disableRipple"; "color": "color"; }, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<_MatTabNavBase, never, never, { "backgroundColor": "backgroundColor"; "disableRipple": "disableRipple"; "color": "color"; "panel": "panel"; }, {}, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<_MatTabNavBase, [null, { optional: true; }, null, null, null, null, { optional: true; }]>;
 }
 
+// @public
+export class MatTabNavPanel {
+    _activeTabId?: string;
+    id: string;
+    // (undocumented)
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatTabNavPanel, "mat-tab-nav-panel", ["matTabNavPanel"], { "id": "id"; }, {}, never, ["*"]>;
+    // (undocumented)
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatTabNavPanel, never>;
+}
+
 // @public
 export const matTabsAnimations: {
     readonly translateTab: AnimationTriggerMetadata;
@@ -458,7 +475,7 @@ export class MatTabsModule {
     // (undocumented)
     static ɵinj: i0.ɵɵInjectorDeclaration<MatTabsModule>;
     // (undocumented)
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MatTabsModule, [typeof i1.MatTabGroup, typeof i2.MatTabLabel, typeof i3.MatTab, typeof i4.MatInkBar, typeof i5.MatTabLabelWrapper, typeof i6.MatTabNav, typeof i6.MatTabLink, typeof i7.MatTabBody, typeof i7.MatTabBodyPortal, typeof i8.MatTabHeader, typeof i9.MatTabContent], [typeof i10.CommonModule, typeof i11.MatCommonModule, typeof i12.PortalModule, typeof i11.MatRippleModule, typeof i13.ObserversModule, typeof i14.A11yModule], [typeof i11.MatCommonModule, typeof i1.MatTabGroup, typeof i2.MatTabLabel, typeof i3.MatTab, typeof i6.MatTabNav, typeof i6.MatTabLink, typeof i9.MatTabContent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MatTabsModule, [typeof i1.MatTabGroup, typeof i2.MatTabLabel, typeof i3.MatTab, typeof i4.MatInkBar, typeof i5.MatTabLabelWrapper, typeof i6.MatTabNav, typeof i6.MatTabNavPanel, typeof i6.MatTabLink, typeof i7.MatTabBody, typeof i7.MatTabBodyPortal, typeof i8.MatTabHeader, typeof i9.MatTabContent], [typeof i10.CommonModule, typeof i11.MatCommonModule, typeof i12.PortalModule, typeof i11.MatRippleModule, typeof i13.ObserversModule, typeof i14.A11yModule], [typeof i11.MatCommonModule, typeof i1.MatTabGroup, typeof i2.MatTabLabel, typeof i3.MatTab, typeof i6.MatTabNav, typeof i6.MatTabNavPanel, typeof i6.MatTabLink, typeof i9.MatTabContent]>;
 }
 
 // @public