Fixes AB#604, AB#605: editable table inputs not associated with table headers

Author: mhdahman

src/@batch-flask/ui/form/editable-table/editable-table.component.ts

@@ -120,6 +120,10 @@ export class EditableTableComponent implements ControlValueAccessor, Validator,
         return index;
     }
 
+    public getHeaderIdForColumn(column: EditableTableColumnComponent) {
+        return `table-header-${column.name}`
+    }
+
     private _buildControlsFromValue(items: any[], columns: EditableTableColumnComponent[]) {
         if (Array.isArray(items) && items.length > 0) {
             const controls: FormGroup[] = Object.values(this.items.controls).slice(0, items.length) as any;

src/@batch-flask/ui/form/editable-table/editable-table.html

@@ -3,7 +3,7 @@
     <table class="noselect" cellspacing="0" cellpadding="0" formArrayName="items" [attr.aria-label]="label" role="grid">
         <thead>
             <tr>
-                <th *ngFor="let column of columns;trackBy: trackColumn">
+                <th *ngFor="let column of columns;trackBy: trackColumn" [attr.id]="getHeaderIdForColumn(column)">
                     <ng-template [ngTemplateOutlet]="column.content"></ng-template>
                 </th>
                 <th class="action-column"></th>
@@ -18,7 +18,7 @@
                                 [rowValue]="item.value"></bl-editable-table-select-cell>
                         </ng-container>
                         <ng-container *ngSwitchDefault>
-                            <input [formControl]="item.controls[column.name]" [attr.type]="column.type" [attr.aria-placeholder]="column.name">
+                            <input [formControl]="item.controls[column.name]" [attr.type]="column.type" [attr.aria-describedby]="getHeaderIdForColumn(column)" [attr.aria-labeledby]="getHeaderIdForColumn(column)">
                         </ng-container>
                     </ng-container>
                 </td>