feat(module:table): add nzLabel to include aria-label in checkboxes (#7903)

Co-authored-by: Mattias Kesti <mattias.kesti@calabrio.com>

Author: oestrogen

components/table/demo/row-selection-and-operation.ts

@@ -32,7 +32,12 @@ export interface Data {
     >
       <thead>
         <tr>
-          <th [nzChecked]="checked" [nzIndeterminate]="indeterminate" (nzCheckedChange)="onAllChecked($event)"></th>
+          <th
+            [nzChecked]="checked"
+            [nzIndeterminate]="indeterminate"
+            nzLabel="Select all"
+            (nzCheckedChange)="onAllChecked($event)"
+          ></th>
           <th>Name</th>
           <th>Age</th>
           <th>Address</th>
@@ -43,6 +48,7 @@ export interface Data {
           <td
             [nzChecked]="setOfCheckedId.has(data.id)"
             [nzDisabled]="data.disabled"
+            [nzLabel]="data.name"
             (nzCheckedChange)="onItemChecked(data.id, $event)"
           ></td>
           <td>{{ data.name }}</td>

components/table/doc/index.en-US.md

@@ -111,6 +111,7 @@ Checkbox property
 | `[nzShowCheckbox]` | Whether `nz-checkbox` should be shown in the header | `boolean` | - |
 | `[nzDisabled]` | Whether the `nz-checkbox` is disabled | `boolean` | - |
 | `[nzIndeterminate]` | `nz-checkbox` indeterminate status | `boolean` | - |
+| `[nzLabel]` | ARIA label for the `nz-checkbox` | `string` | - |
 | `[nzChecked]` | Checked status, double binding | `boolean` | - |
 | `(nzCheckedChange)` | Callback when checked status changes | `EventEmitter<boolean>` | - |
 
@@ -173,6 +174,7 @@ Checkbox property
 | `[nzShowCheckbox]` | Whether add nz-checkbox | `boolean` | - |
 | `[nzDisabled]` | Whether disable checkbox | `boolean` | - |
 | `[nzIndeterminate]` | Indeterminate status | `boolean` | - |
+| `[nzLabel]` | ARIA label for the `nz-checkbox` | `string` | - |
 | `[nzChecked]` | Checked status, double binding | `boolean` | - |
 | `(nzCheckedChange)` | Checked status change callback | `EventEmitter<boolean>` | - |
 | `[colSpan]` | how many columns the cell extends | `number` | `null` |

components/table/doc/index.zh-CN.md

@@ -112,6 +112,7 @@ Table 组件同时具备了易用性和高度可定制性
 | `[nzShowCheckbox]` | 是否添加checkbox | `boolean` | - |
 | `[nzDisabled]` | checkbox 是否禁用 | `boolean` | - |
 | `[nzIndeterminate]` | checkbox indeterminate 状态 | `boolean` | - |
+| `[nzLabel]` | checkbox 的可访问性标签 | `string` | - |
 | `[nzChecked]` | checkbox 是否被选中，可双向绑定 | `boolean` | - |
 | `(nzCheckedChange)` | 选中的回调 | `EventEmitter<boolean>` | - |
 
@@ -173,6 +174,7 @@ Table 组件同时具备了易用性和高度可定制性
 | `[nzShowCheckbox]` | 是否添加checkbox | `boolean` | - |
 | `[nzDisabled]` | checkbox 是否禁用 | `boolean` | - |
 | `[nzIndeterminate]` | checkbox indeterminate 状态 | `boolean` | - |
+| `[nzLabel]` | checkbox 的可访问性标签 | `string` | - |
 | `[nzChecked]` | checkbox 是否被选中，可双向绑定 | `boolean` | - |
 | `(nzCheckedChange)` | 选中的回调 | `EventEmitter<boolean>` | - |
 | `[colSpan]` | 单元格可横跨的列数 | `number` | `null` |

components/table/src/addon/selection.component.ts

@@ -20,6 +20,7 @@ import { NzSafeAny } from 'ng-zorro-antd/core/types';
       [ngModel]="checked"
       [nzDisabled]="disabled"
       [nzIndeterminate]="indeterminate"
+      [attr.aria-label]="label"
       (ngModelChange)="onCheckedChange($event)"
     ></label>
     <div class="ant-table-selection-extra" *ngIf="showRowSelection">
@@ -42,6 +43,7 @@ export class NzTableSelectionComponent {
   @Input() checked = false;
   @Input() disabled = false;
   @Input() indeterminate = false;
+  @Input() label: string | null = null;
   @Input() showCheckbox = false;
   @Input() showRowSelection = false;
   @Output() readonly checkedChange = new EventEmitter<boolean>();

components/table/src/cell/td-addon.component.ts

@@ -48,6 +48,7 @@ import { InputBoolean } from 'ng-zorro-antd/core/util';
       [nzDisabled]="nzDisabled"
       [ngModel]="nzChecked"
       [nzIndeterminate]="nzIndeterminate"
+      [attr.aria-label]="nzLabel"
       (ngModelChange)="onCheckedChange($event)"
     ></label>
     <ng-content></ng-content>
@@ -65,6 +66,7 @@ export class NzTdAddOnComponent implements OnChanges {
   @Input() nzChecked = false;
   @Input() nzDisabled = false;
   @Input() nzIndeterminate = false;
+  @Input() nzLabel: string | null = null;
   @Input() nzIndentSize = 0;
   @Input() @InputBoolean() nzShowExpand = false;
   @Input() @InputBoolean() nzShowCheckbox = false;

components/table/src/cell/th-selection.component.ts

@@ -29,6 +29,7 @@ import { InputBoolean } from 'ng-zorro-antd/core/util';
       [checked]="nzChecked"
       [disabled]="nzDisabled"
       [indeterminate]="nzIndeterminate"
+      [label]="nzLabel"
       [listOfSelections]="nzSelections"
       [showCheckbox]="nzShowCheckbox"
       [showRowSelection]="nzShowRowSelection"
@@ -46,6 +47,7 @@ export class NzThSelectionComponent implements OnChanges {
   @Input() nzChecked = false;
   @Input() nzDisabled = false;
   @Input() nzIndeterminate = false;
+  @Input() nzLabel: string | null = null;
   @Input() @InputBoolean() nzShowCheckbox = false;
   @Input() @InputBoolean() nzShowRowSelection = false;
   @Output() readonly nzCheckedChange = new EventEmitter<boolean>();

components/table/src/testing/td.spec.ts

@@ -137,6 +137,12 @@ describe('nz-td', () => {
         }).createComponent(NzTestDisableTdComponent);
       }).toThrow();
     });
+    it('should add aria-label', () => {
+      testComponent.label = 'test-label';
+      fixture.detectChanges();
+      console.log(td.nativeElement.querySelector('label').attributes.getNamedItem('aria-label').value);
+      expect(td.nativeElement.querySelector('label').attributes.getNamedItem('aria-label').value).toBe('test-label'); //toContain('test-label');
+    });
   });
 });
 
@@ -145,6 +151,7 @@ describe('nz-td', () => {
     <td
       [(nzChecked)]="checked"
       [nzIndeterminate]="indeterminate"
+      [nzLabel]="label"
       (nzCheckedChange)="checkedChange($event)"
       [nzDisabled]="disabled"
       [(nzExpand)]="expand"
@@ -165,6 +172,7 @@ export class NzTestTdComponent {
   indentSize?: number;
   left?: string | number;
   right?: string | number;
+  label?: string | null;
 }
 
 @Component({