From 083495a9fb96e237832f2a7826dad1bf60a21cd2 Mon Sep 17 00:00:00 2001
From: Benjamin Pasero <benjpas@microsoft.com>
Date: Tue, 2 Feb 2016 12:54:40 +0100
Subject: [PATCH] input box: set aria-invalid based on validation

---
 src/vs/base/browser/ui/inputbox/inputBox.ts | 41 ++++++++++-----------
 1 file changed, 19 insertions(+), 22 deletions(-)

diff --git a/src/vs/base/browser/ui/inputbox/inputBox.ts b/src/vs/base/browser/ui/inputbox/inputBox.ts
index 5d76d78206f..10132d3eb53 100644
--- a/src/vs/base/browser/ui/inputbox/inputBox.ts
+++ b/src/vs/base/browser/ui/inputbox/inputBox.ts
@@ -20,12 +20,12 @@ import {Widget} from 'vs/base/browser/ui/widget';
 let $ = dom.emmet;
 
 export interface IInputOptions {
-	placeholder?:string;
-	ariaLabel?:string;
-	type?:string;
-	validationOptions?:IInputValidationOptions;
+	placeholder?: string;
+	ariaLabel?: string;
+	type?: string;
+	validationOptions?: IInputValidationOptions;
 	flexibleHeight?: boolean;
-	actions?:IAction[];
+	actions?: IAction[];
 }
 
 export interface IInputValidator {
@@ -55,9 +55,7 @@ export interface IRange {
 }
 
 export class InputBox extends Widget {
-
 	private contextViewProvider: IContextViewProvider;
-
 	private element: HTMLElement;
 	private input: HTMLInputElement;
 	private mirror: HTMLElement;
@@ -77,12 +75,11 @@ export class InputBox extends Widget {
 	private _onDidHeightChange = this._register(new Emitter<number>());
 	public onDidHeightChange: Event<number> = this._onDidHeightChange.event;
 
-	constructor(container:HTMLElement, contextViewProvider: IContextViewProvider, options?: IInputOptions) {
+	constructor(container: HTMLElement, contextViewProvider: IContextViewProvider, options?: IInputOptions) {
 		super();
 
 		this.contextViewProvider = contextViewProvider;
 		this.options = options || Object.create(null);
-		// this.toDispose = [];
 		this.message = null;
 		this.cachedHeight = null;
 		this.placeholder = this.options.placeholder || '';
@@ -98,7 +95,7 @@ export class InputBox extends Widget {
 		let tagName = this.options.flexibleHeight ? 'textarea' : 'input';
 
 		let wrapper = dom.append(this.element, $('.wrapper'));
-		this.input = <HTMLInputElement> dom.append(wrapper, $(tagName + '.input'));
+		this.input = <HTMLInputElement>dom.append(wrapper, $(tagName + '.input'));
 		this.input.setAttribute('autocorrect', 'off');
 		this.input.setAttribute('autocapitalize', 'off');
 		this.input.setAttribute('spellcheck', 'false');
@@ -127,7 +124,6 @@ export class InputBox extends Widget {
 
 		// Add placeholder shim for IE because IE decides to hide the placeholder on focus (we dont want that!)
 		if (this.placeholder && Bal.isIE11orEarlier) {
-
 			this.onclick(this.input, (e) => {
 				dom.EventHelper.stop(e, true);
 				this.input.focus();
@@ -138,7 +134,7 @@ export class InputBox extends Widget {
 			}
 		}
 
-		setTimeout(() =>this.layout(), 0);
+		setTimeout(() => this.layout(), 0);
 
 		// Support actions
 		if (this.options.actions) {
@@ -155,7 +151,7 @@ export class InputBox extends Widget {
 		this._showMessage();
 	}
 
-	public setPlaceHolder(placeHolder:string): void {
+	public setPlaceHolder(placeHolder: string): void {
 		if (this.input) {
 			this.input.setAttribute('placeholder', placeHolder);
 		}
@@ -169,11 +165,11 @@ export class InputBox extends Widget {
 		return this.input;
 	}
 
-	public get value():string {
+	public get value(): string {
 		return this.input.value;
 	}
 
-	public set value(newValue:string) {
+	public set value(newValue: string) {
 		if (this.input.value !== newValue) {
 			this.input.value = newValue;
 			this.onValueChange();
@@ -213,7 +209,7 @@ export class InputBox extends Widget {
 		this._hideMessage();
 	}
 
-	public setEnabled(enabled:boolean): void {
+	public setEnabled(enabled: boolean): void {
 		if (enabled) {
 			this.enable();
 		} else {
@@ -221,15 +217,15 @@ export class InputBox extends Widget {
 		}
 	}
 
-	public get width():number {
+	public get width(): number {
 		return dom.getTotalWidth(this.input);
 	}
 
-	public set width(width:number) {
+	public set width(width: number) {
 		this.input.style.width = width + 'px';
 	}
 
-	public showMessage(message: IMessage, force?:boolean): void {
+	public showMessage(message: IMessage, force?: boolean): void {
 		this.message = message;
 
 		dom.removeClass(this.element, 'idle');
@@ -265,11 +261,12 @@ export class InputBox extends Widget {
 			result = this.validation(this.value);
 
 			if (!result) {
+				this.inputElement.removeAttribute('aria-invalid');
 				this.hideMessage();
 			} else {
+				this.inputElement.setAttribute('aria-invalid', 'true');
 				this.showMessage(result);
 			}
-
 		}
 
 		return !result;
@@ -311,7 +308,7 @@ export class InputBox extends Widget {
 					renderOptions.text = this.message.content;
 				}
 
-				let spanElement:HTMLElement = <any>renderHtml(renderOptions);
+				let spanElement: HTMLElement = <any>renderHtml(renderOptions);
 				dom.addClass(spanElement, this.classForType(this.message.type));
 				dom.append(div, spanElement);
 				return null;
@@ -373,4 +370,4 @@ export class InputBox extends Widget {
 
 		super.dispose();
 	}
-}
+}
\ No newline at end of file