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

Author: crisbeto

e2e/components/tabs-e2e.spec.ts

@@ -48,17 +48,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 {