feat(tabs): add aria

Fixes #1118 Closes #1120
ng-bootstrap · Dec 13, 2016 · 97f116f · 97f116f
1 parent c42f6c8
commit 97f116f
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 3 deletions.
diff --git a/src/tabset/tabset.spec.ts b/src/tabset/tabset.spec.ts
@@ -80,6 +80,23 @@ describe('ngb-tabset', () => {
     expectTabs(fixture.nativeElement, [true, false]);
   });
 
+  it('should have aria attributes', () => {
+    const fixture = createTestComponent(`
+      <ngb-tabset>
+        <ngb-tab title="foo"><template ngbTabContent>Foo</template></ngb-tab>
+        <ngb-tab title="bar"><template ngbTabContent>Bar</template></ngb-tab>
+      </ngb-tabset>
+    `);
+
+    const tabTitles = getTabTitles(fixture.nativeElement);
+    const tabContent = getTabContent(fixture.nativeElement);
+
+    expect(tabTitles[0].getAttribute('role')).toBe('tab');
+    expect(tabTitles[0].getAttribute('aria-expanded')).toBe('true');
+    expect(tabTitles[1].getAttribute('aria-expanded')).toBe('false');
+    expect(tabTitles[0].getAttribute('aria-controls')).toBe(tabContent[0].getAttribute('id'));
+  });
+
   it('should allow mix of text and HTML in tab titles', () => {
     const fixture = createTestComponent(`
       <ngb-tabset>

diff --git a/src/tabset/tabset.ts b/src/tabset/tabset.ts
@@ -81,15 +81,15 @@ export interface NgbTabChangeEvent {
   template: `
     <ul [class]="'nav nav-' + type" role="tablist">
       <li class="nav-item" *ngFor="let tab of tabs">
-        <a [id]="tab.id" class="nav-link" [class.active]="tab.id === activeId" [class.disabled]="tab.disabled" 
-          href (click)="!!select(tab.id)">
+        <a [id]="tab.id" class="nav-link" [class.active]="tab.id === activeId" [class.disabled]="tab.disabled"
+          href (click)="!!select(tab.id)" role="tab" [attr.aria-controls]="tab.id + '-panel'" [attr.aria-expanded]="tab.id === activeId">
           {{tab.title}}<template [ngTemplateOutlet]="tab.titleTpl?.templateRef"></template>
         </a>
       </li>
     </ul>
     <div class="tab-content">
       <template ngFor let-tab [ngForOf]="tabs">
-        <div class="tab-pane active" *ngIf="tab.id === activeId" role="tabpanel" [attr.aria-labelledby]="tab.id">
+        <div class="tab-pane active" *ngIf="tab.id === activeId" role="tabpanel" [attr.aria-labelledby]="tab.id" id="{{tab.id}}-panel">
           <template [ngTemplateOutlet]="tab.contentTpl.templateRef"></template>
         </div>
       </template>