fix(accordion): remove active class from open panel titles

Closes #2307 2307
Fixes #2221

BREAKING CHANGE:

The "active" CSS class is no longer added to headers of an active panel.
This change assures that markup used by ng-bootstrap is in-line with the
markup described in:
https://getbootstrap.com/docs/4.0/components/collapse/#accordion-example

src/accordion/accordion.spec.ts

@@ -19,24 +19,27 @@ function getPanelsContent(element: HTMLElement): HTMLDivElement[] {
   return <HTMLDivElement[]>Array.from(element.querySelectorAll('.card > .card-body'));
 }
 
-function getPanelsTitle(element: HTMLElement): HTMLDivElement[] {
-  return <HTMLDivElement[]>Array.from(element.querySelectorAll('.card > .card-header a'));
+function getPanelsTitle(element: HTMLElement): HTMLAnchorElement[] {
+  return <HTMLAnchorElement[]>Array.from(element.querySelectorAll('.card > .card-header a'));
 }
 
 function getButton(element: HTMLElement, index: number): HTMLButtonElement {
   return <HTMLButtonElement>element.querySelectorAll('button')[index];
 }
 
 function expectOpenPanels(nativeEl: HTMLElement, openPanelsDef: boolean[]) {
+  const noOfOpenPanels = openPanelsDef.reduce((soFar, def) => def ? soFar + 1 : soFar, 0);
   const panels = getPanels(nativeEl);
   expect(panels.length).toBe(openPanelsDef.length);
 
-  const panelsHeaders = getPanelsTitle(nativeEl);
-  panelsHeaders.forEach((header: HTMLElement, index: number) => {
-    expect(header.getAttribute('aria-expanded')).toBe(openPanelsDef[index].toString());
-  });
+  const panelsTitles = getPanelsTitle(nativeEl);
+  const result = panelsTitles.map((titleEl: HTMLAnchorElement) => titleEl.getAttribute('aria-expanded') === 'true');
+
+  const panelContents = getPanelsContent(nativeEl);
+  panelContents.forEach(
+      (panelContent: HTMLDivElement) => { expect(panelContent.classList.contains('show')).toBeTruthy(); });
 
-  const result = panels.map(panel => panel.classList.contains('active'));
+  expect(panelContents.length).toBe(noOfOpenPanels);
   expect(result).toEqual(openPanelsDef);
 }
 

src/accordion/accordion.ts

@@ -114,8 +114,7 @@ export interface NgbPanelChangeEvent {
   template: `
     <ng-template ngFor let-panel [ngForOf]="panels">
       <div class="card">
-        <div role="tab" id="{{panel.id}}-header"
-          [class]="'card-header ' + (panel.type ? 'bg-'+panel.type: type ? 'bg-'+type : '')" [class.active]="panel.isOpen">
+        <div role="tab" id="{{panel.id}}-header" [class]="'card-header ' + (panel.type ? 'bg-'+panel.type: type ? 'bg-'+type : '')">
           <a href (click)="!!toggle(panel.id)" [class.text-muted]="panel.disabled" [attr.tabindex]="(panel.disabled ? '-1' : null)"
             [attr.aria-expanded]="panel.isOpen" [attr.aria-controls]="(panel.isOpen ? panel.id : null)"
             [attr.aria-disabled]="panel.disabled">