fix(accordion): correct "collapsed" CSS class usage

Fixes #2553 Closes #2555
ng-bootstrap · Jul 30, 2018 · 25b5bee · 25b5bee
1 parent 1db703d
commit 25b5bee
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/src/accordion/accordion.spec.ts b/src/accordion/accordion.spec.ts
@@ -33,7 +33,11 @@ function expectOpenPanels(nativeEl: HTMLElement, openPanelsDef: boolean[]) {
   expect(panels.length).toBe(openPanelsDef.length);
 
   const panelsTitles = getPanelsTitle(nativeEl);
-  const result = panelsTitles.map((titleEl: HTMLButtonElement) => titleEl.getAttribute('aria-expanded') === 'true');
+  const result = panelsTitles.map((titleEl: HTMLButtonElement) => {
+    const isAriaExpanded = titleEl.getAttribute('aria-expanded') === 'true';
+    const isCSSCollapsed = titleEl.classList.contains('collapsed');
+    return isAriaExpanded === !isCSSCollapsed ? isAriaExpanded : fail('inconsistent state');
+  });
 
   const panelContents = getPanelsContent(nativeEl);
   panelContents.forEach(

diff --git a/src/accordion/accordion.ts b/src/accordion/accordion.ts
@@ -116,7 +116,7 @@ export interface NgbPanelChangeEvent {
       <div class="card">
         <div role="tab" id="{{panel.id}}-header" [class]="'card-header ' + (panel.type ? 'bg-'+panel.type: type ? 'bg-'+type : '')">
           <h5 class="mb-0">
-            <button class="btn btn-link" (click)="!!toggle(panel.id)" [disabled]="panel.disabled" [class.collapsed]="panel.isOpen"
+            <button class="btn btn-link" (click)="!!toggle(panel.id)" [disabled]="panel.disabled" [class.collapsed]="!panel.isOpen"
               [attr.aria-expanded]="panel.isOpen" [attr.aria-controls]="panel.id">
               {{panel.title}}<ng-template [ngTemplateOutlet]="panel.titleTpl?.templateRef"></ng-template>
             </button>