fix(tabs): tab position and amount of tabs not being read out by screen reader (#11694)

Fixes some screenreader/browser combinations not reading out the amount of tabs and the index of the current tab.

Fixes #11369.

Author: crisbeto

src/lib/tabs/tab-group.html

@@ -7,6 +7,8 @@
        *ngFor="let tab of _tabs; let i = index"
        [id]="_getTabLabelId(i)"
        [attr.tabIndex]="_getTabIndex(tab, i)"
+       [attr.aria-posinset]="i + 1"
+       [attr.aria-setsize]="_tabs.length"
        [attr.aria-controls]="_getTabContentId(i)"
        [attr.aria-selected]="selectedIndex == i"
        [class.mat-tab-label-active]="selectedIndex == i"

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

@@ -221,6 +221,16 @@ describe('MatTabGroup', () => {
 
       expect(fixture.componentInstance.animationDone).toHaveBeenCalled();
     }));
+
+    it('should add the proper `aria-setsize` and `aria-posinset`', () => {
+      fixture.detectChanges();
+
+      const labels = Array.from(element.querySelectorAll('.mat-tab-label'));
+
+      expect(labels.map(label => label.getAttribute('aria-posinset'))).toEqual(['1', '2', '3']);
+      expect(labels.every(label => label.getAttribute('aria-setsize') === '3')).toBe(true);
+    });
+
   });
 
   describe('disable tabs', () => {