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
This commit is contained in:
Kim Santiago
2019-08-19 14:36:13 -07:00
committed by GitHub
parent 0be1cf8b73
commit 87b0e08a6a
6 changed files with 36 additions and 10 deletions

View File

@@ -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();

View File

@@ -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
};
}

View File

@@ -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 () => {

1
src/sql/azdata.d.ts vendored
View File

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

View File

@@ -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;

View File

@@ -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';
}