Merge pull request MIt9#4 from brunano21/a11y

add basic accessibility support.

Author: MIt9

src/components/header.template.ts

@@ -3,11 +3,13 @@ export const HEADER_TEMPLATE = `
     <h4 class="title" [textContent]="dataTable.headerTitle"></h4>
     <div class="button-panel">
         <button type="button" class="btn btn-default btn-sm refresh-button"
-            (click)="dataTable.reloadItems()">
+            (click)="dataTable.reloadItems()" 
+            [attr.aria-label]="dataTable.translations.headerReload" [title]="dataTable.translations.headerReload">
             <span class="glyphicon glyphicon-refresh"></span>
         </button>
         <button type="button" class="btn btn-default btn-sm column-selector-button" [class.active]="columnSelectorOpen"
-            (click)="columnSelectorOpen = !columnSelectorOpen; $event.stopPropagation()" >
+            (click)="columnSelectorOpen = !columnSelectorOpen; $event.stopPropagation()" 
+            [attr.aria-label]="dataTable.translations.headerColumnSelector" [title]="dataTable.translations.headerColumnSelector">
             <span class="glyphicon glyphicon-list"></span>
         </button>
         <div class="column-selector-wrapper" (click)="$event.stopPropagation()">
@@ -40,4 +42,4 @@ export const HEADER_TEMPLATE = `
         </div>
     </div>
 </div>
-`;
+`;

src/components/row.template.ts

@@ -9,9 +9,11 @@ export const ROW_TEMPLATE = `
     (dblclick)="dataTable.rowDoubleClicked(_this, $event)"
     (click)="dataTable.rowClicked(_this, $event)"
     >
-    <td [hide]="!dataTable.expandColumnVisible" (click)="expanded = !expanded; $event.stopPropagation()" class="row-expand-button">
-        <span class="glyphicon glyphicon-triangle-right" [hide]="expanded"></span>
-        <span class="glyphicon glyphicon-triangle-bottom" [hide]="!expanded"></span>
+    <td [hide]="!dataTable.expandColumnVisible">
+        <div tabindex="0" role="button" (click)="expanded = !expanded; $event.stopPropagation()" class="row-expand-button"
+            [attr.aria-expanded]="expanded" [title]="dataTable.translations.expandRow" [attr.aria-label]="dataTable.translations.expandRow">
+            <span class="glyphicon" [ngClass]="{'glyphicon-triangle-right': !expanded, 'glyphicon-triangle-bottom': expanded}" aria-hidden="true"></span>
+        </div>
     </td>
     <td [hide]="!dataTable.indexColumnVisible" class="index-column" [textContent]="displayIndex"></td>
     <td [hide]="!dataTable.selectColumnVisible" class="select-column">
@@ -28,4 +30,4 @@ export const ROW_TEMPLATE = `
         <div [ngTemplateOutlet]="dataTable.expandTemplate" [ngOutletContext]="{row: _this, item: item}"></div>
     </td>
 </tr>
-`;
+`;