remove the alert role from the wizard page title (#9653)

* announce page change

* Use status() and update message

* localize the page number text

* comments
This commit is contained in:
Alan Ren
2020-03-17 16:43:59 -07:00
committed by GitHub
parent cc6cc2889a
commit 1e1cd2f797
3 changed files with 16 additions and 2 deletions

View File

@@ -28,8 +28,8 @@ export interface DialogComponentParams extends IBootstrapParams {
template: `
<div class="dialogContainer" *ngIf="_dialogPane && _dialogPane.displayPageTitle">
<div class="dialogModal-wizardHeader" *ngIf="_dialogPane && _dialogPane.displayPageTitle">
<h1 *ngIf="_dialogPane.pageNumber" class="wizardPageNumber">Step {{_dialogPane.pageNumber}}</h1>
<h1 class="wizardPageTitle" role="alert">{{_dialogPane.title}}</h1>
<h1 *ngIf="_dialogPane.pageNumber" class="wizardPageNumber">{{_dialogPane.pageNumberDisplayText}}</h1>
<h1 class="wizardPageTitle">{{_dialogPane.title}}</h1>
<div *ngIf="_dialogPane.description">{{_dialogPane.description}}</div>
</div>
<div style="flex: 1 1 auto; position: relative;">

View File

@@ -21,6 +21,7 @@ import { Emitter } from 'vs/base/common/event';
import { IThemeService } from 'vs/platform/theme/common/themeService';
import { IThemable } from 'vs/base/common/styler';
import { attachTabbedPanelStyler } from 'sql/workbench/common/styler';
import { localize } from 'vs/nls';
export class DialogPane extends Disposable implements IThemable {
private _tabbedPanel: TabbedPanel;
@@ -47,6 +48,10 @@ export class DialogPane extends Disposable implements IThemable {
super();
}
public get pageNumberDisplayText(): string {
return localize('wizardPageNumberDisplayText', "Step {0}", this.pageNumber);
}
public createBody(container: HTMLElement): HTMLElement {
this._body = DOM.append(container, DOM.$('div.dialogModal-pane'));
if (typeof this._content === 'string' || this._content.length < 2) {

View File

@@ -26,6 +26,8 @@ import { IAdsTelemetryService } from 'sql/platform/telemetry/common/telemetry';
import { onUnexpectedError } from 'vs/base/common/errors';
import { attachModalDialogStyler } from 'sql/workbench/common/styler';
import { ILayoutService } from 'vs/platform/layout/browser/layoutService';
import { status } from 'vs/base/browser/ui/aria/aria';
import { localize } from 'vs/nls';
export class WizardModal extends Modal {
private _dialogPanes = new Map<WizardPage, DialogPane>();
@@ -184,13 +186,20 @@ export class WizardModal extends Modal {
if (validate && !await this.validateNavigation(index)) {
return;
}
let dialogPaneToShow: DialogPane | undefined = undefined;
this._dialogPanes.forEach((dialogPane, page) => {
if (page === pageToShow) {
dialogPaneToShow = dialogPane;
dialogPane.show(focus);
} else {
dialogPane.hide();
}
});
if (dialogPaneToShow) {
status(`${dialogPaneToShow.pageNumberDisplayText} ${dialogPaneToShow.title}`);
}
this.setButtonsForPage(index);
this._wizard.setCurrentPage(index);
let currentPageValid = this._wizard.pages[this._wizard.currentPage].valid;