feat/bug(aria/accordion): custom trigger click #33810

@Component({
  selector: '[myTrigger]',
  hostDirectives: [
    {
      directive: AccordionTrigger,
      inputs: ['panel', 'disabled', 'expanded'],
      outputs: ['expandedChange'],
    },
  ],
  // uncomment to make it working
  // host: { ngAccordionTrigger: '' },
  template: ` <ng-content /> `,
  styles: `
    :host {
      font-size: 16px;
    }
  `,
})
export class MyTrigger {}

@Component({
  selector: 'CustomAccordion',
  imports: [
    NgTemplateOutlet,
    AccordionGroup,
    AccordionTrigger,
    AccordionPanel,
    AccordionContent,
  ],
  template: `
    <div ngAccordionGroup [multiExpandable]="false">
      @if (trigger()) {
        <ng-container
          [ngTemplateOutlet]="trigger()"
          [ngTemplateOutletContext]="{
            panel: panel,
            expanded: expanded(),
            expandedChange: () => expanded.update(v=> !v),
            disabled: disabled(),
          }"
          [ngTemplateOutletInjector]="'outlet'" />
      } @else {
        <button 
          ngAccordionTrigger 
          [panel]="panel" 
          [(expanded)]="expanded">
          Click works! ✅
        <span>Text inside span: working ✅</span>
        </button>
      }
      <div ngAccordionPanel #panel="ngAccordionPanel">
        <ng-template ngAccordionContent>
          Content  
        </ng-template>
      </div>
    </div>
  `,
})
export class CustomAccordion {
  readonly disabled = model(false);
  readonly expanded = model(false);
  readonly trigger = input<TemplateRef<unknown> | undefined>(undefined);
}

@Component({
  selector: 'Consumer',
  imports: [MyTrigger, CustomAccordion],
  template: `
    <CustomAccordion />
    <hr />
    <CustomAccordion [trigger]="customTrigger" />

    <ng-template
      #customTrigger
      let-panel="panel"
      let-disabled="disabled"
      let-expanded="expanded"
      let-expandedChange="expandedChange">

      <button
        myTrigger
        class="trigger"
        [panel]="panel"
        [disabled]="disabled"
        [expanded]="expanded"
        (expandedChange)="expandedChange()">
        Click works! ✅
        <span>Text inside span: not working ❌</span>
      </button>
    </ng-template>
  `,
  styles: `
    .trigger {
      color: red;
    }
  `,
})
export class Consumer {}