Fixes microsoft/monaco-editor#481: Have aria live work in IE and Edge with Narrator

alexdima · alexdima · commit 308709b18a1e · 2017-06-28T17:23:02.000+02:00
diff --git a/src/vs/base/browser/ui/aria/aria.ts b/src/vs/base/browser/ui/aria/aria.ts
@@ -8,16 +8,28 @@
 import 'vs/css!./aria';
 import nls = require('vs/nls');
 import { isMacintosh } from 'vs/base/common/platform';
-import { Builder, $ } from 'vs/base/browser/builder';
+import * as dom from 'vs/base/browser/dom';
 
-let ariaContainer: Builder;
-let alertContainer: Builder;
-let statusContainer: Builder;
+let ariaContainer: HTMLElement;
+let alertContainer: HTMLElement;
+let statusContainer: HTMLElement;
 export function setARIAContainer(parent: HTMLElement) {
-	ariaContainer = $('.monaco-aria-container').appendTo(parent);
+	ariaContainer = document.createElement('div');
+	ariaContainer.className = 'monaco-aria-container';
 
-	alertContainer = $('.monaco-alert').appendTo(ariaContainer).attr({ 'role': 'alert', 'aria-atomic': 'true' });
-	statusContainer = $('.monaco-status').appendTo(ariaContainer).attr({ 'role': 'status', 'aria-atomic': 'true' });
+	alertContainer = document.createElement('div');
+	alertContainer.className = 'monaco-alert';
+	alertContainer.setAttribute('role', 'alert');
+	alertContainer.setAttribute('aria-atomic', 'true');
+	ariaContainer.appendChild(alertContainer);
+
+	statusContainer = document.createElement('div');
+	statusContainer.className = 'monaco-status';
+	statusContainer.setAttribute('role', 'status');
+	statusContainer.setAttribute('aria-atomic', 'true');
+	ariaContainer.appendChild(statusContainer);
+
+	parent.appendChild(ariaContainer);
 }
 
 /**
@@ -38,16 +50,20 @@ export function status(msg: string): void {
 	}
 }
 
-function insertMessage(target: Builder, msg: string): void {
+function insertMessage(target: HTMLElement, msg: string): void {
 	if (!ariaContainer) {
 		// console.warn('ARIA support needs a container. Call setARIAContainer() first.');
 		return;
 	}
-
-	if (target.getHTMLElement().textContent === msg) {
+	if (target.textContent === msg) {
 		msg = nls.localize('repeated', "{0} (occurred again)", msg);
 	}
 
-	$(target).empty();
-	$(target).text(msg);
+	dom.clearNode(target);
+	target.textContent = msg;
+
+
+	// See https://www.paciellogroup.com/blog/2012/06/html5-accessibility-chops-aria-rolealert-browser-support/
+	target.style.visibility = 'hidden';
+	target.style.visibility = 'visible';
 }
