feat(accordion): add aria attributes

Part of #1050 Closes #1070
ng-bootstrap · Nov 22, 2016 · ed5d4ca · ed5d4ca
1 parent 3af8329
commit ed5d4ca
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/src/accordion/accordion.spec.ts b/src/accordion/accordion.spec.ts
@@ -56,8 +56,11 @@ describe('ngb-accordion', () => {
 
   it('should have no open panels', () => {
     const fixture = TestBed.createComponent(TestComponent);
+    const accordionEl = fixture.nativeElement.children[0];
     fixture.detectChanges();
     expectOpenPanels(fixture.nativeElement, [false, false, false]);
+    expect(accordionEl.getAttribute('role')).toBe('tablist');
+    expect(accordionEl.getAttribute('aria-multiselectable')).toBe('true');
   });
 
   it('should toggle panels based on "activeIds" values', () => {
@@ -140,6 +143,8 @@ describe('ngb-accordion', () => {
     const el = fixture.nativeElement;
 
     tc.closeOthers = true;
+    fixture.detectChanges();
+    expect(el.children[0].getAttribute('aria-multiselectable')).toBe('false');
 
     getButton(el, 0).click();
     fixture.detectChanges();

diff --git a/src/accordion/accordion.ts b/src/accordion/accordion.ts
@@ -91,15 +91,18 @@ export interface NgbPanelChangeEvent {
 @Component({
   selector: 'ngb-accordion',
   exportAs: 'ngbAccordion',
+  host: {'role': 'tablist', '[attr.aria-multiselectable]': '!closeOtherPanels'},
   template: `
   <div class="card">
     <template ngFor let-panel [ngForOf]="panels">
-      <div [class]="'card-header ' + (panel.type ? 'card-'+panel.type: type ? 'card-'+type : '')" [class.active]="isOpen(panel.id)">
-        <a href (click)="!!toggle(panel.id)" [class.text-muted]="panel.disabled">
+      <div role="tab" id="{{panel.id}}-header" 
+        [class]="'card-header ' + (panel.type ? 'card-'+panel.type: type ? 'card-'+type : '')" [class.active]="isOpen(panel.id)">
+        <a href (click)="!!toggle(panel.id)" [class.text-muted]="panel.disabled" 
+          [attr.aria-expanded]="isOpen(panel.id)" [attr.aria-controls]="panel.id">
           {{panel.title}}<template [ngTemplateOutlet]="panel.titleTpl?.templateRef"></template>
         </a>
       </div>
-      <div class="card-block" *ngIf="isOpen(panel.id)">
+      <div id="{{panel.id}}" role="tabpanel" [attr.aria-labelledby]="panel.id + '-header'" class="card-block" *ngIf="isOpen(panel.id)">
         <template [ngTemplateOutlet]="panel.contentTpl.templateRef"></template>
       </div>
     </template>