From 748bb531736ba860f8c5f20dd374371c2ef799bd Mon Sep 17 00:00:00 2001
From: Alan Ren <alanren@microsoft.com>
Date: Mon, 2 Aug 2021 10:39:36 -0700
Subject: [PATCH] handle the keyboard event properly in hyperlink (#16508)

* handle the keyboard event properly in hyperlink

* fix a couple more issues
---
 src/sql/workbench/browser/modal/modal.ts        |  1 +
 .../declarativeTable.component.html             |  2 +-
 .../declarativeTable.component.ts               | 15 ++++++++++++++-
 .../modelComponents/divContainer.component.ts   |  2 +-
 .../modelComponents/hyperlink.component.ts      | 17 +++++++++++++++--
 .../modelComponents/media/declarativeTable.css  |  4 ++++
 6 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/src/sql/workbench/browser/modal/modal.ts b/src/sql/workbench/browser/modal/modal.ts
index 5408a19139..cd391e9ac0 100644
--- a/src/sql/workbench/browser/modal/modal.ts
+++ b/src/sql/workbench/browser/modal/modal.ts
@@ -449,6 +449,7 @@ export abstract class Modal extends Disposable implements IThemable {
 			if (context[context.length - 1] === this._staticKey) {
 				let event = new StandardKeyboardEvent(e);
 				if (event.equals(KeyCode.Enter)) {
+					DOM.EventHelper.stop(e, true);
 					this.onAccept(event);
 				} else if (event.equals(KeyCode.Escape)) {
 					DOM.EventHelper.stop(e, true);
diff --git a/src/sql/workbench/browser/modelComponents/declarativeTable.component.html b/src/sql/workbench/browser/modelComponents/declarativeTable.component.html
index 52f58909b3..a8538059d8 100644
--- a/src/sql/workbench/browser/modelComponents/declarativeTable.component.html
+++ b/src/sql/workbench/browser/modelComponents/declarativeTable.component.html
@@ -45,7 +45,7 @@
 							<model-component-wrapper *ngIf="isComponent(c) && getItemDescriptor(cellData.value)"
 								[descriptor]="getItemDescriptor(cellData.value)" [modelStore]="modelStore">
 							</model-component-wrapper>
-							<button *ngIf="isContextMenuColumn(c)" [title]="contextMenuButtonTitle" [attr.aria-label]="contextMenuButtonTitle" class="codicon toggle-more" (click)="onContextMenuRequested($event,r,c)">
+							<button *ngIf="isContextMenuColumn(c)" [title]="contextMenuButtonTitle" [attr.aria-label]="contextMenuButtonTitle" class="codicon toggle-more" (click)="onContextMenuButtonClick($event,r,c)" (keydown)="onContextMenuButtonKeyDown($event,r,c)">
 							</button>
 						</td>
 					</ng-container>
diff --git a/src/sql/workbench/browser/modelComponents/declarativeTable.component.ts b/src/sql/workbench/browser/modelComponents/declarativeTable.component.ts
index f469fd99eb..556ee78278 100644
--- a/src/sql/workbench/browser/modelComponents/declarativeTable.component.ts
+++ b/src/sql/workbench/browser/modelComponents/declarativeTable.component.ts
@@ -361,7 +361,20 @@ export default class DeclarativeTableComponent extends ContainerBase<any, azdata
 		return localize('declarativeTable.showActions', "Show Actions");
 	}
 
-	public onContextMenuRequested(event: MouseEvent, row: number, column: number) {
+	public onContextMenuButtonKeyDown(event: KeyboardEvent, row: number, column: number): void {
+		const keyboardEvent = new StandardKeyboardEvent(event);
+		if (keyboardEvent.keyCode === KeyCode.Space ||
+			keyboardEvent.keyCode === KeyCode.Enter) {
+			this.showContextMenu(event, row, column);
+		}
+	}
+
+	public onContextMenuButtonClick(event: MouseEvent, row: number, column: number): void {
+		this.showContextMenu(event, row, column);
+	}
+
+	private showContextMenu(event: MouseEvent | KeyboardEvent, row: number, column: number): void {
+		EventHelper.stop(event, true);
 		const cellValue = this.data[row][column].value as azdata.DeclarativeTableMenuCellValue;
 		const actions: IAction[] = [];
 		let addSeparator = false;
diff --git a/src/sql/workbench/browser/modelComponents/divContainer.component.ts b/src/sql/workbench/browser/modelComponents/divContainer.component.ts
index ebc836b3d8..55999c1399 100644
--- a/src/sql/workbench/browser/modelComponents/divContainer.component.ts
+++ b/src/sql/workbench/browser/modelComponents/divContainer.component.ts
@@ -27,7 +27,7 @@ class DivItem {
 
 @Component({
 	template: `
-		<div #divContainer *ngIf="items" [ngClass] = "{'divContainer': true, 'clickable-divContainer': clickable}" [ngStyle]="CSSStyles" [style.height]="height" [style.width]="width" [style.display]="display" (keyup)="onKey($event)" [attr.role]="ariaRole" [attr.aria-selected]="ariaSelected">
+		<div #divContainer *ngIf="items" [ngClass] = "{'divContainer': true, 'clickable-divContainer': clickable}" [ngStyle]="CSSStyles" [style.height]="height" [style.width]="width" [style.display]="display" (keydown)="onKey($event)" [attr.role]="ariaRole" [attr.aria-selected]="ariaSelected">
 			<div *ngFor="let item of items" [style.order]="getItemOrder(item)" [ngStyle]="getItemStyles(item)">
 				<model-component-wrapper [descriptor]="item.descriptor" [modelStore]="modelStore">
 				</model-component-wrapper>
diff --git a/src/sql/workbench/browser/modelComponents/hyperlink.component.ts b/src/sql/workbench/browser/modelComponents/hyperlink.component.ts
index c6d0d6defb..e36fab3b0a 100644
--- a/src/sql/workbench/browser/modelComponents/hyperlink.component.ts
+++ b/src/sql/workbench/browser/modelComponents/hyperlink.component.ts
@@ -18,6 +18,10 @@ import { textLinkForeground, textLinkActiveForeground, focusBorder } from 'vs/pl
 import { IOpenerService } from 'vs/platform/opener/common/opener';
 import * as DOM from 'vs/base/browser/dom';
 import { ILogService } from 'vs/platform/log/common/log';
+import { domEvent } from 'vs/base/browser/event';
+import { Event } from 'vs/base/common/event';
+import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
+import { KeyCode } from 'vs/base/common/keyCodes';
 
 @Component({
 	selector: 'modelview-hyperlink',
@@ -37,7 +41,16 @@ export default class HyperlinkComponent extends TitledComponent<azdata.Hyperlink
 	}
 
 	ngAfterViewInit(): void {
-		this._register(DOM.addDisposableListener(this._el.nativeElement, 'click', (e: MouseEvent) => this.onClick(e)));
+		const onClick = domEvent(this._el.nativeElement, 'click');
+		const onEnter = Event.chain(domEvent(this._el.nativeElement, 'keydown'))
+			.map(e => new StandardKeyboardEvent(e))
+			.filter(e => e.keyCode === KeyCode.Enter)
+			.event;
+		const onOpen = Event.any<DOM.EventLike>(onClick, onEnter);
+
+		this._register(onOpen(e => {
+			this.open(e);
+		}));
 		this.baseInit();
 	}
 
@@ -77,7 +90,7 @@ export default class HyperlinkComponent extends TitledComponent<azdata.Hyperlink
 		return this.title || this.url || '';
 	}
 
-	public onClick(e: MouseEvent): void {
+	public open(e: DOM.EventLike): void {
 		this.fireEvent({
 			eventType: ComponentEventType.onDidClick,
 			args: undefined
diff --git a/src/sql/workbench/browser/modelComponents/media/declarativeTable.css b/src/sql/workbench/browser/modelComponents/media/declarativeTable.css
index cefb3c298a..827f2359db 100644
--- a/src/sql/workbench/browser/modelComponents/media/declarativeTable.css
+++ b/src/sql/workbench/browser/modelComponents/media/declarativeTable.css
@@ -28,6 +28,10 @@
 	cursor: pointer;
 }
 
+.declarative-table .declarative-table-cell .codicon.toggle-more:focus {
+	outline-style: solid;
+}
+
 .declarative-table checkbox input[type='checkbox'] {
 	margin: 3px;
 }