fix(tabs): enable keyboard wrapping and mark disabled tabs

* According to [the a11y guidelines](https://www.w3.org/TR/wai-aria-practices-1.1/#tabpanel), the tab arrow keys should wrap when they reach the end of the list. These changes enable wrapping.
* Adds `aria-disabled` to disabled tabs.

Author: crisbeto

e2e/components/tabs-e2e.spec.ts

@@ -11,13 +11,11 @@ import {pressKeys} from '../util/index';
 
 describe('tabs', () => {
   describe('basic behavior', () => {
-    let tabGroup: ElementFinder;
     let tabLabels: ElementArrayFinder;
     let tabBodies: ElementArrayFinder;
 
     beforeEach(() => {
       browser.get('/tabs');
-      tabGroup = element(by.css('mat-tab-group'));
       tabLabels = element.all(by.css('.mat-tab-label'));
       tabBodies = element.all(by.css('mat-tab-body'));
     });
@@ -51,17 +49,11 @@ describe('tabs', () => {
       pressKeys(right);
       expect(await getFocusStates(tabLabels)).toEqual([false, false, true]);
 
-      pressKeys(right);
-      expect(await getFocusStates(tabLabels)).toEqual([false, false, true]);
-
       pressKeys(left);
       expect(await getFocusStates(tabLabels)).toEqual([false, true, false]);
 
       pressKeys(left);
       expect(await getFocusStates(tabLabels)).toEqual([true, false, false]);
-
-      pressKeys(left);
-      expect(await getFocusStates(tabLabels)).toEqual([true, false, false]);
     });
   });
 });

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

@@ -284,6 +284,7 @@ describe('MatTabGroup', () => {
       fixture.detectChanges();
       const labels = fixture.debugElement.queryAll(By.css('.mat-tab-disabled'));
       expect(labels.length).toBe(1);
+      expect(labels[0].nativeElement.getAttribute('aria-disabled')).toBe('true');
     });
 
     it('should set the disabled flag on tab', () => {
@@ -293,13 +294,16 @@ describe('MatTabGroup', () => {
       let labels = fixture.debugElement.queryAll(By.css('.mat-tab-disabled'));
       expect(tabs[2].disabled).toBe(false);
       expect(labels.length).toBe(1);
+      expect(labels[0].nativeElement.getAttribute('aria-disabled')).toBe('true');
 
       fixture.componentInstance.isDisabled = true;
       fixture.detectChanges();
 
       expect(tabs[2].disabled).toBe(true);
       labels = fixture.debugElement.queryAll(By.css('.mat-tab-disabled'));
       expect(labels.length).toBe(2);
+      expect(labels.every(label => label.nativeElement.getAttribute('aria-disabled') === 'true'))
+          .toBe(true);
     });
   });
 

src/lib/tabs/tab-header.ts

@@ -198,7 +198,8 @@ export class MatTabHeader extends _MatTabHeaderMixinBase
     };
 
     this._keyManager = new FocusKeyManager(this._labelWrappers)
-      .withHorizontalOrientation(this._getLayoutDirection());
+      .withHorizontalOrientation(this._getLayoutDirection())
+      .withWrap();
 
     this._keyManager.updateActiveItemIndex(0);
 

src/lib/tabs/tab-label-wrapper.ts

@@ -22,7 +22,8 @@ export const _MatTabLabelWrapperMixinBase = mixinDisabled(MatTabLabelWrapperBase
   selector: '[matTabLabelWrapper]',
   inputs: ['disabled'],
   host: {
-    '[class.mat-tab-disabled]': 'disabled'
+    '[class.mat-tab-disabled]': 'disabled',
+    '[attr.aria-disabled]': '!!disabled',
   }
 })
 export class MatTabLabelWrapper extends _MatTabLabelWrapperMixinBase implements CanDisable {