feat(tabset): improve accessibility

Closes #1327
ng-bootstrap · Feb 28, 2017 · d7722ad · d7722ad
1 parent 26cdf11
commit d7722ad
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/src/tabset/tabset.spec.ts b/src/tabset/tabset.spec.ts
@@ -10,6 +10,10 @@ import {NgbTabset} from './tabset';
 const createTestComponent = (html: string) =>
     createGenericTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;
 
+function getTabset(nativeEl: HTMLElement) {
+  return nativeEl.querySelector('ngb-tabset');
+}
+
 function getTabTitles(nativeEl: HTMLElement) {
   return nativeEl.querySelectorAll('.nav-link');
 }
@@ -88,13 +92,17 @@ describe('ngb-tabset', () => {
       </ngb-tabset>
     `);
 
-    const tabTitles = getTabTitles(fixture.nativeElement);
-    const tabContent = getTabContent(fixture.nativeElement);
+    const compiled: HTMLElement = fixture.nativeElement;
+    const tabset = getTabset(compiled);
+    const tabTitles = getTabTitles(compiled);
+    const tabContent = getTabContent(compiled);
 
+    expect(tabset.getAttribute('role')).toBe('tabpanel');
     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'));
+    expect(tabContent[0].getAttribute('aria-expanded')).toBe('true');
   });
 
   it('should allow mix of text and HTML in tab titles', () => {

diff --git a/src/tabset/tabset.ts b/src/tabset/tabset.ts
@@ -78,6 +78,7 @@ export interface NgbTabChangeEvent {
 @Component({
   selector: 'ngb-tabset',
   exportAs: 'ngbTabset',
+  host: {'role': 'tabpanel'},
   template: `
     <ul [class]="'nav nav-' + type + ' justify-content-' + justify" role="tablist">
       <li class="nav-item" *ngFor="let tab of tabs">
@@ -89,7 +90,9 @@ export interface NgbTabChangeEvent {
     </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" id="{{tab.id}}-panel">
+        <div class="tab-pane active" *ngIf="tab.id === activeId" role="tabpanel"
+          [attr.aria-labelledby]="tab.id" id="{{tab.id}}-panel"
+          [attr.aria-expanded]="tab.id === activeId">
           <template [ngTemplateOutlet]="tab.contentTpl.templateRef"></template>
         </div>
       </template>