added keyboard and screenreader support to TreeTable

Author: Hendrik Brummermann

components/treetable/treetable.css

@@ -41,7 +41,8 @@
 }
 
 .ui-treetable .ui-treetable-toggler {
-    display: inline-block;
+    border: none;
+    background: none;
     vertical-align: middle;
     cursor: pointer;
 }

components/treetable/treetable.ts

@@ -10,17 +10,18 @@ import {DomHandler} from '../dom/domhandler';
     template: `
         <div class="ui-treetable-row" [ngClass]="{'ui-state-highlight':isSelected(),'ui-treetable-row-selectable':treeTable.selectionMode}">
             <td *ngFor="let col of treeTable.columns; let i=index" [ngStyle]="col.style" [class]="col.styleClass" (click)="onRowClick($event)">
-                <span *ngIf="i==0" class="ui-treetable-toggler fa fa-fw ui-c" [ngClass]="{'fa-caret-down':node.expanded,'fa-caret-right':!node.expanded}"
+                <button *ngIf="i==0" class="ui-treetable-toggler fa fa-fw ui-c" [ngClass]="{'fa-caret-down':node.expanded,'fa-caret-right':!node.expanded}"
                     [ngStyle]="{'margin-left':level*16 + 'px','visibility': isLeaf() ? 'hidden' : 'visible'}"
-                    (click)="toggle($event)"></span>
+                    (click)="toggle($event)"
+                    [title]="node.expanded ? labelCollapse : labelExpand"></button>
                 <span *ngIf="!col.template">{{resolveFieldData(node.data,col.field)}}</span>
                 <p-columnBodyTemplateLoader [column]="col" [rowData]="node" *ngIf="col.template"></p-columnBodyTemplateLoader>
             </td>
         </div>
         <div *ngIf="node.children && node.expanded" class="ui-treetable-row" style="display:table-row">
             <td [attr.colspan]="treeTable.columns.length" class="ui-treetable-child-table-container">
                 <table>
-                    <tbody pTreeRow *ngFor="let childNode of node.children" [node]="childNode" [level]="level+1"></tbody>
+                    <tbody pTreeRow *ngFor="let childNode of node.children" [node]="childNode" [level]="level+1" [labelExpand]="labelExpand" [labelCollapse]="labelCollapse"></tbody>
                 </table>
             </td>
         </div>
@@ -31,6 +32,10 @@ export class UITreeRow {
     @Input() node: TreeNode;
 
     @Input() level: number = 0;
+
+    @Input() labelExpand: string = "Expand";
+    
+    @Input() labelCollapse: string = "Collapse";
 
     constructor(@Inject(forwardRef(() => TreeTable)) public treeTable:TreeTable) {}
 
@@ -105,7 +110,7 @@ export class UITreeRow {
                             </td>
                         </tr>
                     </tfoot>
-                    <tbody pTreeRow *ngFor="let node of value" [node]="node" [level]="0"></tbody>
+                    <tbody pTreeRow *ngFor="let node of value" [node]="node" [level]="0" [labelExpand]="labelExpand" [labelCollapse]="labelCollapse"></tbody>
                 </table>
             </div>
             <div class="ui-treetable-footer ui-widget-header" *ngIf="footer">
@@ -135,6 +140,10 @@ export class TreeTable {
     @Input() style: any;
 
     @Input() styleClass: string;
+
+    @Input() labelExpand: string = "Expand";
+    
+    @Input() labelCollapse: string = "Collapse";
 
     @ContentChild(Header) header: Header;
 

showcase/demo/treetable/treetabledemo.html

@@ -566,6 +566,18 @@ <h3>Attributes</h3>
                             <td>array</td>
                             <td>null</td>
                             <td>An array of treenodes.</td>
+                        </tr>
+                         <tr>
+                            <td>labelExpand</td>
+                            <td>string</td>
+                            <td>Expand</td>
+                            <td>Tooltip and screenreader text for expand icon.</td>
+                        </tr>
+                         <tr>
+                            <td>labelCollapse</td>
+                            <td>string</td>
+                            <td>Collapse</td>
+                            <td>Tooltip and screenreader text for collapse icon.</td>
                         </tr>
                         <tr>
                             <td>selectionMode</td>