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

@@ -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);

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>

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;

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>

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

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;
 }