fix(cdk-experimental/tabs): add default aria-labelledby to tab panel

Author: ok7sai

src/cdk-experimental/tabs/tabs.spec.ts

@@ -234,6 +234,12 @@ describe('CdkTabs', () => {
         expect(tabPanelElements[2].getAttribute('tabindex')).toBe('-1');
       });
 
+      it('should have aria-labelledby pointing to its tab id', () => {
+        expect(tabPanelElements[0].getAttribute('aria-labelledby')).toBe(tabElements[0].id);
+        expect(tabPanelElements[1].getAttribute('aria-labelledby')).toBe(tabElements[1].id);
+        expect(tabPanelElements[2].getAttribute('aria-labelledby')).toBe(tabElements[2].id);
+      });
+
       it('should have inert attribute when hidden and not when visible', () => {
         updateTabs({selectedTab: 'tab1'});
         expect(tabPanelElements[0].hasAttribute('inert')).toBe(false);

src/cdk-experimental/tabs/tabs.ts

@@ -292,6 +292,7 @@ export class CdkTab implements HasElement, OnInit, OnDestroy {
     '[attr.id]': 'pattern.id()',
     '[attr.tabindex]': 'pattern.tabindex()',
     '[attr.inert]': 'pattern.hidden() ? true : null',
+    '[attr.aria-labelledby]': 'tab()?.id()',
   },
   hostDirectives: [
     {