diff --git a/extensions/dacpac/src/wizard/api/dacFxConfigPage.ts b/extensions/dacpac/src/wizard/api/dacFxConfigPage.ts index 32e3ed2280..beeb5c80f3 100644 --- a/extensions/dacpac/src/wizard/api/dacFxConfigPage.ts +++ b/extensions/dacpac/src/wizard/api/dacFxConfigPage.ts @@ -45,8 +45,10 @@ export abstract class DacFxConfigPage extends BasePage { } protected async createServerDropdown(isTargetServer: boolean): Promise { + 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 { - 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(); diff --git a/extensions/dacpac/src/wizard/pages/deployConfigPage.ts b/extensions/dacpac/src/wizard/pages/deployConfigPage.ts index 9d9c58a254..3e2f19c681 100644 --- a/extensions/dacpac/src/wizard/pages/deployConfigPage.ts +++ b/extensions/dacpac/src/wizard/pages/deployConfigPage.ts @@ -164,7 +164,10 @@ export class DeployConfigPage extends DacFxConfigPage { } protected async createDeployDatabaseDropdown(): Promise { - 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 }; } diff --git a/extensions/dacpac/src/wizard/pages/extractConfigPage.ts b/extensions/dacpac/src/wizard/pages/extractConfigPage.ts index f1b392a05b..4457b4cb67 100644 --- a/extensions/dacpac/src/wizard/pages/extractConfigPage.ts +++ b/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 () => { diff --git a/src/sql/azdata.d.ts b/src/sql/azdata.d.ts index 58cc8216d7..55842e41d5 100644 --- a/src/sql/azdata.d.ts +++ b/src/sql/azdata.d.ts @@ -3290,6 +3290,7 @@ declare module 'azdata' { values?: string[] | CategoryValue[]; editable?: boolean; fireOnTextChange?: boolean; + ariaLabel?: string; } export interface DeclarativeTableColumn { diff --git a/src/sql/workbench/api/common/extHostModelView.ts b/src/sql/workbench/api/common/extHostModelView.ts index eaf1749bb0..b150632db4 100644 --- a/src/sql/workbench/api/common/extHostModelView.ts +++ b/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 { let emitter = this._emitterMap.get(ComponentEventType.onDidChange); return emitter && emitter.event; diff --git a/src/sql/workbench/browser/modelComponents/dropdown.component.ts b/src/sql/workbench/browser/modelComponents/dropdown.component.ts index 16754e4514..710f10c90c 100644 --- a/src/sql/workbench/browser/modelComponents/dropdown.component.ts +++ b/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((props) => props.fireOnTextChange, false); } + private get ariaLabel(): string { + return this.getPropertyOrDefault((props) => props.ariaLabel, ''); + } + public getEditableDisplay(): string { return this.editable ? '' : 'none'; }