more accessibility.

 - row.template's expand row is a focusable `button`. It includes `aria-expanded`, `title` and `aria-label` also.
 - header.template: added missing`aria-label`s and `title`s for buttons.
 - table.template: added `aria-label` attribute for _select_ column.
 - added missing translations (note: demo page should be fixed as well)

Author: brunano21

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>
-`;
+`;

src/components/table.template.ts

@@ -11,10 +11,11 @@ export const TABLE_TEMPLATE = `
                         <span [textContent]="indexColumnHeader"></span>
                     </th>
                     <th [hide]="!selectColumnVisible" class="select-column-header">
-                        <input [hide]="!multiSelect" type="checkbox" [(ngModel)]="selectAllCheckbox"/>
+                        <input [hide]="!multiSelect" type="checkbox" [(ngModel)]="selectAllCheckbox" [attr.aria-label]="translations.selectAllRows" />
                     </th>
                     <th *ngFor="let column of columns" #th [hide]="!column.visible" 
-                    	(click)="headerClicked(column, $event)" (keydown.enter)="headerClicked(column, $event)" (keydown.space)="headerClicked(column, $event)"
+                    	  (click)="headerClicked(column, $event)" 
+                    	  (keydown.enter)="headerClicked(column, $event)" (keydown.space)="headerClicked(column, $event)"
                         [class.sortable]="column.sortable" [class.resizable]="column.resizable"
                         [ngClass]="column.styleClassObject" class="column-header" [style.width]="column.width | px"
                         [attr.aria-sort]="column.sortable ? (column.property === sortBy ? (sortAsc ? 'ascending' : 'descending') : 'none') : null"

src/types/data-table-translations.type.ts

@@ -1,7 +1,12 @@
 export interface DataTableTranslations {
-  indexColumn: string;
-  selectColumn: string;
-  expandColumn: string;
-  paginationLimit: string;
-  paginationRange: string;
+	headerReload: string,
+	headerColumnSelector: string,
+	indexColumn: string;
+	selectColumn: string;
+	selectRow: string;
+	selectAllRows: string,
+	expandColumn: string;
+	expandRow: string;
+	paginationLimit: string;
+	paginationRange: string;
 }

src/types/default-translations.type.ts

@@ -1,9 +1,14 @@
 import {DataTableTranslations} from'./data-table-translations.type'
 
 export const defaultTranslations: DataTableTranslations = {
-  indexColumn: 'index',
-  selectColumn: 'select',
-  expandColumn: 'expand',
-  paginationLimit: 'Limit',
-  paginationRange: 'Results'
+	headerReload: 'reload',
+	headerColumnSelector: 'column selector',
+	indexColumn: 'index',
+	selectColumn: 'select',
+	selectRow: 'select',
+	selectAllRows: 'select',
+	expandColumn: 'expand',
+	expandRow: 'expand',
+	paginationLimit: 'Limit',
+	paginationRange: 'Results'
 };