quick input - allow to set aria-label

Benjamin Pasero · Benjamin Pasero · commit 618ea672fa5a · 2020-03-07T16:34:39.000+01:00
diff --git a/src/vs/base/browser/ui/inputbox/inputBox.ts b/src/vs/base/browser/ui/inputbox/inputBox.ts
@@ -248,6 +248,10 @@ export class InputBox extends Widget {
 		}
 	}
 
+	public getAriaLabel(): string {
+		return this.ariaLabel;
+	}
+
 	public get mirrorElement(): HTMLElement | undefined {
 		return this.mirror;
 	}
diff --git a/src/vs/base/parts/quickinput/browser/quickInput.ts b/src/vs/base/parts/quickinput/browser/quickInput.ts
@@ -374,9 +374,10 @@ class QuickInput extends Disposable implements IQuickInput {
 
 class QuickPick<T extends IQuickPickItem> extends QuickInput implements IQuickPick<T> {
 
-	private static readonly INPUT_BOX_ARIA_LABEL = localize('quickInputBox.ariaLabel', "Type to narrow down results.");
+	private static readonly DEFAULT_ARIA_LABEL = localize('quickInputBox.ariaLabel', "Type to narrow down results.");
 
 	private _value = '';
+	private _ariaLabel = QuickPick.DEFAULT_ARIA_LABEL;
 	private _placeholder: string | undefined;
 	private readonly onDidChangeValueEmitter = this._register(new Emitter<string>());
 	private readonly onDidAcceptEmitter = this._register(new Emitter<void>());
@@ -419,6 +420,15 @@ class QuickPick<T extends IQuickPickItem> extends QuickInput implements IQuickPi
 
 	filterValue = (value: string) => value;
 
+	set ariaLabel(ariaLabel: string) {
+		this._ariaLabel = ariaLabel || QuickPick.DEFAULT_ARIA_LABEL;
+		this.update();
+	}
+
+	get ariaLabel() {
+		return this._ariaLabel;
+	}
+
 	get placeholder() {
 		return this._placeholder;
 	}
@@ -775,6 +785,9 @@ class QuickPick<T extends IQuickPickItem> extends QuickInput implements IQuickPi
 		if (this.ui.inputBox.placeholder !== (this.placeholder || '')) {
 			this.ui.inputBox.placeholder = (this.placeholder || '');
 		}
+		if (this.ui.inputBox.ariaLabel !== this.ariaLabel) {
+			this.ui.inputBox.ariaLabel = this.ariaLabel;
+		}
 		if (this.itemsUpdated) {
 			this.itemsUpdated = false;
 			this.ui.list.setElements(this.items);
@@ -825,7 +838,6 @@ class QuickPick<T extends IQuickPickItem> extends QuickInput implements IQuickPi
 		this.ui.list.matchOnLabel = this.matchOnLabel;
 		this.ui.list.sortByLabel = this.sortByLabel;
 		this.ui.setComboboxAccessibility(true);
-		this.ui.inputBox.setAttribute('aria-label', QuickPick.INPUT_BOX_ARIA_LABEL);
 	}
 }
 
@@ -1383,7 +1395,7 @@ export class QuickInputController extends Disposable {
 		ui.list.sortByLabel = true;
 		ui.ignoreFocusOut = false;
 		this.setComboboxAccessibility(false);
-		ui.inputBox.removeAttribute('aria-label');
+		ui.inputBox.ariaLabel = '';
 
 		const backKeybindingLabel = this.options.backKeybindingLabel();
 		backButton.tooltip = backKeybindingLabel ? localize('quickInput.backWithKeybinding', "Back ({0})", backKeybindingLabel) : localize('quickInput.back', "Back");
diff --git a/src/vs/base/parts/quickinput/browser/quickInputBox.ts b/src/vs/base/parts/quickinput/browser/quickInputBox.ts
@@ -66,6 +66,14 @@ export class QuickInputBox extends Disposable {
 		this.inputBox.setPlaceHolder(placeholder);
 	}
 
+	get ariaLabel() {
+		return this.inputBox.getAriaLabel();
+	}
+
+	set ariaLabel(ariaLabel: string) {
+		this.inputBox.setAriaLabel(ariaLabel);
+	}
+
 	get password() {
 		return this.inputBox.inputElement.type === 'password';
 	}
diff --git a/src/vs/base/parts/quickinput/common/quickInput.ts b/src/vs/base/parts/quickinput/common/quickInput.ts
@@ -163,6 +163,8 @@ export interface IQuickPick<T extends IQuickPickItem> extends IQuickInput {
 	 */
 	filterValue: (value: string) => string;
 
+	ariaLabel: string;
+
 	placeholder: string | undefined;
 
 	readonly onDidChangeValue: Event<string>;

Original file line number	Diff line number	Diff line change
`@@ -248,6 +248,10 @@ export class InputBox extends Widget {`
`248`	`248`	`}`
`249`	`249`	`}`
`250`	`250`
	`251`	`+ public getAriaLabel(): string {`
	`252`	`+ return this.ariaLabel;`
	`253`	`+ }`
	`254`	`+`
`251`	`255`	`public get mirrorElement(): HTMLElement \| undefined {`
`252`	`256`	`return this.mirror;`
`253`	`257`	`}`
Original file line number	Diff line number	Diff line change
`@@ -66,6 +66,14 @@ export class QuickInputBox extends Disposable {`
`66`	`66`	`this.inputBox.setPlaceHolder(placeholder);`
`67`	`67`	`}`
`68`	`68`
	`69`	`+ get ariaLabel() {`
	`70`	`+ return this.inputBox.getAriaLabel();`
	`71`	`+ }`
	`72`	`+`
	`73`	`+ set ariaLabel(ariaLabel: string) {`
	`74`	`+ this.inputBox.setAriaLabel(ariaLabel);`
	`75`	`+ }`
	`76`	`+`
`69`	`77`	`get password() {`
`70`	`78`	`return this.inputBox.inputElement.type === 'password';`
`71`	`79`	`}`