Skip to content

Commit 4f3baad

Browse files
andrewseguinandrewseguin
committed
fix(aria/accordion): rename value to panelId for trigger and panel
1 parent ea191c7 commit 4f3baad

9 files changed

Lines changed: 94 additions & 94 deletions

File tree

‎src/aria/accordion/accordion.ts‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -57,8 +57,8 @@ export class AccordionPanel {
5757
/** A global unique identifier for the panel. */
5858
private readonly _id = inject(_IdGenerator).getId('accordion-trigger-', true);
5959

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

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

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

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

117117
/** Whether the trigger is disabled. */
118118
disabled = input(false, {transform: booleanAttribute});
@@ -130,7 +130,7 @@ export class AccordionTrigger {
130130
/** The UI pattern instance for this trigger. */
131131
readonly _pattern: AccordionTriggerPattern = new AccordionTriggerPattern({
132132
id: () => this._id,
133-
value: this.value,
133+
panelId: this.panelId,
134134
disabled: this.disabled,
135135
element: () => this._elementRef.nativeElement,
136136
accordionGroup: computed(() => this._accordionGroup._pattern),
@@ -168,8 +168,8 @@ export class AccordionGroup {
168168
/** Whether multiple accordion items can be expanded simultaneously. */
169169
multiExpandable = input(true, {transform: booleanAttribute});
170170

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

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

199199
for (const trigger of triggers) {
200-
const panel = panels.find(p => p.value() === trigger.value());
200+
const panel = panels.find(p => p.panelId() === trigger.panelId());
201201
trigger.accordionPanel.set(panel?._pattern);
202202
if (panel) {
203203
panel.accordionTrigger.set(trigger._pattern);

‎src/aria/private/accordion/accordion.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -72,8 +72,8 @@ export class AccordionGroupPattern {
7272
/** Inputs for the AccordionTriggerPattern. */
7373
export type AccordionTriggerInputs = Omit<ListNavigationItem & ListFocusItem, 'index'> &
7474
Omit<ExpansionItem, 'expansionId' | 'expandable'> & {
75-
/** A local unique identifier for the trigger. */
76-
value: SignalLike<string>;
75+
/** A local unique identifier for the trigger's corresponding panel. */
76+
panelId: SignalLike<string>;
7777

7878
/** The parent accordion group that controls this trigger. */
7979
accordionGroup: SignalLike<AccordionGroupPattern>;
@@ -115,10 +115,10 @@ export class AccordionTriggerPattern {
115115
constructor(readonly inputs: AccordionTriggerInputs) {
116116
this.id = inputs.id;
117117
this.element = inputs.element;
118-
this.value = inputs.value;
118+
this.panelId = inputs.panelId;
119119
this.expansionControl = new ExpansionControl({
120120
...inputs,
121-
expansionId: inputs.value,
121+
expansionId: inputs.panelId,
122122
expandable: () => true,
123123
expansionManager: inputs.accordionGroup().expansionManager,
124124
});
@@ -203,8 +203,8 @@ export interface AccordionPanelInputs {
203203
/** A global unique identifier for the panel. */
204204
id: SignalLike<string>;
205205

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

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

219219
constructor(readonly inputs: AccordionPanelInputs) {
220220
this.id = inputs.id;
221-
this.value = inputs.value;
221+
this.panelId = inputs.panelId;
222222
this.accordionTrigger = inputs.accordionTrigger;
223223
this.hidden = computed(() => inputs.accordionTrigger()?.expanded() === false);
224224
}

‎src/components-examples/aria/accordion/accordion-configurable/accordion-configurable-example.html‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -21,16 +21,16 @@
2121
[disabled]="disabled.value"
2222
[softDisabled]="softDisabled.value"
2323
[wrap]="wrap.value"
24-
[(value)]="expandedIds"
24+
[(expandedPanels)]="expandedIds"
2525
>
2626
<div class="example-accordion">
2727
<h3 class="example-accordion-header">
28-
<button ngAccordionTrigger class="example-accordion-trigger" value="item1">
28+
<button ngAccordionTrigger class="example-accordion-trigger" panelId="item1">
2929
Item 1 Trigger
3030
<mat-icon aria-hidden="true">{{expansionIcon('item1')()}}</mat-icon>
3131
</button>
3232
</h3>
33-
<div ngAccordionPanel value="item1" class="example-accordion-panel">
33+
<div ngAccordionPanel panelId="item1" class="example-accordion-panel">
3434
<ng-template ngAccordionContent>
3535
<p>This is the content for Item 1.</p>
3636
<button>Focusable Button</button>
@@ -40,12 +40,12 @@ <h3 class="example-accordion-header">
4040

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

5656
<div class="example-accordion">
5757
<h3 class="example-accordion-header">
58-
<button ngAccordionTrigger class="example-accordion-trigger" value="item3">
58+
<button ngAccordionTrigger class="example-accordion-trigger" panelId="item3">
5959
Item 3 Trigger
6060
<mat-icon aria-hidden="true">{{expansionIcon('item3')()}}</mat-icon>
6161
</button>
6262
</h3>
63-
<div ngAccordionPanel value="item3" class="example-accordion-panel">
63+
<div ngAccordionPanel panelId="item3" class="example-accordion-panel">
6464
<ng-template ngAccordionContent>
6565
<p>This is the content for Item 3.</p>
6666
</ng-template>
@@ -69,12 +69,12 @@ <h3 class="example-accordion-header">
6969

7070
<div class="example-accordion">
7171
<h3 class="example-accordion-header">
72-
<button ngAccordionTrigger class="example-accordion-trigger" value="item4">
72+
<button ngAccordionTrigger class="example-accordion-trigger" panelId="item4">
7373
Item 4 Trigger
7474
<mat-icon aria-hidden="true">{{expansionIcon('item4')()}}</mat-icon>
7575
</button>
7676
</h3>
77-
<div ngAccordionPanel value="item4" class="example-accordion-panel">
77+
<div ngAccordionPanel panelId="item4" class="example-accordion-panel">
7878
<ng-template ngAccordionContent>
7979
<p>This is the content for Item 4</p>
8080
</ng-template>
@@ -83,12 +83,12 @@ <h3 class="example-accordion-header">
8383

8484
<div class="example-accordion">
8585
<h3 class="example-accordion-header">
86-
<button ngAccordionTrigger class="example-accordion-trigger" value="item5">
86+
<button ngAccordionTrigger class="example-accordion-trigger" panelId="item5">
8787
Item 5 Trigger
8888
<mat-icon aria-hidden="true">{{expansionIcon('item5')()}}</mat-icon>
8989
</button>
9090
</h3>
91-
<div ngAccordionPanel value="item5" class="example-accordion-panel">
91+
<div ngAccordionPanel panelId="item5" class="example-accordion-panel">
9292
<ng-template ngAccordionContent>
9393
<p>This is the content for Item 5</p>
9494
</ng-template>

‎src/components-examples/aria/accordion/accordion-disabled-focusable/accordion-disabled-focusable-example.html‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,16 @@
33
class="example-accordion-group"
44
[multiExpandable]="true"
55
[softDisabled]="true"
6-
[(value)]="expandedIds"
6+
[(expandedPanels)]="expandedIds"
77
>
88
<div class="example-accordion">
99
<h3 class="example-accordion-header">
10-
<button ngAccordionTrigger class="example-accordion-trigger" value="item1">
10+
<button ngAccordionTrigger class="example-accordion-trigger" panelId="item1">
1111
Item 1 Trigger
1212
<mat-icon aria-hidden="true">{{expansionIcon('item1')()}}</mat-icon>
1313
</button>
1414
</h3>
15-
<div ngAccordionPanel value="item1" class="example-accordion-panel">
15+
<div ngAccordionPanel panelId="item1" class="example-accordion-panel">
1616
<ng-template ngAccordionContent>
1717
<p>This is the content for Item 1.</p>
1818
</ng-template>
@@ -21,12 +21,12 @@ <h3 class="example-accordion-header">
2121

2222
<div class="example-accordion">
2323
<h3 class="example-accordion-header">
24-
<button ngAccordionTrigger class="example-accordion-trigger" value="item2" disabled>
24+
<button ngAccordionTrigger class="example-accordion-trigger" panelId="item2" disabled>
2525
Item 2 Trigger (disabled)
2626
<mat-icon aria-hidden="true">{{expansionIcon('item2')()}}</mat-icon>
2727
</button>
2828
</h3>
29-
<div ngAccordionPanel value="item2" class="example-accordion-panel">
29+
<div ngAccordionPanel panelId="item2" class="example-accordion-panel">
3030
<ng-template ngAccordionContent>
3131
<p>This is the content for Item 2. This should not be expandable if trigger is disabled.</p>
3232
</ng-template>
@@ -35,12 +35,12 @@ <h3 class="example-accordion-header">
3535

3636
<div class="example-accordion">
3737
<h3 class="example-accordion-header">
38-
<button ngAccordionTrigger class="example-accordion-trigger" value="item3">
38+
<button ngAccordionTrigger class="example-accordion-trigger" panelId="item3">
3939
Item 3 Trigger
4040
<mat-icon aria-hidden="true">{{expansionIcon('item3')()}}</mat-icon>
4141
</button>
4242
</h3>
43-
<div ngAccordionPanel value="item3" class="example-accordion-panel">
43+
<div ngAccordionPanel panelId="item3" class="example-accordion-panel">
4444
<ng-template ngAccordionContent>
4545
<p>This is the content for Item 3.</p>
4646
</ng-template>
@@ -49,12 +49,12 @@ <h3 class="example-accordion-header">
4949

5050
<div class="example-accordion">
5151
<h3 class="example-accordion-header">
52-
<button ngAccordionTrigger class="example-accordion-trigger" value="item4">
52+
<button ngAccordionTrigger class="example-accordion-trigger" panelId="item4">
5353
Item 4 Trigger
5454
<mat-icon aria-hidden="true">{{expansionIcon('item4')()}}</mat-icon>
5555
</button>
5656
</h3>
57-
<div ngAccordionPanel value="item4" class="example-accordion-panel">
57+
<div ngAccordionPanel panelId="item4" class="example-accordion-panel">
5858
<ng-template ngAccordionContent>
5959
<p>This is the content for Item 4</p>
6060
</ng-template>
@@ -63,12 +63,12 @@ <h3 class="example-accordion-header">
6363

6464
<div class="example-accordion">
6565
<h3 class="example-accordion-header">
66-
<button ngAccordionTrigger class="example-accordion-trigger" value="item5">
66+
<button ngAccordionTrigger class="example-accordion-trigger" panelId="item5">
6767
Item 5 Trigger
6868
<mat-icon aria-hidden="true">{{expansionIcon('item5')()}}</mat-icon>
6969
</button>
7070
</h3>
71-
<div ngAccordionPanel value="item5" class="example-accordion-panel">
71+
<div ngAccordionPanel panelId="item5" class="example-accordion-panel">
7272
<ng-template ngAccordionContent>
7373
<p>This is the content for Item 5</p>
7474
</ng-template>

‎src/components-examples/aria/accordion/accordion-disabled-skipped/accordion-disabled-skipped-example.html‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,16 @@
33
class="example-accordion-group"
44
[multiExpandable]="true"
55
[softDisabled]="false"
6-
[(value)]="expandedIds"
6+
[(expandedPanels)]="expandedIds"
77
>
88
<div class="example-accordion">
99
<h3 class="example-accordion-header">
10-
<button ngAccordionTrigger class="example-accordion-trigger" value="item1">
10+
<button ngAccordionTrigger class="example-accordion-trigger" panelId="item1">
1111
Item 1 Trigger
1212
<mat-icon aria-hidden="true">{{expansionIcon('item1')()}}</mat-icon>
1313
</button>
1414
</h3>
15-
<div ngAccordionPanel value="item1" class="example-accordion-panel">
15+
<div ngAccordionPanel panelId="item1" class="example-accordion-panel">
1616
<ng-template ngAccordionContent>
1717
<p>This is the content for Item 1.</p>
1818
</ng-template>
@@ -21,12 +21,12 @@ <h3 class="example-accordion-header">
2121

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

3636
<div class="example-accordion">
3737
<h3 class="example-accordion-header">
38-
<button ngAccordionTrigger class="example-accordion-trigger" value="item3">
38+
<button ngAccordionTrigger class="example-accordion-trigger" panelId="item3">
3939
Item 3 Trigger
4040
<mat-icon aria-hidden="true">{{expansionIcon('item3')()}}</mat-icon>
4141
</button>
4242
</h3>
43-
<div ngAccordionPanel value="item3" class="example-accordion-panel">
43+
<div ngAccordionPanel panelId="item3" class="example-accordion-panel">
4444
<ng-template ngAccordionContent>
4545
<p>This is the content for Item 3.</p>
4646
</ng-template>
@@ -49,12 +49,12 @@ <h3 class="example-accordion-header">
4949

5050
<div class="example-accordion">
5151
<h3 class="example-accordion-header">
52-
<button ngAccordionTrigger class="example-accordion-trigger" value="item4">
52+
<button ngAccordionTrigger class="example-accordion-trigger" panelId="item4">
5353
Item 4 Trigger
5454
<mat-icon aria-hidden="true">{{expansionIcon('item4')()}}</mat-icon>
5555
</button>
5656
</h3>
57-
<div ngAccordionPanel value="item4" class="example-accordion-panel">
57+
<div ngAccordionPanel panelId="item4" class="example-accordion-panel">
5858
<ng-template ngAccordionContent>
5959
<p>This is the content for Item 4</p>
6060
</ng-template>
@@ -63,12 +63,12 @@ <h3 class="example-accordion-header">
6363

6464
<div class="example-accordion">
6565
<h3 class="example-accordion-header">
66-
<button ngAccordionTrigger class="example-accordion-trigger" value="item5">
66+
<button ngAccordionTrigger class="example-accordion-trigger" panelId="item5">
6767
Item 5 Trigger
6868
<mat-icon aria-hidden="true">{{expansionIcon('item5')()}}</mat-icon>
6969
</button>
7070
</h3>
71-
<div ngAccordionPanel value="item5" class="example-accordion-panel">
71+
<div ngAccordionPanel panelId="item5" class="example-accordion-panel">
7272
<ng-template ngAccordionContent>
7373
<p>This is the content for Item 5</p>
7474
</ng-template>

0 commit comments

Comments
 (0)