fix(tabs): prevent focus of disabled tabs

Fixes #1430
ng-bootstrap · Apr 5, 2017 · 7d1dd97 · 7d1dd97
1 parent 4cbea99
commit 7d1dd97
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/src/tabset/tabset.spec.ts b/src/tabset/tabset.spec.ts
@@ -41,8 +41,12 @@ function expectTabs(nativeEl: HTMLElement, active: boolean[], disabled?: boolean
 
     if (disabled[i]) {
       expect(tabTitles[i]).toHaveCssClass('disabled');
+      expect(tabTitles[i].getAttribute('aria-disabled')).toBe('true');
+      expect(tabTitles[i].getAttribute('tabindex')).toBe('-1');
     } else {
       expect(tabTitles[i]).not.toHaveCssClass('disabled');
+      expect(tabTitles[i].getAttribute('aria-disabled')).toBe('false');
+      expect(tabTitles[i].getAttribute('tabindex')).toBeNull();
     }
   }
 }

diff --git a/src/tabset/tabset.ts b/src/tabset/tabset.ts
@@ -82,7 +82,8 @@ export interface NgbTabChangeEvent {
     <ul [class]="'nav nav-' + type + ' justify-content-' + justify" 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)" role="tab" [attr.aria-controls]="tab.id + '-panel'" [attr.aria-expanded]="tab.id === activeId">
+          href (click)="!!select(tab.id)" role="tab" [attr.tabindex]="(tab.disabled ? '-1': undefined)"
+          [attr.aria-controls]="tab.id + '-panel'" [attr.aria-expanded]="tab.id === activeId" [attr.aria-disabled]="tab.disabled">
           {{tab.title}}<template [ngTemplateOutlet]="tab.titleTpl?.templateRef"></template>
         </a>
       </li>