From 3be00b16357f21a4602b5039f1ce90773f91f05d Mon Sep 17 00:00:00 2001
From: Alan Ren <alanren@microsoft.com>
Date: Tue, 10 Nov 2020 23:00:03 -0800
Subject: [PATCH] add tabindex and handle keyboard selection (#13348)

---
 .../dialog/browser/wizardNavigation.component.ts  | 15 +++++++++++++--
 1 file changed, 13 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 a5905dfd34..6ce6516821 100644
--- a/src/sql/workbench/services/dialog/browser/wizardNavigation.component.ts
+++ b/src/sql/workbench/services/dialog/browser/wizardNavigation.component.ts
@@ -10,6 +10,8 @@ import { Wizard } 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';
 
 export class WizardNavigationParams implements IBootstrapParams {
 	wizard!: Wizard;
@@ -24,8 +26,8 @@ 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 [attr.href]="isActive(i) ? '' : null" [title]="item.title">
-						<span class="wizardNavigation-dot" [ngClass]="{'active': isActive(i), 'currentPage': isCurrentPage(i)}" (click)="navigate(i)">{{i+1}}</span>
+					<a [tabindex]="isActive(i) ? 0 : -1" [attr.href]="isActive(i) ? '' : null" [title]="item.title" (click)="navigate(i)" (keydown)="onKey($event,i)">
+						<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>
 				</div>
@@ -74,6 +76,15 @@ export class WizardNavigation implements AfterViewInit {
 		}
 	}
 
+	onKey(e: KeyboardEvent, index: number): void {
+		const event = new StandardKeyboardEvent(e);
+		if (event.equals(KeyCode.Space) || event.equals(KeyCode.Enter)) {
+			this.navigate(index);
+			e.preventDefault();
+			e.stopPropagation();
+		}
+	}
+
 	private style(): void {
 		let theme = this._themeService.getColorTheme();
 		let navigationBackgroundColor = theme.getColor(SIDE_BAR_BACKGROUND);