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

Author: adolgachev

goldens/aria/accordion/index.api.md

@@ -43,11 +43,14 @@ export class AccordionPanel {
     readonly element: HTMLElement;
     expand(): void;
     readonly id: _angular_core.InputSignal<string>;
+    readonly label: _angular_core.InputSignal<string | undefined>;
+    readonly _labelControl: LabelControl;
+    readonly labelledBy: _angular_core.InputSignal<string[]>;
     _pattern?: AccordionTriggerPattern;
     toggle(): void;
     readonly visible: _angular_core.Signal<boolean>;
     // (undocumented)
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AccordionPanel, "[ngAccordionPanel]", ["ngAccordionPanel"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof DeferredContentAware; inputs: { "preserveContent": "preserveContent"; }; outputs: {}; }]>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AccordionPanel, "[ngAccordionPanel]", ["ngAccordionPanel"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelledBy": { "alias": "labelledBy"; "required": false; "isSignal": true; }; }, {}, never, never, true, [{ directive: typeof DeferredContentAware; inputs: { "preserveContent": "preserveContent"; }; outputs: {}; }]>;
     // (undocumented)
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AccordionPanel, never>;
 }

src/aria/accordion/accordion-panel.ts

@@ -8,7 +8,7 @@
 
 import {Directive, ElementRef, afterRenderEffect, computed, inject, input} from '@angular/core';
 import {_IdGenerator} from '@angular/cdk/a11y';
-import {DeferredContentAware, AccordionTriggerPattern} from '../private';
+import {AccordionTriggerPattern, DeferredContentAware, LabelControl} from '../private';
 
 /**
  * The content panel of an accordion item that is conditionally visible.
@@ -43,7 +43,8 @@ import {DeferredContentAware, AccordionTriggerPattern} from '../private';
   host: {
     'role': 'region',
     '[attr.id]': 'id()',
-    '[attr.aria-labelledby]': '_pattern?.id()',
+    '[attr.aria-label]': '_labelControl.label()',
+    '[attr.aria-labelledby]': '_labelControl.labelledBy()',
     '[attr.inert]': '!visible() ? true : null',
   },
 })
@@ -57,9 +58,18 @@ export class AccordionPanel {
   /** The DeferredContentAware host directive. */
   private readonly _deferredContentAware = inject(DeferredContentAware);
 
+  /** Controls label for this tabpanel. */
+  readonly _labelControl: LabelControl;
+
   /** A global unique identifier for the panel. */
   readonly id = input(inject(_IdGenerator).getId('ng-accordion-panel-', 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[]>([]);
+
   /** Whether the accordion panel is visible. True if the associated trigger is expanded. */
   readonly visible = computed(() => this._pattern?.expanded() === true);
 
@@ -71,6 +81,12 @@ export class AccordionPanel {
   _pattern?: AccordionTriggerPattern;
 
   constructor() {
+    this._labelControl = new LabelControl({
+      defaultLabelledBy: computed(() => this._pattern!.id()),
+      label: this.label,
+      labelledBy: this.labelledBy,
+    });
+
     // Connect the panel's hidden state to the DeferredContentAware's visibility.
     afterRenderEffect({
       write: () => {