Issue is most likely related to how ARIA attributes interact with focus managment in nested accordions. when expanding accordion or collapsing focus can inadvertenly move to a descendant and cause parent to interpret this as a collapse.
there are few ways of handling this, not sure what is your use case but you can try at least to use any of these methods to suit your needs
import { Component, ElementRef, ViewChild } from '@angular/core';
@Component({
selector: 'app-accordion',
template: `
<button #accordionHeader (click)="toggleAccordion()">Accordion Header</button>
@if (isExpanded) {
<div role="region">
<p>Content here...</p>
</div>
}
`,
})
export class AccordionComponent {
@ViewChild('accordionHeader') accordionHeader!: ElementRef<HTMLButtonElement>;
isExpanded = false;
toggleAccordion() {
this.isExpanded = !this.isExpanded;
this.accordionHeader.nativeElement.focus();
}
}
<button
(click)="toggleAccordion()"
[attr.aria-expanded]="isExpanded"
aria-controls="panel"
>
Accordion Header
</button>
<div id="panel" [attr.aria-hidden]="!isExpanded" *ngIf="isExpanded">
<p>Content...</p>
</div>
these two solutions won't be accurate as you did not provide any code what so ever so either you could provide us some code to look at or try these two and leave a comment which of them helped you out.