From aaf115a5c8cc00a21ebde1b5e32119388729d8e6 Mon Sep 17 00:00:00 2001 From: Elliot Boschwitz Date: Thu, 12 Sep 2019 11:05:56 -0700 Subject: [PATCH] Dacpac extension announces invalid text inputs in screen reader mode (#7133) Text input boxes will have an updated aria-label with a given error message if the input is invalid. --- .../dacpac/src/wizard/pages/extractConfigPage.ts | 4 ++-- .../browser/modelComponents/inputbox.component.ts | 14 +++++++++++++- 2 files changed, 15 insertions(+), 3 deletions(-) diff --git a/extensions/dacpac/src/wizard/pages/extractConfigPage.ts b/extensions/dacpac/src/wizard/pages/extractConfigPage.ts index 4457b4cb67..e4f34edaf8 100644 --- a/extensions/dacpac/src/wizard/pages/extractConfigPage.ts +++ b/extensions/dacpac/src/wizard/pages/extractConfigPage.ts @@ -108,12 +108,12 @@ export class ExtractConfigPage extends DacFxConfigPage { private async createVersionTextBox(): Promise { this.versionTextBox = this.view.modelBuilder.inputBox().withProperties({ - required: true + required: true, + ariaLabel: localize('dacFxExtract.versionTextBoxAriaLabel', 'Version') }).component(); // 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/workbench/browser/modelComponents/inputbox.component.ts b/src/sql/workbench/browser/modelComponents/inputbox.component.ts index 33cf172671..345a1a4b6e 100644 --- a/src/sql/workbench/browser/modelComponents/inputbox.component.ts +++ b/src/sql/workbench/browser/modelComponents/inputbox.component.ts @@ -141,7 +141,19 @@ export default class InputBoxComponent extends ComponentBase implements ICompone public validate(): Thenable { return super.validate().then(valid => { - this.inputElement.validate(); + valid = valid && this.inputElement.validate(); + + // set aria label based on validity of input + if (valid) { + this.inputElement.setAriaLabel(this.ariaLabel); + } else { + if (this.ariaLabel) { + this.inputElement.setAriaLabel(nls.localize('period', "{0}. {1}", this.ariaLabel, this.inputElement.inputElement.validationMessage)); + } else { + this.inputElement.setAriaLabel(this.inputElement.inputElement.validationMessage); + } + } + return valid; }); }