Make dialog accessible (#98969)

* test 1

* fixes dialog accessibility
This commit is contained in:
SteVen Batten 2020-06-01 10:55:13 -07:00 committed by GitHub
parent 9a314865ef
commit 60a69398c2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -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