fix(tabs): update mat-tab-link to set aria-selected when active

mat-tab-header already does this:
https://github.com/angular/material2/blob/abc3d38c57146443c848d5ba26fd2fab8ca185d6/src/lib/tabs/tab-group.html#L11

And you can see aria-selected is being set properly on the main tabs demo page
https://material.angular.io/components/tabs/overview.

But mat-tab-nav-bar (on the same page, but no live demo) doesn't set aria-selected at all.

Author: stevenyxu

src/lib/tabs/tab-nav-bar/tab-nav-bar.spec.ts

@@ -66,7 +66,23 @@ describe('MatTabNavBar', () => {
       fixture.detectChanges();
       expect(tabLinkElements[0].classList.contains('mat-tab-label-active')).toBeFalsy();
       expect(tabLinkElements[1].classList.contains('mat-tab-label-active')).toBeTruthy();
+    });
+
+    it('should toggle aria-selected based on active state', () => {
+      let tabLink1 = fixture.debugElement.queryAll(By.css('a'))[0];
+      let tabLink2 = fixture.debugElement.queryAll(By.css('a'))[1];
+      const tabLinkElements = fixture.debugElement.queryAll(By.css('a'))
+        .map(tabLinkDebugEl => tabLinkDebugEl.nativeElement);
 
+      tabLink1.nativeElement.click();
+      fixture.detectChanges();
+      expect(tabLinkElements[0].getAttribute('aria-selected')).toEqual('true');
+      expect(tabLinkElements[1].getAttribute('aria-selected')).toEqual('false');
+
+      tabLink2.nativeElement.click();
+      fixture.detectChanges();
+      expect(tabLinkElements[0].getAttribute('aria-selected')).toEqual('false');
+      expect(tabLinkElements[1].getAttribute('aria-selected')).toEqual('true');
     });
 
     it('should add the disabled class if disabled', () => {

src/lib/tabs/tab-nav-bar/tab-nav-bar.ts

@@ -173,6 +173,7 @@ export const _MatTabLinkMixinBase =
   host: {
     'class': 'mat-tab-link',
     '[attr.aria-disabled]': 'disabled.toString()',
+    '[attr.aria-selected]': 'active',
     '[attr.tabIndex]': 'tabIndex',
     '[class.mat-tab-disabled]': 'disabled',
     '[class.mat-tab-label-active]': 'active',