fix(tabs): unable to tab to tab content

Currently the tab's content doesn't have a `tabindex` which means that if it doesn't have any focusable elements, users with assistive technology will skip over the content completely. These changes add a `tabindex` to the content of the currently-selected tab, based on [the example of accessible tabs from the ARIA best practices](https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-2/tabs.html).

Author: crisbeto

src/material/tabs/tab-group.html

@@ -40,6 +40,7 @@
                *ngFor="let tab of _tabsArray; 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

@@ -291,6 +291,26 @@ describe('MatTabGroup', () => {
       subscription.unsubscribe();
     });
 
+    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', () => {