Adding aria-live label support for input boxes (microsoft#6862)

* Adding aria-live support for InputBoxes * Adding aria-live setting for DacFx wizard InputBox control * Dud commit to unstick Github CI
PejmanNik · Aug 22, 2019 · 887b2bf · 887b2bf
1 parent ab9c4e0
commit 887b2bf
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 2 deletions.
diff --git a/extensions/dacpac/src/wizard/api/dacFxConfigPage.ts b/extensions/dacpac/src/wizard/api/dacFxConfigPage.ts
@@ -136,7 +136,7 @@ export abstract class DacFxConfigPage extends BasePage {
 			if (!(this.instance.selectedOperation === Operation.deploy && !this.model.upgradeExisting)) {
 				this.model.database = values[0].name;
 			}
-			// filename shouldn't change for deploy because the file exists and isn't being generated like for extract and export
+			// filename shouldn't change for deploy because the file exists and isn't being generated as for extract and export
 			if (this.instance.selectedOperation !== Operation.deploy) {
 				this.model.filePath = this.generateFilePathFromDatabaseAndTimestamp();
 				this.fileTextBox.value = this.model.filePath;
@@ -156,7 +156,8 @@ export abstract class DacFxConfigPage extends BasePage {
 			component => isValidBasename(component.value)
 		)
 			.withProperties({
-				required: true
+				required: true,
+				ariaLive: 'polite'
 			}).component();
 
 		this.fileTextBox.ariaLabel = localize('dacfx.fileLocationAriaLabel', "File Location");

diff --git a/src/sql/azdata.d.ts b/src/sql/azdata.d.ts
@@ -2890,6 +2890,7 @@ declare module 'azdata' {
 	export interface InputBoxProperties extends ComponentProperties {
 		value?: string;
 		ariaLabel?: string;
+		ariaLive?: string;
 		placeHolder?: string;
 		inputType?: InputBoxInputType;
 		required?: boolean;

diff --git a/src/sql/base/browser/ui/inputBox/inputBox.ts b/src/sql/base/browser/ui/inputBox/inputBox.ts
@@ -96,6 +96,10 @@ export class InputBox extends vsInputBox {
 		}
 	}
 
+	public set ariaLive(value: string) {
+		this.element.setAttribute('aria-live', value);
+	}
+
 	public isEnabled(): boolean {
 		return !this.inputElement.hasAttribute('disabled');
 	}

diff --git a/src/sql/workbench/api/common/extHostModelView.ts b/src/sql/workbench/api/common/extHostModelView.ts
@@ -767,6 +767,13 @@ class InputBoxWrapper extends ComponentWrapper implements azdata.InputBoxCompone
 		this.setProperty('ariaLabel', v);
 	}
 
+	public get ariaLive(): string {
+		return this.properties['ariaLive'];
+	}
+	public set ariaLive(v: string) {
+		this.setProperty('ariaLabel', v);
+	}
+
 	public get placeHolder(): string {
 		return this.properties['placeHolder'];
 	}

diff --git a/src/sql/workbench/browser/modelComponents/inputbox.component.ts b/src/sql/workbench/browser/modelComponents/inputbox.component.ts
@@ -204,6 +204,9 @@ export default class InputBoxComponent extends ComponentBase implements ICompone
 			}
 		}
 
+		if (this.ariaLive) {
+			input.ariaLive = this.ariaLive;
+		}
 
 		input.inputElement.required = this.required;
 	}
@@ -226,6 +229,10 @@ export default class InputBoxComponent extends ComponentBase implements ICompone
 		this.setPropertyFromUI<azdata.InputBoxProperties, string>((props, value) => props.ariaLabel = value, newValue);
 	}
 
+	public get ariaLive() {
+		return this.getPropertyOrDefault<azdata.InputBoxProperties, string>((props) => props.ariaLive, '');
+	}
+
 	public get placeHolder(): string {
 		return this.getPropertyOrDefault<azdata.InputBoxProperties, string>((props) => props.placeHolder, '');
 	}