Connection inputs labels (#1129)

* adds aria-label to inputs for connection

* formatting
This commit is contained in:
Anthony Dresser
2018-04-12 11:29:16 -07:00
committed by GitHub
parent c33ddfabf9
commit efe8e81b6e
2 changed files with 13 additions and 5 deletions

View File

@@ -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 * Error Message to show if input is not part of the supplied list, only used if strictSelection = false
*/ */
errorMessage?: string; errorMessage?: string;
/**
* Value to use as aria-label for the input box
*/
ariaLabel?: string;
} }
export interface IDropdownStyles { export interface IDropdownStyles {
@@ -124,7 +128,8 @@ export class Dropdown extends Disposable {
validation: v => this._inputValidator(v) validation: v => this._inputValidator(v)
}, },
placeholder: this._options.placeholder, placeholder: this._options.placeholder,
actions: [this._toggleAction] actions: [this._toggleAction],
ariaLabel: this._options.ariaLabel
}); });
this._register(DOM.addDisposableListener(this._input.inputElement, DOM.EventType.FOCUS, () => { this._register(DOM.addDisposableListener(this._input.inputElement, DOM.EventType.FOCUS, () => {

View File

@@ -128,6 +128,7 @@ export class ConnectionWidget {
validationOptions: { validationOptions: {
validation: (value: string) => !value ? ({ type: MessageType.ERROR, content: serverNameOption.displayName + errorMessage }) : null validation: (value: string) => !value ? ({ type: MessageType.ERROR, content: serverNameOption.displayName + errorMessage }) : null
}, },
ariaLabel: serverNameOption.displayName
}); });
if (this._optionsMaps[ConnectionOptionSpecialType.authType]) { if (this._optionsMaps[ConnectionOptionSpecialType.authType]) {
@@ -141,12 +142,13 @@ export class ConnectionWidget {
this._userNameInputBox = new InputBox(userNameBuilder.getHTMLElement(), this._contextViewService, { this._userNameInputBox = new InputBox(userNameBuilder.getHTMLElement(), this._contextViewService, {
validationOptions: { validationOptions: {
validation: (value: string) => self.validateUsername(value, userNameOption.isRequired) ? ({ type: MessageType.ERROR, content: userNameOption.displayName + errorMessage }) : null 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 passwordOption = this._optionsMaps[ConnectionOptionSpecialType.password];
let passwordBuilder = DialogHelper.appendRow(this._tableContainer, passwordOption.displayName, 'connection-label', 'connection-input'); 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._passwordInputBox.inputElement.type = 'password';
this._password = ''; this._password = '';
@@ -160,7 +162,8 @@ export class ConnectionWidget {
values: [this._defaultDatabaseName, this._loadingDatabaseName], values: [this._defaultDatabaseName, this._loadingDatabaseName],
strictSelection: false, strictSelection: false,
placeholder: this._defaultDatabaseName, placeholder: this._defaultDatabaseName,
maxHeight: 125 maxHeight: 125,
ariaLabel: databaseOption.displayName
}); });
let serverGroupLabel = localize('serverGroup', 'Server group'); let serverGroupLabel = localize('serverGroup', 'Server group');