From 93f5581bc7dbe7655c4df207aaa2d2c0b1b76135 Mon Sep 17 00:00:00 2001
From: Alan Ren <alanren@microsoft.com>
Date: Mon, 13 Feb 2023 13:41:01 -0800
Subject: [PATCH] add aria-label for step link in wizard (#21925)

* add aria label to wizard step link

* update aria label
---
 .../dialog/browser/wizardNavigation.component.ts     | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/sql/workbench/services/dialog/browser/wizardNavigation.component.ts b/src/sql/workbench/services/dialog/browser/wizardNavigation.component.ts
index fdaa6f84cc..2757baae32 100644
--- a/src/sql/workbench/services/dialog/browser/wizardNavigation.component.ts
+++ b/src/sql/workbench/services/dialog/browser/wizardNavigation.component.ts
@@ -6,12 +6,13 @@
 import 'vs/css!./media/wizardNavigation';
 import { Component, Inject, forwardRef, ElementRef, AfterViewInit, ChangeDetectorRef, ViewChild } from '@angular/core';
 import { Event, Emitter } from 'vs/base/common/event';
-import { Wizard } from '../common/dialogTypes';
+import { Wizard, WizardPage } from '../common/dialogTypes';
 import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
 import { SIDE_BAR_BACKGROUND } from 'vs/workbench/common/theme';
 import { IBootstrapParams } from 'sql/workbench/services/bootstrap/common/bootstrapParams';
 import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
 import { KeyCode } from 'vs/base/common/keyCodes';
+import { localize } from 'vs/nls';
 
 export class WizardNavigationParams implements IBootstrapParams {
 	wizard!: Wizard;
@@ -26,7 +27,7 @@ export class WizardNavigationParams implements IBootstrapParams {
 			<ng-container *ngFor="let item of _params.wizard.pages; let i = index">
 				<div class="wizardNavigation-pageNumber">
 					<div class="wizardNavigation-connector" [ngClass]="{'invisible': !hasTopConnector(i), 'active': isActive(i)}"></div>
-					<a [tabindex]="isActive(i) ? 0 : -1" [attr.href]="isActive(i) ? '' : null" [title]="item.title" (click)="navigate(i)" (keydown)="onKey($event,i)" [attr.aria-current]="isCurrentPage(i) ? 'step' : null" [attr.aria-disabled]="isActive(i) ? null : 'true'">
+					<a [tabindex]="isActive(i) ? 0 : -1" [attr.href]="isActive(i) ? '' : null" [title]="item.title" [attr.aria-label]="getStepAriaLabel(i, item)" (click)="navigate(i)" (keydown)="onKey($event,i)" [attr.aria-current]="isCurrentPage(i) ? 'step' : null" [attr.aria-disabled]="isActive(i) ? null : 'true'">
 						<span class="wizardNavigation-dot" [ngClass]="{'active': isActive(i), 'currentPage': isCurrentPage(i)}">{{i+1}}</span>
 					</a>
 					<div class="wizardNavigation-connector" [ngClass]="{'invisible': !hasBottomConnector(i), 'active': isActive(i)}"></div>
@@ -85,6 +86,13 @@ export class WizardNavigation implements AfterViewInit {
 		}
 	}
 
+	getStepAriaLabel(index: number, item: WizardPage): string {
+		return localize({
+			key: 'wizardNavigation.stepName',
+			comment: ['Name of a step in wizard. {0}: step number, {1}: step name.']
+		}, "Step {0}: {1}", index + 1, item.title);
+	}
+
 	private style(): void {
 		let theme = this._themeService.getColorTheme();
 		let navigationBackgroundColor = theme.getColor(SIDE_BAR_BACKGROUND);