fix(accordion): update generated markup to Bootstrap HTML / CSS

ref: https://getbootstrap.com/docs/4.0/components/collapse/#accordion-example Closes #2368
ng-bootstrap · Jun 29, 2018 · 9b2b0bc · 9b2b0bc
1 parent 2905b18
commit 9b2b0bc
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 52 deletions.
diff --git a/src/accordion/accordion.spec.ts b/src/accordion/accordion.spec.ts
@@ -19,8 +19,8 @@ function getPanelsContent(element: HTMLElement): HTMLDivElement[] {
   return <HTMLDivElement[]>Array.from(element.querySelectorAll('.card > .card-body'));
 }
 
-function getPanelsTitle(element: HTMLElement): HTMLAnchorElement[] {
-  return <HTMLAnchorElement[]>Array.from(element.querySelectorAll('.card > .card-header a'));
+function getPanelsTitle(element: HTMLElement): HTMLButtonElement[] {
+  return <HTMLButtonElement[]>Array.from(element.querySelectorAll('.card > .card-header button'));
 }
 
 function getButton(element: HTMLElement, index: number): HTMLButtonElement {
@@ -33,7 +33,7 @@ function expectOpenPanels(nativeEl: HTMLElement, openPanelsDef: boolean[]) {
   expect(panels.length).toBe(openPanelsDef.length);
 
   const panelsTitles = getPanelsTitle(nativeEl);
-  const result = panelsTitles.map((titleEl: HTMLAnchorElement) => titleEl.getAttribute('aria-expanded') === 'true');
+  const result = panelsTitles.map((titleEl: HTMLButtonElement) => titleEl.getAttribute('aria-expanded') === 'true');
 
   const panelContents = getPanelsContent(nativeEl);
   panelContents.forEach(
@@ -328,7 +328,7 @@ describe('ngb-accordion', () => {
     tc.closeOthers = true;
     fixture.detectChanges();
 
-    const headingLinks = fixture.nativeElement.querySelectorAll('.card-header a');
+    const headingLinks = getPanelsTitle(fixture.nativeElement);
 
     headingLinks[0].click();
     fixture.detectChanges();
@@ -360,7 +360,7 @@ describe('ngb-accordion', () => {
     tc.panels[0].disabled = true;
     fixture.detectChanges();
 
-    const headingLinks = fixture.nativeElement.querySelectorAll('.card-header a');
+    const headingLinks = getPanelsTitle(fixture.nativeElement);
 
     headingLinks[0].click();
     fixture.detectChanges();
@@ -377,9 +377,9 @@ describe('ngb-accordion', () => {
     fixture.detectChanges();
     expectOpenPanels(el, [false, false, false]);
 
-    const headingLinks = fixture.nativeElement.querySelectorAll('.card-header a')[0];
+    const headingLinks = getPanelsTitle(fixture.nativeElement);
 
-    headingLinks.click();
+    headingLinks[0].click();
     fixture.detectChanges();
     expectOpenPanels(el, [false, false, false]);
 
@@ -405,57 +405,22 @@ describe('ngb-accordion', () => {
     expectOpenPanels(fixture.nativeElement, [true, false, false]);
   });
 
-  it('should have correct ARIA attributes when disabled', () => {
+  it('should have correct disabled state', () => {
     const fixture = TestBed.createComponent(TestComponent);
     const tc = fixture.componentInstance;
 
     tc.activeIds = ['one'];
     fixture.detectChanges();
-    let disabledPanelLink: HTMLAnchorElement = getPanels(fixture.nativeElement)[0].querySelector('a');
+    const headingLinks = getPanelsTitle(fixture.nativeElement);
     expectOpenPanels(fixture.nativeElement, [true, false, false]);
-    expect(disabledPanelLink.getAttribute('aria-disabled')).toBe('false');
-    expect(disabledPanelLink.getAttribute('tabindex')).toBeNull();
-
-    tc.panels[0].disabled = true;
-    fixture.detectChanges();
-    expectOpenPanels(fixture.nativeElement, [false, false, false]);
-    expect(disabledPanelLink.getAttribute('aria-disabled')).toBe('true');
-    expect(disabledPanelLink.getAttribute('tabindex')).toBe('-1');
-  });
-
-  it('should change the header class when disabled', () => {
-    const fixture = TestBed.createComponent(TestComponent);
-    const tc = fixture.componentInstance;
-
-    fixture.detectChanges();
-
-    const disabledPanelLink: HTMLAnchorElement = getPanels(fixture.nativeElement)[0].querySelector('a');
-    fixture.detectChanges();
-    expect(disabledPanelLink.classList.contains('text-muted')).toBeFalsy();
+    expect(headingLinks[0].disabled).toBeFalsy();
 
     tc.panels[0].disabled = true;
     fixture.detectChanges();
-    expect(disabledPanelLink.classList.contains('text-muted')).toBeTruthy();
-  });
-
-  it('should remove aria-controls attribute when closed', () => {
-    const fixture = TestBed.createComponent(TestComponent);
-    const tc = fixture.componentInstance;
-
-    fixture.detectChanges();
-    const headingLinks = fixture.nativeElement.querySelectorAll('.card-header a');
-
     expectOpenPanels(fixture.nativeElement, [false, false, false]);
-    expect(headingLinks[0].getAttribute('aria-controls')).toBeNull();
-
-    tc.activeIds = ['one'];
-    fixture.detectChanges();
-    const panelsContent = getPanelsContent(fixture.nativeElement);
-    expectOpenPanels(fixture.nativeElement, [true, false, false]);
-    expect(headingLinks[0].getAttribute('aria-controls')).toBe(panelsContent[0].id);
+    expect(headingLinks[0].disabled).toBeTruthy();
   });
 
-
   it('should remove collapsed panels content from DOM', () => {
     const fixture = TestBed.createComponent(TestComponent);
     fixture.detectChanges();

diff --git a/src/accordion/accordion.ts b/src/accordion/accordion.ts
@@ -115,14 +115,15 @@ export interface NgbPanelChangeEvent {
     <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 : '')">
-          <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">
-            {{panel.title}}<ng-template [ngTemplateOutlet]="panel.titleTpl?.templateRef"></ng-template>
-          </a>
+          <h5 class="mb-0">
+            <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>
+          </h5>
         </div>
         <div id="{{panel.id}}" role="tabpanel" [attr.aria-labelledby]="panel.id + '-header'"
-             class="card-body collapse {{panel.isOpen ? 'show' : null}}" *ngIf="!destroyOnHide || panel.isOpen">
+             class="card-body collapse" [class.show]="panel.isOpen" *ngIf="!destroyOnHide || panel.isOpen">
              <ng-template [ngTemplateOutlet]="panel.contentTpl?.templateRef"></ng-template>
         </div>
       </div>