fix(tabs): unable to tab to tab content

src/material/tabs/tab-group.html

@@ -40,6 +40,7 @@
                *ngFor="let tab of _tabs; let i = index"
                [id]="_getTabContentId(i)"
                [attr.aria-labelledby]="_getTabLabelId(i)"
+               [attr.tabindex]="selectedIndex === i ? 0 : null"
                [class.mat-tab-body-active]="selectedIndex == i"
                [content]="tab.content!"
                [position]="tab.position!"

src/material/tabs/tab-group.scss

@@ -50,6 +50,7 @@
   @include mat-fill;
   display: block;
   overflow: hidden;
+  outline: 0;
 
   // Fix for auto content wrapping in IE11
   flex-basis: 100%;

src/material/tabs/tab-group.spec.ts

@@ -298,6 +298,27 @@ describe('MatTabGroup', () => {
       expect(tabLabelNativeElements.every(el => el.classList.contains('mat-focus-indicator')))
         .toBe(true);
     });
+
+    it('should set the correct tabindex on the tab content elements', fakeAsync(() => {
+      fixture.detectChanges();
+      tick();
+
+      const contentElements: NodeListOf<HTMLElement> =
+          fixture.nativeElement.querySelectorAll('.mat-tab-body');
+
+      expect(contentElements[0].hasAttribute('tabindex')).toBe(false);
+      expect(contentElements[1].getAttribute('tabindex')).toBe('0');
+      expect(contentElements[2].hasAttribute('tabindex')).toBe(false);
+
+      fixture.componentInstance.selectedIndex = 2;
+      fixture.detectChanges();
+      tick();
+
+      expect(contentElements[0].hasAttribute('tabindex')).toBe(false);
+      expect(contentElements[1].hasAttribute('tabindex')).toBe(false);
+      expect(contentElements[2].getAttribute('tabindex')).toBe('0');
+    }));
+
   });
 
   describe('aria labelling', () => {