feat(tabs): add aria attributes

src/tabs/tab.directive.ts

@@ -82,6 +82,10 @@ export class TabDirective implements OnInit, OnDestroy {
   @Output() removed: EventEmitter<TabDirective> = new EventEmitter();
 
   @HostBinding('class.tab-pane') addClass = true;
+  @HostBinding('attr.role') role = 'tabpanel';
+  @HostBinding('attr.aria-labelledby') get ariaLabelledby(): string {
+    return this.id ? `${this.id}-link` : '';
+  }
 
   /* tslint:disable-next-line:no-any */
   headingRef: TemplateRef<any>;

src/tabs/tabset.component.html

@@ -1,7 +1,12 @@
-<ul class="nav" [ngClass]="classMap" (click)="$event.preventDefault()">
+<ul class="nav" [ngClass]="classMap"
+    (click)="$event.preventDefault()"
+    [attr.aria-label]="ariaLabel"
+    role="tablist">
   <li *ngFor="let tabz of tabs; let i = index" [ngClass]="['nav-item', tabz.customClass || '']"
       [class.active]="tabz.active" [class.disabled]="tabz.disabled" (keydown)="keyNavActions($event, i)">
-    <a href="javascript:void(0);" class="nav-link"
+    <a href="javascript:void(0);" class="nav-link" role="tab"
+       [attr.aria-controls]="tabz.id ? tabz.id : ''"
+       [attr.aria-selected]="!!tabz.active"
        [attr.id]="tabz.id ? tabz.id + '-link' : ''"
        [class.active]="tabz.active" [class.disabled]="tabz.disabled"
        (click)="tabz.active = true">

src/tabs/tabset.component.ts

@@ -45,6 +45,9 @@ export class TabsetComponent implements OnDestroy {
   tabs: TabDirective[] = [];
   classMap: { [key: string]: boolean } = {};
 
+  /** aria label for tab list */
+  ariaLabel: string;
+
   protected isDestroyed: boolean;
   protected _vertical: boolean;
   protected _justified: boolean;

src/tabs/tabset.config.ts

@@ -4,4 +4,6 @@ import { Injectable } from '@angular/core';
 export class TabsetConfig {
   /** provides default navigation context class: 'tabs' or 'pills' */
   type = 'tabs';
+  /** aria label for tab list */
+  ariaLabel = 'Tabs';
 }