From 1e1cd2f797f30875a223756c0803097e27348345 Mon Sep 17 00:00:00 2001
From: Alan Ren <alanren@microsoft.com>
Date: Tue, 17 Mar 2020 16:43:59 -0700
Subject: [PATCH] remove the alert role from the wizard page title (#9653)

* announce page change

* Use status() and update message

* localize the page number text

* comments
---
 .../services/dialog/browser/dialogContainer.component.ts | 4 ++--
 src/sql/workbench/services/dialog/browser/dialogPane.ts  | 5 +++++
 src/sql/workbench/services/dialog/browser/wizardModal.ts | 9 +++++++++
 3 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/sql/workbench/services/dialog/browser/dialogContainer.component.ts b/src/sql/workbench/services/dialog/browser/dialogContainer.component.ts
index 2807f7aa9a..a077b7f0ac 100644
--- a/src/sql/workbench/services/dialog/browser/dialogContainer.component.ts
+++ b/src/sql/workbench/services/dialog/browser/dialogContainer.component.ts
@@ -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;">
diff --git a/src/sql/workbench/services/dialog/browser/dialogPane.ts b/src/sql/workbench/services/dialog/browser/dialogPane.ts
index e0ff2f000d..cb83c7de03 100644
--- a/src/sql/workbench/services/dialog/browser/dialogPane.ts
+++ b/src/sql/workbench/services/dialog/browser/dialogPane.ts
@@ -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) {
diff --git a/src/sql/workbench/services/dialog/browser/wizardModal.ts b/src/sql/workbench/services/dialog/browser/wizardModal.ts
index 9de13d26f7..e3b439f5f6 100644
--- a/src/sql/workbench/services/dialog/browser/wizardModal.ts
+++ b/src/sql/workbench/services/dialog/browser/wizardModal.ts
@@ -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;