bug(aria/accordion): AccordionGroup fails to detect accordion panels across component boundaries #32763
Description
Is this a regression?
- Yes, this behavior used to work in the previous version
The previous version in which this bug was not present was
No response
Description
AccordionGroup is unable to discover descendant accordion panels when an accordion is wrapped inside a child component.
This issue stems from how Angular @ContentChildren queries behave. Even when configured with descendants: true, ContentChildren does not traverse component view boundaries. It only queries DOM descendants that exist within the same template where the directive is declared.
As a result, accordion panels defined inside child components are not detected by the parent AccordionGroup.
This problem is not limited to the accordion component. Other Angular ARIA components (for example, Grid) exhibit the same behavior and limitation.
Reproduction
StackBlitz link: https://stackblitz.com/edit/stackblitz-starters-vfgtdvxp?file=src%2Fchild.ts
Steps to reproduce:
- Click on the titles of each accordion.
- The first accordion works correctly because it is not wrapped in a child component.
- The second accordion does not work because it is rendered inside a child component.
Expected Behavior
Accordion, grid, and other Angular ARIA components should work across component view boundaries.
Actual Behavior
Angular view boundaries prevent Angular ARIA components from functioning correctly when their child elements are projected through nested components.
Environment
- Angular: 21.0.3
- Browser(s): Chrome
- Operating System macos