Inform screen-readers of Dacpac Deploy loading and loading complete for summary (#7000)

* Loading components now announce themselves.  Likely need way to disable.

* Adding focus elements to table for screen-reading after component is loaded in

* Adding piping for aria roles on tables

* Alerting on completion of deploy plan summary

* Removing extra ariaLive property

extensions/dacpac/src/wizard/pages/deployPlanPage.ts

@@ -99,7 +99,8 @@ export class DeployPlanPage extends DacFxConfigPage {
 			data: this.getColumnData(result),
 			columns: this.getTableColumns(result.dataLossAlerts.size > 0),
 			width: 875,
-			height: 300
+			height: 300,
+			ariaRole: 'alert'
 		});
 
 		if (result.dataLossAlerts.size > 0) {

src/sql/azdata.d.ts

@@ -2951,6 +2951,8 @@ declare module 'azdata' {
 		title?: string;
 		ariaRowCount?: number;
 		ariaColumnCount?: number;
+		ariaRole?: string;
+		focused?: boolean;
 		moveFocusOutWithTab?: boolean; //accessibility requirement for tables with no actionable cells
 	}
 

src/sql/base/browser/ui/table/table.ts

@@ -359,4 +359,8 @@ export class Table<T extends Slick.SlickData> extends Widget implements IDisposa
 	public set ariaColumnCount(value: number) {
 		this._tableContainer.setAttribute('aria-colcount', value.toString());
 	}
+
+	public set ariaRole(value: string) {
+		this._tableContainer.setAttribute('role', value);
+	}
 }

src/sql/workbench/api/common/extHostModelView.ts

@@ -1191,6 +1191,13 @@ class TableComponentWrapper extends ComponentWrapper implements azdata.TableComp
 		this.setProperty('moveFocusOutWithTab', v);
 	}
 
+	public get focused(): boolean {
+		return this.properties['focused'];
+	}
+	public set focused(v: boolean) {
+		this.setProperty('focused', v);
+	}
+
 	public get onRowSelected(): vscode.Event<any> {
 		let emitter = this._emitterMap.get(ComponentEventType.onSelectedRowChanged);
 		return emitter && emitter.event;
@@ -1200,6 +1207,8 @@ class TableComponentWrapper extends ComponentWrapper implements azdata.TableComp
 		let emitter = this._emitterMap.get(ComponentEventType.onCellAction);
 		return emitter && emitter.event;
 	}
+
+
 }
 
 class DropDownWrapper extends ComponentWrapper implements azdata.DropDownComponent {

src/sql/workbench/browser/modelComponents/loadingComponent.component.ts

@@ -17,7 +17,7 @@ import * as nls from 'vs/nls';
 @Component({
 	selector: 'modelview-loadingComponent',
 	template: `
-		<div class="modelview-loadingComponent-container" *ngIf="loading">
+		<div class="modelview-loadingComponent-container" role="alert" aria-busy="true" *ngIf="loading">
 			<div class="modelview-loadingComponent-spinner" *ngIf="loading" [title]=_loadingTitle #spinnerElement></div>
 		</div>
 		<model-component-wrapper #childElement [descriptor]="_component" [modelStore]="modelStore" *ngIf="_component" [ngClass]="{'modelview-loadingComponent-content-loading': loading}">

src/sql/workbench/browser/modelComponents/table.component.ts

@@ -245,6 +245,14 @@ export default class TableComponent extends ComponentBase implements IComponent,
 			this._table.ariaColumnCount = this.ariaColumnCount;
 		}
 
+		if (this.ariaRole) {
+			this._table.ariaRole = this.ariaRole;
+		}
+
+		if (this.focused) {
+			this._table.focus();
+		}
+
 		this.layoutTable();
 		this.validate();
 	}
@@ -328,6 +336,10 @@ export default class TableComponent extends ComponentBase implements IComponent,
 		return this.getPropertyOrDefault<azdata.TableComponentProperties, number>((props) => props.ariaColumnCount, -1);
 	}
 
+	public get ariaRole(): string {
+		return this.getPropertyOrDefault<azdata.TableComponentProperties, string>((props) => props.ariaRole, undefined);
+	}
+
 	public set moveFocusOutWithTab(newValue: boolean) {
 		this.setPropertyFromUI<azdata.TableComponentProperties, boolean>((props, value) => props.moveFocusOutWithTab = value, newValue);
 	}
@@ -335,4 +347,12 @@ export default class TableComponent extends ComponentBase implements IComponent,
 	public get moveFocusOutWithTab(): boolean {
 		return this.getPropertyOrDefault<azdata.TableComponentProperties, boolean>((props) => props.moveFocusOutWithTab, false);
 	}
+
+	public get focused(): boolean {
+		return this.getPropertyOrDefault<azdata.RadioButtonProperties, boolean>((props) => props.focused, false);
+	}
+
+	public set focused(newValue: boolean) {
+		this.setPropertyFromUI<azdata.RadioButtonProperties, boolean>((properties, value) => { properties.focused = value; }, newValue);
+	}
 }