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

* announce page change

* Use status() and update message

* localize the page number text

* comments

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 *ngIf="_dialogPane.pageNumber" class="wizardPageNumber">{{_dialogPane.pageNumberDisplayText}}</h1>
-				<h1 class="wizardPageTitle" role="alert">{{_dialogPane.title}}</h1>
+				<h1 class="wizardPageTitle">{{_dialogPane.title}}</h1>
 				<div *ngIf="_dialogPane.description">{{_dialogPane.description}}</div>
 			</div>
 			<div style="flex: 1 1 auto; position: relative;">

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) {

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;