Add name property for DacFx wizard edit text boxes (#6775)

* add name property for file location edit and version edit

* add aria label property for drop down component

* remove 'Edit' from aria labels

extensions/dacpac/src/wizard/api/dacFxConfigPage.ts

@@ -45,8 +45,10 @@ export abstract class DacFxConfigPage extends BasePage {
 	}
 
 	protected async createServerDropdown(isTargetServer: boolean): Promise<azdata.FormComponent> {
+		const serverDropDownTitle = isTargetServer ? localize('dacFx.targetServerDropdownTitle', "Target Server") : localize('dacFx.sourceServerDropdownTitle', "Source Server");
 		this.serverDropdown = this.view.modelBuilder.dropDown().withProperties({
-			required: true
+			required: true,
+			ariaLabel: serverDropDownTitle
 		}).component();
 
 		// Handle server changes
@@ -56,12 +58,9 @@ export abstract class DacFxConfigPage extends BasePage {
 			await this.populateDatabaseDropdown();
 		});
 
-		let targetServerTitle = localize('dacFx.targetServerDropdownTitle', 'Target Server');
-		let sourceServerTitle = localize('dacFx.sourceServerDropdownTitle', 'Source Server');
-
 		return {
 			component: this.serverDropdown,
-			title: isTargetServer ? targetServerTitle : sourceServerTitle
+			title: serverDropDownTitle
 		};
 	}
 
@@ -85,6 +84,7 @@ export abstract class DacFxConfigPage extends BasePage {
 			required: true
 		}).component();
 
+		this.databaseTextBox.ariaLabel = localize('dacfx.databaseAriaLabel', "Database");
 		this.databaseTextBox.onTextChanged(async () => {
 			this.model.database = this.databaseTextBox.value;
 		});
@@ -96,7 +96,10 @@ export abstract class DacFxConfigPage extends BasePage {
 	}
 
 	protected async createDatabaseDropdown(): Promise<azdata.FormComponent> {
-		this.databaseDropdown = this.view.modelBuilder.dropDown().component();
+		const databaseDropdownTitle = localize('dacFx.sourceDatabaseDropdownTitle', "Source Database");
+		this.databaseDropdown = this.view.modelBuilder.dropDown().withProperties({
+			ariaLabel: databaseDropdownTitle
+		}).component();
 
 		// Handle database changes
 		this.databaseDropdown.onValueChanged(async () => {
@@ -109,9 +112,10 @@ export abstract class DacFxConfigPage extends BasePage {
 			required: true
 		}).component();
 
+
 		return {
 			component: this.databaseLoader,
-			title: localize('dacFx.sourceDatabaseDropdownTitle', 'Source Database')
+			title: databaseDropdownTitle
 		};
 	}
 
@@ -155,6 +159,7 @@ export abstract class DacFxConfigPage extends BasePage {
 				required: true
 			}).component();
 
+		this.fileTextBox.ariaLabel = localize('dacfx.fileLocationAriaLabel', "File Location");
 		this.fileButton = this.view.modelBuilder.button().withProperties({
 			label: '•••',
 		}).component();

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

@@ -164,7 +164,10 @@ export class DeployConfigPage extends DacFxConfigPage {
 	}
 
 	protected async createDeployDatabaseDropdown(): Promise<azdata.FormComponent> {
-		this.databaseDropdown = this.view.modelBuilder.dropDown().component();
+		const targetDatabaseTitle = localize('dacFx.targetDatabaseDropdownTitle', "Database Name");
+		this.databaseDropdown = this.view.modelBuilder.dropDown().withProperties({
+			ariaLabel: targetDatabaseTitle
+		}).component();
 
 		//Handle database changes
 		this.databaseDropdown.onValueChanged(async () => {
@@ -177,7 +180,7 @@ export class DeployConfigPage extends DacFxConfigPage {
 
 		return {
 			component: this.databaseLoader,
-			title: localize('dacFx.targetDatabaseDropdownTitle', 'Database Name')
+			title: targetDatabaseTitle
 		};
 	}
 

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

@@ -111,8 +111,9 @@ export class ExtractConfigPage extends DacFxConfigPage {
 			required: true
 		}).component();
 
-		// default filepath
+		// default version
 		this.versionTextBox.value = '1.0.0.0';
+		this.versionTextBox.ariaLabel = localize('dacfx.versionAriaLabel', "Version");
 		this.model.version = this.versionTextBox.value;
 
 		this.versionTextBox.onTextChanged(async () => {

src/sql/azdata.d.ts

@@ -3290,6 +3290,7 @@ declare module 'azdata' {
 		values?: string[] | CategoryValue[];
 		editable?: boolean;
 		fireOnTextChange?: boolean;
+		ariaLabel?: string;
 	}
 
 	export interface DeclarativeTableColumn {

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

@@ -1191,6 +1191,13 @@ class DropDownWrapper extends ComponentWrapper implements azdata.DropDownCompone
 		this.setProperty('fireOnTextChange', v);
 	}
 
+	public get ariaLabel(): string {
+		return this.properties['ariaLabel'];
+	}
+	public set ariaLabel(v: string) {
+		this.setProperty('ariaLabel', v);
+	}
+
 	public get onValueChanged(): vscode.Event<any> {
 		let emitter = this._emitterMap.get(ComponentEventType.onDidChange);
 		return emitter && emitter.event;

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

@@ -106,6 +106,11 @@ export default class DropDownComponent extends ComponentBase implements ICompone
 
 	public setProperties(properties: { [key: string]: any; }): void {
 		super.setProperties(properties);
+
+		if (this.ariaLabel !== '') {
+			this._selectBox.setAriaLabel(this.ariaLabel);
+		}
+
 		if (this.editable) {
 			this._editableDropdown.values = this.getValues();
 			if (this.value) {
@@ -175,6 +180,10 @@ export default class DropDownComponent extends ComponentBase implements ICompone
 		return this.getPropertyOrDefault<azdata.DropDownProperties, boolean>((props) => props.fireOnTextChange, false);
 	}
 
+	private get ariaLabel(): string {
+		return this.getPropertyOrDefault<azdata.DropDownProperties, string>((props) => props.ariaLabel, '');
+	}
+
 	public getEditableDisplay(): string {
 		return this.editable ? '' : 'none';
 	}