refactor(aria/accordion): fix up toggle icons

Author: adolgachev

src/aria/accordion/accordion.spec.ts

@@ -1,4 +1,4 @@
-import {ChangeDetectionStrategy, Component, computed, signal, viewChildren} from '@angular/core';
+import {ChangeDetectionStrategy, Component, signal, viewChildren} from '@angular/core';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {provideFakeDirectionality, runAccessibilityChecks} from '@angular/cdk/testing/private';
 import {_IdGenerator} from '@angular/cdk/a11y';

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

@@ -13,75 +13,25 @@
   [softDisabled]="softDisabled.value"
   [wrap]="wrap.value"
 >
-  <div class="example-accordion">
-    <h3 class="example-accordion-header">
-      <button ngAccordionTrigger class="example-accordion-trigger" [panel]="panel1">
-        Item 1 Trigger
-        <mat-icon aria-hidden="true">{{expansionIcon(panel1)}}</mat-icon>
-      </button>
-    </h3>
-    <div ngAccordionPanel #panel1="ngAccordionPanel" class="example-accordion-panel">
-      <ng-template ngAccordionContent>
-        <p>This is the content for Item 1.</p>
-        <button>Focusable Button</button>
-      </ng-template>
-    </div>
-  </div>
-
-  <div class="example-accordion">
-    <h3 class="example-accordion-header">
-      <button ngAccordionTrigger class="example-accordion-trigger" [panel]="panel2" disabled [expanded]="true">
-        Item 2 Trigger (disabled)
-        <mat-icon aria-hidden="true">{{expansionIcon(panel2)}}</mat-icon>
-      </button>
-    </h3>
-    <div ngAccordionPanel #panel2="ngAccordionPanel" class="example-accordion-panel">
-      <ng-template ngAccordionContent>
-        <p>This is the content for Item 2.</p>
-        <label>Input inside panel: <input type="text" /></label>
-      </ng-template>
-    </div>
-  </div>
-
-  <div class="example-accordion">
-    <h3 class="example-accordion-header">
-      <button ngAccordionTrigger class="example-accordion-trigger" [panel]="panel3">
-        Item 3 Trigger
-        <mat-icon aria-hidden="true">{{expansionIcon(panel3)}}</mat-icon>
-      </button>
-    </h3>
-    <div ngAccordionPanel #panel3="ngAccordionPanel" class="example-accordion-panel">
-      <ng-template ngAccordionContent>
-        <p>This is the content for Item 3.</p>
-      </ng-template>
-    </div>
-  </div>
-
-  <div class="example-accordion">
-    <h3 class="example-accordion-header">
-      <button ngAccordionTrigger class="example-accordion-trigger" [panel]="panel4">
-        Item 4 Trigger
-        <mat-icon aria-hidden="true">{{expansionIcon(panel4)}}</mat-icon>
-      </button>
-    </h3>
-    <div ngAccordionPanel #panel4="ngAccordionPanel" class="example-accordion-panel">
-      <ng-template ngAccordionContent>
-        <p>This is the content for Item 4</p>
-      </ng-template>
-    </div>
-  </div>
-
-  <div class="example-accordion">
-    <h3 class="example-accordion-header">
-      <button ngAccordionTrigger class="example-accordion-trigger" [panel]="panel5">
-        Item 5 Trigger
-        <mat-icon aria-hidden="true">{{expansionIcon(panel5)}}</mat-icon>
-      </button>
-    </h3>
-    <div ngAccordionPanel #panel5="ngAccordionPanel" class="example-accordion-panel">
-      <ng-template ngAccordionContent>
-        <p>This is the content for Item 5</p>
-      </ng-template>
-    </div>
-  </div>
+  @for (item of items(); track item.panelId) {
+    <div class="example-accordion">
+      <h3 class="example-accordion-header">
+        <button ngAccordionTrigger 
+                #trigger="ngAccordionTrigger" 
+                class="example-accordion-trigger"
+                [disabled]="item.disabled()"
+                [(expanded)]="item.expanded"
+                [panel]="panel">
+          {{item.header}}
+          <mat-icon aria-hidden="true">{{trigger.expanded() ? 'expand_less' : 'expand_more'}}</mat-icon>
+        </button>
+      </h3>
+      <div ngAccordionPanel #panel="ngAccordionPanel" class="example-accordion-panel">
+        <ng-template ngAccordionContent>
+          <p>{{item.content}}</p>
+          <label>Input inside panel: <input type="text" /></label>
+        </ng-template>
+      </div>
+    </div>  
+  }
 </div>

src/components-examples/aria/accordion/accordion-configurable/accordion-configurable-example.ts

@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, signal} from '@angular/core';
 import {FormControl, ReactiveFormsModule} from '@angular/forms';
 import {MatCheckboxModule} from '@angular/material/checkbox';
 import {MatFormFieldModule} from '@angular/material/form-field';
@@ -37,7 +37,41 @@ export class AccordionConfigurableExample {
   disabled = new FormControl(false, {nonNullable: true});
   softDisabled = new FormControl(true, {nonNullable: true});
 
-  expansionIcon(panel: AccordionPanel): string {
-    return panel ? 'expand_less' : 'expand_more';
-  }
+  items = signal([
+    {
+      panelId: 'item-1',
+      header: 'Item 1 Trigger',
+      content: 'This is the content for Item 1.',
+      disabled: signal(false),
+      expanded: signal(false),
+    },
+    {
+      panelId: 'item-2',
+      header: 'Item 2 Trigger (disabled)',
+      content: 'This is the content for Item 2.',
+      disabled: signal(true),
+      expanded: signal(false),
+    },
+    {
+      panelId: 'item-3',
+      header: 'Item 3 Trigger',
+      content: 'This is the content for Item 3.',
+      disabled: signal(false),
+      expanded: signal(false),
+    },
+    {
+      panelId: 'item-4',
+      header: 'Item 4 Trigger',
+      content: 'This is the content for Item 4.',
+      disabled: signal(false),
+      expanded: signal(false),
+    },
+    {
+      panelId: 'item-5',
+      header: 'Item 5 Trigger',
+      content: 'This is the content for Item 5.',
+      disabled: signal(false),
+      expanded: signal(false),
+    },
+  ]);
 }

src/components-examples/aria/accordion/accordion-disabled-focusable/accordion-disabled-focusable-example.ts

@@ -16,6 +16,6 @@ import {
 })
 export class AccordionDisabledFocusableExample {
   expansionIcon(panel: AccordionPanel): string {
-    return panel ? 'expand_less' : 'expand_more';
+    return panel.visible() ? 'expand_less' : 'expand_more';
   }
 }

src/components-examples/aria/accordion/accordion-disabled-skipped/accordion-disabled-skipped-example.ts

@@ -16,6 +16,6 @@ import {
 })
 export class AccordionDisabledSkippedExample {
   expansionIcon(panel: AccordionPanel): string {
-    return panel ? 'expand_less' : 'expand_more';
+    return panel.visible() ? 'expand_less' : 'expand_more';
   }
 }

src/components-examples/aria/accordion/accordion-disabled/accordion-disabled-example.ts

@@ -16,6 +16,6 @@ import {
 })
 export class AccordionDisabledExample {
   expansionIcon(panel: AccordionPanel): string {
-    return panel ? 'expand_less' : 'expand_more';
+    return panel.visible() ? 'expand_less' : 'expand_more';
   }
 }

src/components-examples/aria/accordion/accordion-multi-expansion/accordion-multi-expansion-example.ts

@@ -16,6 +16,6 @@ import {
 })
 export class AccordionMultiExpansionExample {
   expansionIcon(panel: AccordionPanel): string {
-    return panel ? 'expand_less' : 'expand_more';
+    return panel.visible() ? 'expand_less' : 'expand_more';
   }
 }

src/components-examples/aria/accordion/accordion-single-expansion/accordion-single-expansion-example.ts

@@ -16,6 +16,6 @@ import {
 })
 export class AccordionSingleExpansionExample {
   expansionIcon(panel: AccordionPanel): string {
-    return panel ? 'expand_less' : 'expand_more';
+    return panel.visible() ? 'expand_less' : 'expand_more';
   }
 }