Skip to content

Commit aaaafde

Browse files
andrewseguinandrewseguin
committed
main - 221402f fix(aria/accordion): rename value to panelId for trigger and panel (#32295)
1 parent a7949a2 commit aaaafde

17 files changed

Lines changed: 199 additions & 199 deletions

File tree

‎docs-content/examples-highlighted/aria/accordion/accordion-configurable/accordion-configurable-example-html.html‎

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

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

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

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

8484
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-accordion&quot;</span>&gt;</span>
8585
<span class="hljs-tag">&lt;<span class="hljs-name">h3</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-accordion-header&quot;</span>&gt;</span>
86-
<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">ngAccordionTrigger</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-accordion-trigger&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;item5&quot;</span>&gt;</span>
86+
<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">ngAccordionTrigger</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-accordion-trigger&quot;</span> <span class="hljs-attr">panelId</span>=<span class="hljs-string">&quot;item5&quot;</span>&gt;</span>
8787
Item 5 Trigger
8888
<span class="hljs-tag">&lt;<span class="hljs-name">mat-icon</span> <span class="hljs-attr">aria-hidden</span>=<span class="hljs-string">&quot;true&quot;</span>&gt;</span>{{expansionIcon(&#x27;item5&#x27;)()}}<span class="hljs-tag">&lt;/<span class="hljs-name">mat-icon</span>&gt;</span>
8989
<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
9090
<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span>
91-
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">ngAccordionPanel</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;item5&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-accordion-panel&quot;</span>&gt;</span>
91+
<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">ngAccordionPanel</span> <span class="hljs-attr">panelId</span>=<span class="hljs-string">&quot;item5&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;example-accordion-panel&quot;</span>&gt;</span>
9292
<span class="hljs-tag">&lt;<span class="hljs-name">ng-template</span> <span class="hljs-attr">ngAccordionContent</span>&gt;</span>
9393
<span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>This is the content for Item 5<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
9494
<span class="hljs-tag">&lt;/<span class="hljs-name">ng-template</span>&gt;</span>

0 commit comments

Comments
 (0)