feat(aria/tabs): add label inputs coordinated by LabelControl

Author: adolgachev

goldens/aria/tabs/index.api.md

@@ -75,6 +75,9 @@ export class TabPanel implements OnInit, OnDestroy {
     constructor();
     readonly element: HTMLElement;
     readonly id: _angular_core.InputSignal<string>;
+    readonly label: _angular_core.InputSignal<string | undefined>;
+    readonly _labelControl: LabelControl;
+    readonly labelledBy: _angular_core.InputSignal<string[]>;
     // (undocumented)
     ngOnDestroy(): void;
     // (undocumented)
@@ -84,7 +87,7 @@ export class TabPanel implements OnInit, OnDestroy {
     readonly value: _angular_core.InputSignal<string>;
     readonly visible: _angular_core.Signal<boolean>;
     // (undocumented)
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TabPanel, "[ngTabPanel]", ["ngTabPanel"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof DeferredContentAware; inputs: { "preserveContent": "preserveContent"; }; outputs: {}; }]>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TabPanel, "[ngTabPanel]", ["ngTabPanel"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelledBy": { "alias": "labelledBy"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof DeferredContentAware; inputs: { "preserveContent": "preserveContent"; }; outputs: {}; }]>;
     // (undocumented)
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabPanel, never>;
 }

src/aria/tabs/tab-panel.ts

@@ -19,7 +19,7 @@ import {
   input,
   signal,
 } from '@angular/core';
-import {TabPattern, TabPanelPattern, DeferredContentAware} from '../private';
+import {DeferredContentAware, LabelControl, TabPattern, TabPanelPattern} from '../private';
 import {TABS} from './tab-tokens';
 
 /**
@@ -49,7 +49,8 @@ import {TABS} from './tab-tokens';
     '[attr.id]': '_pattern.id()',
     '[attr.tabindex]': '_pattern.tabIndex()',
     '[attr.inert]': '!visible() ? true : null',
-    '[attr.aria-labelledby]': '_pattern.labelledBy()',
+    '[attr.aria-label]': '_labelControl.label()',
+    '[attr.aria-labelledby]': '_labelControl.labelledBy()',
   },
   hostDirectives: [
     {
@@ -71,9 +72,18 @@ export class TabPanel implements OnInit, OnDestroy {
   /** The parent Tabs. */
   private readonly _tabs = inject(TABS);
 
+  /** Controls label for this tabpanel. */
+  readonly _labelControl: LabelControl;
+
   /** A global unique identifier for the tab. */
   readonly id = input(inject(_IdGenerator).getId('ng-tabpanel-', true));
 
+  /** The (optional) label for the accordion panel. */
+  readonly label = input<string | undefined>(undefined);
+
+  /** The (optional) labelledBy ids for the accordion panel. */
+  readonly labelledBy = input<string[]>([]);
+
   /** The Tab UIPattern associated with the tabpanel */
   readonly _tabPattern: WritableSignal<TabPattern | undefined> = signal(undefined);
 
@@ -90,6 +100,12 @@ export class TabPanel implements OnInit, OnDestroy {
   });
 
   constructor() {
+    this._labelControl = new LabelControl({
+      defaultLabelledBy: computed(() => this._pattern!.labelledBy()),
+      label: this.label,
+      labelledBy: this.labelledBy,
+    });
+
     afterRenderEffect({
       write: () => {
         this._deferredContentAware.contentVisible.set(this.visible());