Skip to content

fix(aria/accordion): rename value to panelId for trigger and panel #32295

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
andrewseguin merged 3 commits into from
Nov 12, 2025
Merged

fix(aria/accordion): rename value to panelId for trigger and panel #32295

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4f3baad
fix(aria/accordion): rename value to panelId for trigger and panel
andrewseguin Nov 10, 2025
1f913af
refactor: fix tests
andrewseguin Nov 11, 2025
a4b5bb1
refactor: fix tests
andrewseguin Nov 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 10 additions & 10 deletions src/aria/accordion/accordion.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,8 +57,8 @@ export class AccordionPanel {
/** A global unique identifier for the panel. */
private readonly _id = inject(_IdGenerator).getId('accordion-trigger-', true);

/** A local unique identifier for the panel, used to match with its trigger's value. */
value = input.required<string>();
/** A local unique identifier for the panel, used to match with its trigger's `panelId`. */
panelId = input.required<string>();

/** The parent accordion trigger pattern that controls this panel. This is set by AccordionGroup. */
readonly accordionTrigger: WritableSignal<AccordionTriggerPattern | undefined> =
Expand All @@ -67,7 +67,7 @@ export class AccordionPanel {
/** The UI pattern instance for this panel. */
readonly _pattern: AccordionPanelPattern = new AccordionPanelPattern({
id: () => this._id,
value: this.value,
panelId: this.panelId,
accordionTrigger: () => this.accordionTrigger(),
});

Expand Down Expand Up @@ -111,8 +111,8 @@ export class AccordionTrigger {
/** The parent AccordionGroup. */
private readonly _accordionGroup = inject(AccordionGroup);

/** A local unique identifier for the trigger, used to match with its panel's value. */
value = input.required<string>();
/** A local unique identifier for the trigger, used to match with its panel's `panelId`. */
panelId = input.required<string>();

/** Whether the trigger is disabled. */
disabled = input(false, {transform: booleanAttribute});
Expand All @@ -130,7 +130,7 @@ export class AccordionTrigger {
/** The UI pattern instance for this trigger. */
readonly _pattern: AccordionTriggerPattern = new AccordionTriggerPattern({
id: () => this._id,
value: this.value,
panelId: this.panelId,
disabled: this.disabled,
element: () => this._elementRef.nativeElement,
accordionGroup: computed(() => this._accordionGroup._pattern),
Expand Down Expand Up @@ -168,8 +168,8 @@ export class AccordionGroup {
/** Whether multiple accordion items can be expanded simultaneously. */
multiExpandable = input(true, {transform: booleanAttribute});

/** The values of the current selected/expanded accordions. */
value = model<string[]>([]);
/** The ids of the current expanded accordion panels. */
expandedPanels = model<string[]>([]);

/** Whether to allow disabled items to receive focus. */
softDisabled = input(true, {transform: booleanAttribute});
Expand All @@ -184,7 +184,7 @@ export class AccordionGroup {
// `setDefaultState` in the CDK.
activeItem: signal(undefined),
items: computed(() => this._triggers().map(trigger => trigger._pattern)),
expandedIds: this.value,
expandedIds: this.expandedPanels,
// TODO(ok7sai): Investigate whether an accordion should support horizontal mode.
orientation: () => 'vertical',
element: () => this._elementRef.nativeElement,
Expand All @@ -197,7 +197,7 @@ export class AccordionGroup {
const panels = this._panels();

for (const trigger of triggers) {
const panel = panels.find(p => p.value() === trigger.value());
const panel = panels.find(p => p.panelId() === trigger.panelId());
trigger.accordionPanel.set(panel?._pattern);
if (panel) {
panel.accordionTrigger.set(trigger._pattern);
Expand Down
14 changes: 7 additions & 7 deletions src/aria/private/accordion/accordion.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,8 +72,8 @@ export class AccordionGroupPattern {
/** Inputs for the AccordionTriggerPattern. */
export type AccordionTriggerInputs = Omit<ListNavigationItem & ListFocusItem, 'index'> &
Omit<ExpansionItem, 'expansionId' | 'expandable'> & {
/** A local unique identifier for the trigger. */
value: SignalLike<string>;
/** A local unique identifier for the trigger's corresponding panel. */
panelId: SignalLike<string>;

/** The parent accordion group that controls this trigger. */
accordionGroup: SignalLike<AccordionGroupPattern>;
Expand Down Expand Up @@ -115,10 +115,10 @@ export class AccordionTriggerPattern {
constructor(readonly inputs: AccordionTriggerInputs) {
this.id = inputs.id;
this.element = inputs.element;
this.value = inputs.value;
this.panelId = inputs.panelId;
this.expansionControl = new ExpansionControl({
...inputs,
expansionId: inputs.value,
expansionId: inputs.panelId,
expandable: () => true,
expansionManager: inputs.accordionGroup().expansionManager,
});
Expand Down Expand Up @@ -203,8 +203,8 @@ export interface AccordionPanelInputs {
/** A global unique identifier for the panel. */
id: SignalLike<string>;

/** A local unique identifier for the panel, matching its trigger's value. */
value: SignalLike<string>;
/** A local unique identifier for the panel, matching its trigger's panelId. */
panelId: SignalLike<string>;

/** The parent accordion trigger that controls this panel. */
accordionTrigger: SignalLike<AccordionTriggerPattern | undefined>;
Expand All @@ -218,7 +218,7 @@ export class AccordionPanelPattern {

constructor(readonly inputs: AccordionPanelInputs) {
this.id = inputs.id;
this.value = inputs.value;
this.panelId = inputs.panelId;
this.accordionTrigger = inputs.accordionTrigger;
this.hidden = computed(() => inputs.accordionTrigger()?.expanded() === false);
}
Expand Down
22 changes: 11 additions & 11 deletions ...onents-examples/aria/accordion/accordion-configurable/accordion-configurable-example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,16 +21,16 @@
[disabled]="disabled.value"
[softDisabled]="softDisabled.value"
[wrap]="wrap.value"
[(value)]="expandedIds"
[(expandedPanels)]="expandedIds"
>
<div class="example-accordion">
<h3 class="example-accordion-header">
<button ngAccordionTrigger class="example-accordion-trigger" value="item1">
<button ngAccordionTrigger class="example-accordion-trigger" panelId="item1">
Item 1 Trigger
<mat-icon aria-hidden="true">{{expansionIcon('item1')()}}</mat-icon>
</button>
</h3>
<div ngAccordionPanel value="item1" class="example-accordion-panel">
<div ngAccordionPanel panelId="item1" class="example-accordion-panel">
<ng-template ngAccordionContent>
<p>This is the content for Item 1.</p>
<button>Focusable Button</button>
Expand All @@ -40,12 +40,12 @@ <h3 class="example-accordion-header">

<div class="example-accordion">
<h3 class="example-accordion-header">
<button ngAccordionTrigger class="example-accordion-trigger" value="item2" disabled>
<button ngAccordionTrigger class="example-accordion-trigger" panelId="item2" disabled>
Item 2 Trigger (disabled)
<mat-icon aria-hidden="true">{{expansionIcon('item2')()}}</mat-icon>
</button>
</h3>
<div ngAccordionPanel value="item2" class="example-accordion-panel">
<div ngAccordionPanel panelId="item2" class="example-accordion-panel">
<ng-template ngAccordionContent>
<p>This is the content for Item 2.</p>
<label>Input inside panel: <input type="text" /></label>
Expand All @@ -55,12 +55,12 @@ <h3 class="example-accordion-header">

<div class="example-accordion">
<h3 class="example-accordion-header">
<button ngAccordionTrigger class="example-accordion-trigger" value="item3">
<button ngAccordionTrigger class="example-accordion-trigger" panelId="item3">
Item 3 Trigger
<mat-icon aria-hidden="true">{{expansionIcon('item3')()}}</mat-icon>
</button>
</h3>
<div ngAccordionPanel value="item3" class="example-accordion-panel">
<div ngAccordionPanel panelId="item3" class="example-accordion-panel">
<ng-template ngAccordionContent>
<p>This is the content for Item 3.</p>
</ng-template>
Expand All @@ -69,12 +69,12 @@ <h3 class="example-accordion-header">

<div class="example-accordion">
<h3 class="example-accordion-header">
<button ngAccordionTrigger class="example-accordion-trigger" value="item4">
<button ngAccordionTrigger class="example-accordion-trigger" panelId="item4">
Item 4 Trigger
<mat-icon aria-hidden="true">{{expansionIcon('item4')()}}</mat-icon>
</button>
</h3>
<div ngAccordionPanel value="item4" class="example-accordion-panel">
<div ngAccordionPanel panelId="item4" class="example-accordion-panel">
<ng-template ngAccordionContent>
<p>This is the content for Item 4</p>
</ng-template>
Expand All @@ -83,12 +83,12 @@ <h3 class="example-accordion-header">

<div class="example-accordion">
<h3 class="example-accordion-header">
<button ngAccordionTrigger class="example-accordion-trigger" value="item5">
<button ngAccordionTrigger class="example-accordion-trigger" panelId="item5">
Item 5 Trigger
<mat-icon aria-hidden="true">{{expansionIcon('item5')()}}</mat-icon>
</button>
</h3>
<div ngAccordionPanel value="item5" class="example-accordion-panel">
<div ngAccordionPanel panelId="item5" class="example-accordion-panel">
<ng-template ngAccordionContent>
<p>This is the content for Item 5</p>
</ng-template>
Expand Down
22 changes: 11 additions & 11 deletions ...les/aria/accordion/accordion-disabled-focusable/accordion-disabled-focusable-example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,16 @@
class="example-accordion-group"
[multiExpandable]="true"
[softDisabled]="true"
[(value)]="expandedIds"
[(expandedPanels)]="expandedIds"
>
<div class="example-accordion">
<h3 class="example-accordion-header">
<button ngAccordionTrigger class="example-accordion-trigger" value="item1">
<button ngAccordionTrigger class="example-accordion-trigger" panelId="item1">
Item 1 Trigger
<mat-icon aria-hidden="true">{{expansionIcon('item1')()}}</mat-icon>
</button>
</h3>
<div ngAccordionPanel value="item1" class="example-accordion-panel">
<div ngAccordionPanel panelId="item1" class="example-accordion-panel">
<ng-template ngAccordionContent>
<p>This is the content for Item 1.</p>
</ng-template>
Expand All @@ -21,12 +21,12 @@ <h3 class="example-accordion-header">

<div class="example-accordion">
<h3 class="example-accordion-header">
<button ngAccordionTrigger class="example-accordion-trigger" value="item2" disabled>
<button ngAccordionTrigger class="example-accordion-trigger" panelId="item2" disabled>
Item 2 Trigger (disabled)
<mat-icon aria-hidden="true">{{expansionIcon('item2')()}}</mat-icon>
</button>
</h3>
<div ngAccordionPanel value="item2" class="example-accordion-panel">
<div ngAccordionPanel panelId="item2" class="example-accordion-panel">
<ng-template ngAccordionContent>
<p>This is the content for Item 2. This should not be expandable if trigger is disabled.</p>
</ng-template>
Expand All @@ -35,12 +35,12 @@ <h3 class="example-accordion-header">

<div class="example-accordion">
<h3 class="example-accordion-header">
<button ngAccordionTrigger class="example-accordion-trigger" value="item3">
<button ngAccordionTrigger class="example-accordion-trigger" panelId="item3">
Item 3 Trigger
<mat-icon aria-hidden="true">{{expansionIcon('item3')()}}</mat-icon>
</button>
</h3>
<div ngAccordionPanel value="item3" class="example-accordion-panel">
<div ngAccordionPanel panelId="item3" class="example-accordion-panel">
<ng-template ngAccordionContent>
<p>This is the content for Item 3.</p>
</ng-template>
Expand All @@ -49,12 +49,12 @@ <h3 class="example-accordion-header">

<div class="example-accordion">
<h3 class="example-accordion-header">
<button ngAccordionTrigger class="example-accordion-trigger" value="item4">
<button ngAccordionTrigger class="example-accordion-trigger" panelId="item4">
Item 4 Trigger
<mat-icon aria-hidden="true">{{expansionIcon('item4')()}}</mat-icon>
</button>
</h3>
<div ngAccordionPanel value="item4" class="example-accordion-panel">
<div ngAccordionPanel panelId="item4" class="example-accordion-panel">
<ng-template ngAccordionContent>
<p>This is the content for Item 4</p>
</ng-template>
Expand All @@ -63,12 +63,12 @@ <h3 class="example-accordion-header">

<div class="example-accordion">
<h3 class="example-accordion-header">
<button ngAccordionTrigger class="example-accordion-trigger" value="item5">
<button ngAccordionTrigger class="example-accordion-trigger" panelId="item5">
Item 5 Trigger
<mat-icon aria-hidden="true">{{expansionIcon('item5')()}}</mat-icon>
</button>
</h3>
<div ngAccordionPanel value="item5" class="example-accordion-panel">
<div ngAccordionPanel panelId="item5" class="example-accordion-panel">
<ng-template ngAccordionContent>
<p>This is the content for Item 5</p>
</ng-template>
Expand Down
22 changes: 11 additions & 11 deletions ...xamples/aria/accordion/accordion-disabled-skipped/accordion-disabled-skipped-example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,16 @@
class="example-accordion-group"
[multiExpandable]="true"
[softDisabled]="false"
[(value)]="expandedIds"
[(expandedPanels)]="expandedIds"
>
<div class="example-accordion">
<h3 class="example-accordion-header">
<button ngAccordionTrigger class="example-accordion-trigger" value="item1">
<button ngAccordionTrigger class="example-accordion-trigger" panelId="item1">
Item 1 Trigger
<mat-icon aria-hidden="true">{{expansionIcon('item1')()}}</mat-icon>
</button>
</h3>
<div ngAccordionPanel value="item1" class="example-accordion-panel">
<div ngAccordionPanel panelId="item1" class="example-accordion-panel">
<ng-template ngAccordionContent>
<p>This is the content for Item 1.</p>
</ng-template>
Expand All @@ -21,12 +21,12 @@ <h3 class="example-accordion-header">

<div class="example-accordion">
<h3 class="example-accordion-header">
<button ngAccordionTrigger class="example-accordion-trigger" value="item2" disabled>
<button ngAccordionTrigger class="example-accordion-trigger" panelId="item2" disabled>
Item 2 Trigger (disabled)
<mat-icon aria-hidden="true">{{expansionIcon('item2')()}}</mat-icon>
</button>
</h3>
<div ngAccordionPanel value="item2" class="example-accordion-panel">
<div ngAccordionPanel panelId="item2" class="example-accordion-panel">
<ng-template ngAccordionContent>
<p>This is the content for Item 2. This should not be reachable or expandable.</p>
</ng-template>
Expand All @@ -35,12 +35,12 @@ <h3 class="example-accordion-header">

<div class="example-accordion">
<h3 class="example-accordion-header">
<button ngAccordionTrigger class="example-accordion-trigger" value="item3">
<button ngAccordionTrigger class="example-accordion-trigger" panelId="item3">
Item 3 Trigger
<mat-icon aria-hidden="true">{{expansionIcon('item3')()}}</mat-icon>
</button>
</h3>
<div ngAccordionPanel value="item3" class="example-accordion-panel">
<div ngAccordionPanel panelId="item3" class="example-accordion-panel">
<ng-template ngAccordionContent>
<p>This is the content for Item 3.</p>
</ng-template>
Expand All @@ -49,12 +49,12 @@ <h3 class="example-accordion-header">

<div class="example-accordion">
<h3 class="example-accordion-header">
<button ngAccordionTrigger class="example-accordion-trigger" value="item4">
<button ngAccordionTrigger class="example-accordion-trigger" panelId="item4">
Item 4 Trigger
<mat-icon aria-hidden="true">{{expansionIcon('item4')()}}</mat-icon>
</button>
</h3>
<div ngAccordionPanel value="item4" class="example-accordion-panel">
<div ngAccordionPanel panelId="item4" class="example-accordion-panel">
<ng-template ngAccordionContent>
<p>This is the content for Item 4</p>
</ng-template>
Expand All @@ -63,12 +63,12 @@ <h3 class="example-accordion-header">

<div class="example-accordion">
<h3 class="example-accordion-header">
<button ngAccordionTrigger class="example-accordion-trigger" value="item5">
<button ngAccordionTrigger class="example-accordion-trigger" panelId="item5">
Item 5 Trigger
<mat-icon aria-hidden="true">{{expansionIcon('item5')()}}</mat-icon>
</button>
</h3>
<div ngAccordionPanel value="item5" class="example-accordion-panel">
<div ngAccordionPanel panelId="item5" class="example-accordion-panel">
<ng-template ngAccordionContent>
<p>This is the content for Item 5</p>
</ng-template>
Expand Down
Loading
Loading