diff --git a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html index d03ac74392..450856e9e0 100644 --- a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html +++ b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.html @@ -18,7 +18,11 @@ [attr.data-automation-id]="'auto_id_' + col.key" [class.adf-data-table__header--sorted-asc]="isColumnSorted(col, 'asc')" [class.adf-data-table__header--sorted-desc]="isColumnSorted(col, 'desc')" - (click)="onColumnHeaderClick(col)"> + (click)="onColumnHeaderClick(col)" + (keyup.enter)="onColumnHeaderClick(col)" + role="button" + tabindex="0" + title="{{ col.title }}"> {{col.srTitle}} {{ col.title | translate}} @@ -31,11 +35,14 @@ - + [ngClass]="getRowStyle(row)" + (keyup.enter)="onKeyboardNavigate(row, $event)"> @@ -62,6 +69,7 @@ diff --git a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.scss b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.scss index 660b875d91..b13dcb20dd 100644 --- a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.scss +++ b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.scss @@ -82,6 +82,13 @@ &:last-of-type { padding-right: 24px; } + + &:focus { + outline-offset: -1px; + outline-width: 1px; + outline-color: rgb(68, 138, 255); + outline-style: solid; + } } td { diff --git a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts index 8144766e78..67e58997d0 100644 --- a/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts +++ b/ng2-components/ng2-alfresco-datatable/src/components/datatable/datatable.component.ts @@ -280,6 +280,21 @@ export class DataTableComponent implements AfterContentInit, OnChanges, DoCheck this.clickObserver.next(dataRowEvent); } + onKeyboardNavigate(row: DataRow, e: KeyboardEvent) { + if (e) { + e.preventDefault(); + } + const event = new DataRowEvent(row, e, this); + + this.rowDblClick.emit(event); + this.elementRef.nativeElement.dispatchEvent( + new CustomEvent('row-dblclick', { + detail: event, + bubbles: true + }) + ); + } + onColumnHeaderClick(column: DataColumn) { if (column && column.sortable) { let current = this.data.getSorting();