From efe8e81b6ecf4dc42b0d51cf5b8a04e8a2f44d4a Mon Sep 17 00:00:00 2001
From: Anthony Dresser <andresse@microsoft.com>
Date: Thu, 12 Apr 2018 11:29:16 -0700
Subject: [PATCH] Connection inputs labels (#1129)

* adds aria-label to inputs for connection

* formatting
---
 src/sql/base/browser/ui/editableDropdown/dropdown.ts  |  7 ++++++-
 .../connection/connectionDialog/connectionWidget.ts   | 11 +++++++----
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/sql/base/browser/ui/editableDropdown/dropdown.ts b/src/sql/base/browser/ui/editableDropdown/dropdown.ts
index 45c52a4426..37a89184dc 100644
--- a/src/sql/base/browser/ui/editableDropdown/dropdown.ts
+++ b/src/sql/base/browser/ui/editableDropdown/dropdown.ts
@@ -49,6 +49,10 @@ export interface IDropdownOptions extends IDropdownStyles {
 	 * Error Message to show if input is not part of the supplied list, only used if strictSelection = false
 	 */
 	errorMessage?: string;
+	/**
+	 * Value to use as aria-label for the input box
+	 */
+	ariaLabel?: string;
 }
 
 export interface IDropdownStyles {
@@ -124,7 +128,8 @@ export class Dropdown extends Disposable {
 				validation: v => this._inputValidator(v)
 			},
 			placeholder: this._options.placeholder,
-			actions: [this._toggleAction]
+			actions: [this._toggleAction],
+			ariaLabel: this._options.ariaLabel
 		});
 
 		this._register(DOM.addDisposableListener(this._input.inputElement, DOM.EventType.FOCUS, () => {
diff --git a/src/sql/parts/connection/connectionDialog/connectionWidget.ts b/src/sql/parts/connection/connectionDialog/connectionWidget.ts
index 370341a100..ad653bcad8 100644
--- a/src/sql/parts/connection/connectionDialog/connectionWidget.ts
+++ b/src/sql/parts/connection/connectionDialog/connectionWidget.ts
@@ -128,6 +128,7 @@ export class ConnectionWidget {
 			validationOptions: {
 				validation: (value: string) => !value ? ({ type: MessageType.ERROR, content: serverNameOption.displayName + errorMessage }) : null
 			},
+			ariaLabel: serverNameOption.displayName
 		});
 
 		if (this._optionsMaps[ConnectionOptionSpecialType.authType]) {
@@ -141,12 +142,13 @@ export class ConnectionWidget {
 		this._userNameInputBox = new InputBox(userNameBuilder.getHTMLElement(), this._contextViewService, {
 			validationOptions: {
 				validation: (value: string) => self.validateUsername(value, userNameOption.isRequired) ? ({ type: MessageType.ERROR, content: userNameOption.displayName + errorMessage }) : null
-			}
+			},
+			ariaLabel: userNameOption.displayName
 		});
 
 		let passwordOption = this._optionsMaps[ConnectionOptionSpecialType.password];
 		let passwordBuilder = DialogHelper.appendRow(this._tableContainer, passwordOption.displayName, 'connection-label', 'connection-input');
-		this._passwordInputBox = new InputBox(passwordBuilder.getHTMLElement(), this._contextViewService);
+		this._passwordInputBox = new InputBox(passwordBuilder.getHTMLElement(), this._contextViewService, { ariaLabel: passwordOption.displayName });
 		this._passwordInputBox.inputElement.type = 'password';
 		this._password = '';
 
@@ -158,9 +160,10 @@ export class ConnectionWidget {
 
 		this._databaseNameInputBox = new Dropdown(databaseNameBuilder.getHTMLElement(), this._contextViewService, this._themeService, {
 			values: [this._defaultDatabaseName, this._loadingDatabaseName],
-			strictSelection : false,
+			strictSelection: false,
 			placeholder: this._defaultDatabaseName,
-			maxHeight: 125
+			maxHeight: 125,
+			ariaLabel: databaseOption.displayName
 		});
 
 		let serverGroupLabel = localize('serverGroup', 'Server group');