Make dialog accessible (microsoft#98969)

sbatten · web-flow · commit 60a69398c28c · 2020-06-01T10:55:13.000-07:00
* test 1

* fixes dialog accessibility
diff --git a/src/vs/base/browser/ui/dialog/dialog.ts b/src/vs/base/browser/ui/dialog/dialog.ts
@@ -73,6 +73,7 @@ export class Dialog extends Disposable {
 		this.modal = this.container.appendChild($(`.monaco-dialog-modal-block${options.type === 'pending' ? '.dimmed' : ''}`));
 		this.shadowElement = this.modal.appendChild($('.dialog-shadow'));
 		this.element = this.shadowElement.appendChild($('.monaco-dialog-box'));
+		this.element.setAttribute('role', 'dialog');
 		hide(this.element);
 
 		// If no button is provided, default to OK
@@ -109,6 +110,28 @@ export class Dialog extends Disposable {
 		this.toolbarContainer = toolbarRowElement.appendChild($('.dialog-toolbar'));
 	}
 
+	private getAriaLabel(): string {
+		let typeLabel = nls.localize('dialogInfoMessage', 'Info');
+		switch (this.options.type) {
+			case 'error':
+				nls.localize('dialogErrorMessage', 'Error');
+				break;
+			case 'warning':
+				nls.localize('dialogWarningMessage', 'Warning');
+				break;
+			case 'pending':
+				nls.localize('dialogPendingMessage', 'In Progress');
+				break;
+			case 'none':
+			case 'info':
+			case 'question':
+			default:
+				break;
+		}
+
+		return `${typeLabel}: ${this.message} ${this.options.detail || ''}`;
+	}
+
 	updateMessage(message: string): void {
 		if (this.messageDetailElement) {
 			this.messageDetailElement.innerText = message;
@@ -242,7 +265,7 @@ export class Dialog extends Disposable {
 
 			this.applyStyles();
 
-			this.element.setAttribute('aria-label', this.message);
+			this.element.setAttribute('aria-label', this.getAriaLabel());
 			show(this.element);
 
 			// Focus first element
