From 054583e0ded92c8550e61e67f861d48a6309d44f Mon Sep 17 00:00:00 2001
From: Aasim Khan <aasimkhan30@gmail.com>
Date: Fri, 6 Nov 2020 10:44:33 -0800
Subject: [PATCH] Adding aria label to "check all" check box in declarative
 table.  (#13216)

* added arialable for check all checkboxes and added some missing roles for the table elements

* removed duplicate attribute

* Moved column header aria label logic to a function.

* fixed typos in declarative table

* Changed the aria label text to something that is more intuiive.

* fixed typo in localized string identifier
---
 .../declarativeTable.component.html           | 89 ++++++++++---------
 .../declarativeTable.component.ts             |  9 ++
 2 files changed, 57 insertions(+), 41 deletions(-)

diff --git a/src/sql/workbench/browser/modelComponents/declarativeTable.component.html b/src/sql/workbench/browser/modelComponents/declarativeTable.component.html
index 9485ef2934..e51f706ec0 100644
--- a/src/sql/workbench/browser/modelComponents/declarativeTable.component.html
+++ b/src/sql/workbench/browser/modelComponents/declarativeTable.component.html
@@ -1,45 +1,52 @@
-<table role=grid #container *ngIf="columns" class="declarative-table" [style.height]="getHeight()"
+<table role="grid" #container *ngIf="columns" class="declarative-table" [style.height]="getHeight()"
 	[style.width]="getWidth()" [attr.aria-label]="ariaLabel">
-	<thead>
-		<ng-container *ngFor="let column of columns; let c = index;">
-			<th class="declarative-table-header" aria-sort="none" [style.width]="getColumnWidth(column)"
-				[attr.aria-label]="column.ariaLabel" [ngStyle]="column.headerCssStyles" role="columnheader">
-				{{column.displayName}}
-				<checkbox *ngIf="isCheckBox(c)" [checked]="isHeaderChecked(c)"
-					(onChange)="onHeaderCheckBoxChanged($event,c)" label=""></checkbox>
-			</th>
-		</ng-container>
+	<thead role="rowgroup">
+		<tr role="row">
+			<ng-container *ngFor="let column of columns; let c = index;">
+				<th class="declarative-table-header" aria-sort="none" [style.width]="getColumnWidth(column)"
+					[ngStyle]="column.headerCssStyles"
+					[attr.aria-label]="getHeaderAriaLabel(c)">
+					{{column.displayName}}
+					<checkbox *ngIf="isCheckBox(c)" [checked]="isHeaderChecked(c)"
+					[aria-label]="getCheckAllColumnAriaLabel(c)" (onChange)="onHeaderCheckBoxChanged($event,c)"
+						label=""></checkbox>
+				</th>
+			</ng-container>
+		</tr>
 	</thead>
-	<ng-container *ngIf="data.length > 0">
-		<ng-container *ngFor="let row of data;let r = index;">
-			<tr class="declarative-table-row" [class.selected]="isRowSelected(r)">
-				<ng-container *ngFor="let cellData of row;let c = index;trackBy:trackByFnCols">
-					<td class="declarative-table-cell" [style.width]="getColumnWidth(c)"
-						[attr.aria-label]="getAriaLabel(r, c)"
-						[ngStyle]="mergeCss(columns[c].rowCssStyles, cellData.style)">
-						<checkbox *ngIf="isCheckBox(c)" label="" (onChange)="onCheckBoxChanged($event,r,c)"
-							[enabled]="isControlEnabled(c)" [checked]="isChecked(r,c)"
-							[ngStyle]="mergeCss(columns[c].rowCssStyles, cellData.style)">
-						</checkbox>
-						<select-box *ngIf="isSelectBox(c)" [options]="getOptions(c)"
-							(onDidSelect)="onSelectBoxChanged($event,r,c)"
-							[selectedOption]="getSelectedOptionDisplayName(r,c)">
-						</select-box>
-						<editable-select-box *ngIf="isEditableSelectBox(c)" [options]="getOptions(c)"
-							(onDidSelect)="onSelectBoxChanged($event,r,c)"
-							[selectedOption]="getSelectedOptionDisplayName(r,c)">
-						</editable-select-box>
-						<input-box *ngIf="isInputBox(c)" [value]="cellData.value"
-							(onDidChange)="onInputBoxChanged($event,r,c)"></input-box>
-						<span *ngIf="isLabel(c)" (click)="onCellClick(r)">
-							{{cellData.value}}
-						</span>
-						<model-component-wrapper *ngIf="isComponent(c) && getItemDescriptor(cellData.value)"
-							[descriptor]="getItemDescriptor(cellData.value)" [modelStore]="modelStore">
-						</model-component-wrapper>
-					</td>
-				</ng-container>
-			</tr>
+	<tbody role="rowgroup">
+		<ng-container *ngIf="data.length > 0">
+			<ng-container *ngFor="let row of data;let r = index;">
+				<tr class="declarative-table-row" [class.selected]="isRowSelected(r)" role="row">
+					<ng-container *ngFor="let cellData of row;let c = index;trackBy:trackByFnCols">
+						<td class="declarative-table-cell" [style.width]="getColumnWidth(c)"
+							[attr.aria-label]="getAriaLabel(r, c)"
+							[ngStyle]="mergeCss(columns[c].rowCssStyles, cellData.style)"
+							role="gridcell">
+							<checkbox *ngIf="isCheckBox(c)" label="" (onChange)="onCheckBoxChanged($event,r,c)"
+								[enabled]="isControlEnabled(c)" [checked]="isChecked(r,c)"
+								[ngStyle]="mergeCss(columns[c].rowCssStyles, cellData.style)">
+							</checkbox>
+							<select-box *ngIf="isSelectBox(c)" [options]="getOptions(c)"
+								(onDidSelect)="onSelectBoxChanged($event,r,c)"
+								[selectedOption]="getSelectedOptionDisplayName(r,c)">
+							</select-box>
+							<editable-select-box *ngIf="isEditableSelectBox(c)" [options]="getOptions(c)"
+								(onDidSelect)="onSelectBoxChanged($event,r,c)"
+								[selectedOption]="getSelectedOptionDisplayName(r,c)">
+							</editable-select-box>
+							<input-box *ngIf="isInputBox(c)" [value]="cellData.value"
+								(onDidChange)="onInputBoxChanged($event,r,c)"></input-box>
+							<span *ngIf="isLabel(c)" (click)="onCellClick(r)">
+								{{cellData.value}}
+							</span>
+							<model-component-wrapper *ngIf="isComponent(c) && getItemDescriptor(cellData.value)"
+								[descriptor]="getItemDescriptor(cellData.value)" [modelStore]="modelStore">
+							</model-component-wrapper>
+						</td>
+					</ng-container>
+				</tr>
+			</ng-container>
 		</ng-container>
-	</ng-container>
+	</tbody>
 </table>
diff --git a/src/sql/workbench/browser/modelComponents/declarativeTable.component.ts b/src/sql/workbench/browser/modelComponents/declarativeTable.component.ts
index 635f0b8754..9f5c06aca8 100644
--- a/src/sql/workbench/browser/modelComponents/declarativeTable.component.ts
+++ b/src/sql/workbench/browser/modelComponents/declarativeTable.component.ts
@@ -220,6 +220,15 @@ export default class DeclarativeTableComponent extends ContainerBase<any, azdata
 		return '';
 	}
 
+	public getCheckAllColumnAriaLabel(colIdx: number): string {
+		return localize('checkAllColumnLabel', "check all checkboxes in column: {0}", this.columns[colIdx].displayName);
+	}
+
+	public getHeaderAriaLabel(colIdx: number): string {
+		const column = this.columns[colIdx];
+		return (column.ariaLabel) ? column.ariaLabel : column.displayName;
+	}
+
 	public getItemDescriptor(componentId: string): IComponentDescriptor {
 		return this.modelStore.getComponentDescriptor(componentId);
 	}