Merge pull request #5264 from Alfresco/dev-pionnegru-ADF-5006

[ADF-5006] Datatable - custom cell template focus not working

demo-shell/src/app/components/files/files.component.html

@@ -318,6 +318,7 @@
                     <data-column
                         title="{{'DOCUMENT_LIST.COLUMNS.IS_LOCKED' | translate}}"
                         key="id"
+                        [focus]="false"
                         class="app-desktop-only adf-ellipsis-cell">
                         <ng-template let-entry="$implicit">
                             <button mat-icon-button [adf-node-lock]="entry.row.node.entry" class="app-lock-button">

docs/core/components/data-column.component.md

@@ -53,6 +53,7 @@ Defines column properties for DataTable, Tasklist, Document List and other compo
 | srTitle | `string` |  | Title to be used for screen readers. |
 | title | `string` | "" | Display title of the column, typically used for column headers. You can use the i18n resource key to get it translated automatically. |
 | type | `string` | "text" | Value type for the column. Possible settings are 'text', 'image', 'date', 'fileSize', 'location', and 'json'. |
+| focus | `boolean` | "true" | Toggles keyboard focus for a column. This should be use for custom template columns that contain actions elements   |
 
 ## Details
 

docs/core/interfaces/datatable-adapter.interface.md

@@ -70,6 +70,7 @@ interface DataColumn {
     cssClass?: string;
     template?: TemplateRef<any>;
     formatTooltip?: Function;
+    focus?: boolean;
 }
 ```
 

lib/core/data-column/data-column.component.ts

@@ -74,6 +74,10 @@ export class DataColumnComponent implements OnInit {
     @Input()
     editable: boolean = false;
 
+    /**  Enable or disable cell focus */
+    @Input()
+    focus: boolean = true;
+
     ngOnInit() {
         if (!this.srTitle && this.key === '$thumbnail') {
             this.srTitle = 'Thumbnail';

lib/core/datatable/components/datatable/datatable.component.html

@@ -197,7 +197,7 @@
                         </ng-container>
                     </div>
                     <div *ngIf="col.template" class="adf-datatable-cell-container">
-                        <div class="adf-cell-value">
+                        <div class="adf-cell-value" [attr.tabindex]="col.focus ? 0 : null">
                             <ng-container
                                 [ngTemplateOutlet]="col.template"
                                 [ngTemplateOutletContext]="{ $implicit: { data: data, row: row, col: col }, value: data.getValue(row, col, resolverFn) }">

lib/core/datatable/components/datatable/datatable.component.spec.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { SimpleChange, NO_ERRORS_SCHEMA, QueryList } from '@angular/core';
+import { SimpleChange, NO_ERRORS_SCHEMA, QueryList, Component, TemplateRef, ViewChild } from '@angular/core';
 import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
 import { MatCheckboxChange } from '@angular/material';
 import { DataColumn } from '../../data/data-column.model';
@@ -29,6 +29,13 @@ import { CoreTestingModule } from '../../../testing/core.testing.module';
 import { DataColumnListComponent } from '../../../data-column/data-column-list.component';
 import { DataColumnComponent } from '../../../data-column/data-column.component';
 
+@Component({selector: 'adf-custom-column-template-component', template: `
+    <ng-template #tmplRef></ng-template>
+`})
+class CustomColumnTemplateComponent {
+    @ViewChild('tmplRef') templateRef: TemplateRef<any>;
+}
+
 class FakeDataRow implements DataRow {
     isDropTarget = false;
     isSelected = true;
@@ -1127,15 +1134,18 @@ describe('Accesibility', () => {
     let fixture: ComponentFixture<DataTableComponent>;
     let dataTable: DataTableComponent;
     let element: any;
+    let columnCustomTemplate: TemplateRef<any>;
 
     setupTestBed({
         imports: [
             CoreTestingModule
         ],
+        declarations: [CustomColumnTemplateComponent],
         schemas: [NO_ERRORS_SCHEMA]
     });
 
     beforeEach(() => {
+        columnCustomTemplate = TestBed.createComponent(CustomColumnTemplateComponent).componentInstance.templateRef;
         fixture = TestBed.createComponent(DataTableComponent);
         dataTable = fixture.componentInstance;
         element = fixture.debugElement.nativeElement;
@@ -1330,4 +1340,42 @@ describe('Accesibility', () => {
 
         expect(document.activeElement.getAttribute('data-automation-id')).toBe('datatable-row-1');
     });
+
+    it('should remove cell focus when [focus] is set to false', () => {
+        dataTable.showHeader = false;
+        const dataRows = [ { name: 'name1' } ];
+
+        dataTable.data = new ObjectDataTableAdapter([],
+            [new ObjectDataColumn({ key: 'name', template: columnCustomTemplate, focus: false })]
+        );
+
+        dataTable.ngOnChanges({
+            rows: new SimpleChange(null, dataRows, false)
+        });
+
+        fixture.detectChanges();
+        dataTable.ngAfterViewInit();
+
+        const cell = document.querySelector('.adf-datatable-row[data-automation-id="datatable-row-0"] .adf-cell-value');
+        expect(cell.getAttribute('tabindex')).toBe(null);
+    });
+
+    it('should allow element focus when [focus] is set to true', () => {
+        dataTable.showHeader = false;
+        const dataRows = [ { name: 'name1' } ];
+
+        dataTable.data = new ObjectDataTableAdapter([],
+            [new ObjectDataColumn({ key: 'name', template: columnCustomTemplate, focus: true })]
+        );
+
+        dataTable.ngOnChanges({
+            rows: new SimpleChange(null, dataRows, false)
+        });
+
+        fixture.detectChanges();
+        dataTable.ngAfterViewInit();
+
+        const cell = document.querySelector('.adf-datatable-row[data-automation-id="datatable-row-0"] .adf-cell-value');
+        expect(cell.getAttribute('tabindex')).toBe('0');
+    });
 });

lib/core/datatable/data/data-column.model.ts

@@ -41,4 +41,5 @@ export interface DataColumn {
     formatTooltip?: Function;
     copyContent?: boolean;
     editable?: boolean;
+    focus?: boolean;
 }

lib/core/datatable/data/object-datacolumn.model.ts

@@ -30,6 +30,7 @@ export class ObjectDataColumn implements DataColumn {
     cssClass: string;
     template?: TemplateRef<any>;
     copyContent?: boolean;
+    focus?: boolean;
 
     constructor(input: any) {
         this.key = input.key;
@@ -41,5 +42,6 @@ export class ObjectDataColumn implements DataColumn {
         this.cssClass = input.cssClass;
         this.template = input.template;
         this.copyContent = input.copyContent;
+        this.focus = input.focus;
     }
 }