From 308709b18a1e74a6e654d576d4d8997cca1f45a0 Mon Sep 17 00:00:00 2001 From: Alex Dima Date: Wed, 28 Jun 2017 17:22:27 +0200 Subject: [PATCH] Fixes Microsoft/monaco-editor#481: Have aria live work in IE and Edge with Narrator --- src/vs/base/browser/ui/aria/aria.ts | 40 ++++++++++++++++++++--------- 1 file changed, 28 insertions(+), 12 deletions(-) diff --git a/src/vs/base/browser/ui/aria/aria.ts b/src/vs/base/browser/ui/aria/aria.ts index ff89cc49172..40b28f69b44 100644 --- 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'; } \ No newline at end of file -- GitLab