Making infobox clickable (#18676)

* Making infobox clickable

* Making it accessible

* Moving API to proposed

* Matching styling from portal

* Fixing some styling

* Moving to proposed

* Removing extra spacing

* Registering and Unregistering listeners

* Fixing listeners

* Registering emitter only once.

* Changing emitter type from undefined to void

* Adding arialabel to clickable link

* Changing property name to suit its purpose

src/sql/base/browser/ui/infoBox/infoBox.ts

@@ -4,10 +4,15 @@
  *--------------------------------------------------------------------------------------------*/
 
 import 'vs/css!./media/infoBox';
-import { Disposable } from 'vs/base/common/lifecycle';
+import { Disposable, DisposableStore } from 'vs/base/common/lifecycle';
 import { alert, status } from 'vs/base/browser/ui/aria/aria';
 import { IThemable } from 'vs/base/common/styler';
 import { Color } from 'vs/base/common/color';
+import * as DOM from 'vs/base/browser/dom';
+import { Event, Emitter } from 'vs/base/common/event';
+import { Codicon } from 'vs/base/common/codicons';
+import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
+import { KeyCode } from 'vs/base/common/keyCodes';
 
 export interface IInfoBoxStyles {
 	informationBackground?: Color;
@@ -22,16 +27,25 @@ export interface InfoBoxOptions {
 	text: string;
 	style: InfoBoxStyle;
 	announceText?: boolean;
+	isClickable?: boolean;
+	clickableButtonAriaLabel?: string;
 }
 
 export class InfoBox extends Disposable implements IThemable {
 	private _imageElement: HTMLDivElement;
 	private _textElement: HTMLDivElement;
 	private _infoBoxElement: HTMLDivElement;
+	private _clickableIndicator: HTMLDivElement;
 	private _text = '';
 	private _infoBoxStyle: InfoBoxStyle = 'information';
 	private _styles: IInfoBoxStyles;
 	private _announceText: boolean = false;
+	private _isClickable: boolean = false;
+	private _clickableButtonAriaLabel: string;
+
+	private _clickListenersDisposableStore = new DisposableStore();
+	private _onDidClick: Emitter<void> = this._register(new Emitter<void>());
+	get onDidClick(): Event<void> { return this._onDidClick.event; }
 
 	constructor(container: HTMLElement, options?: InfoBoxOptions) {
 		super();
@@ -43,10 +57,16 @@ export class InfoBox extends Disposable implements IThemable {
 		container.appendChild(this._infoBoxElement);
 		this._infoBoxElement.appendChild(this._imageElement);
 		this._infoBoxElement.appendChild(this._textElement);
+		this._clickableIndicator = DOM.$('a');
+		this._clickableIndicator.classList.add('infobox-clickable-arrow', ...Codicon.arrowRight.classNamesArray);
+		this._infoBoxElement.appendChild(this._clickableIndicator);
+
 		if (options) {
 			this.infoBoxStyle = options.style;
 			this.text = options.text;
 			this._announceText = (options.announceText === true);
+			this.isClickable = (options.isClickable === true);
+			this.clickableButtonAriaLabel = options.clickableButtonAriaLabel;
 		}
 	}
 
@@ -96,6 +116,63 @@ export class InfoBox extends Disposable implements IThemable {
 		}
 	}
 
+	public get isClickable(): boolean {
+		return this._isClickable;
+	}
+
+	public set isClickable(v: boolean) {
+		if (this._isClickable === v) {
+			return;
+		}
+		this._isClickable = v;
+		if (this._isClickable) {
+			this._clickableIndicator.style.display = '';
+			this._clickableIndicator.tabIndex = 0;
+			this._infoBoxElement.style.cursor = 'pointer';
+			this._infoBoxElement.setAttribute('role', 'button');
+			this._textElement.style.maxWidth = 'calc(100% - 75px)';
+			this.registerClickListeners();
+		} else {
+			this._clickableIndicator.style.display = 'none';
+			this._clickableIndicator.tabIndex = -1;
+			this._infoBoxElement.style.cursor = 'default';
+			this._infoBoxElement.removeAttribute('role');
+			this._textElement.style.maxWidth = '';
+			this.unregisterClickListeners();
+		}
+	}
+
+	private registerClickListeners() {
+		this._clickListenersDisposableStore.add(DOM.addDisposableListener(this._infoBoxElement, DOM.EventType.CLICK, e => {
+			if (this._isClickable) {
+				this._onDidClick.fire();
+			}
+		}));
+
+		this._clickListenersDisposableStore.add(DOM.addDisposableListener(this._infoBoxElement, DOM.EventType.KEY_PRESS, e => {
+			const event = new StandardKeyboardEvent(e);
+			if (this._isClickable && (event.equals(KeyCode.Enter) || !event.equals(KeyCode.Space))) {
+				this._onDidClick.fire();
+				DOM.EventHelper.stop(e);
+				return;
+			}
+		}));
+	}
+
+	private unregisterClickListeners() {
+		this._clickListenersDisposableStore.clear();
+	}
+
+	public get clickableButtonAriaLabel(): string {
+		return this._clickableButtonAriaLabel;
+	}
+
+	public set clickableButtonAriaLabel(v: string) {
+		this._clickableButtonAriaLabel = v;
+		this._clickableIndicator.ariaLabel = this._clickableButtonAriaLabel;
+		this._clickableIndicator.title = this._clickableButtonAriaLabel;
+	}
+
 	private updateStyle(): void {
 		if (this._styles) {
 			let backgroundColor: Color;

src/sql/base/browser/ui/infoBox/media/infoBox.css

@@ -8,7 +8,6 @@
 	flex-direction: row;
 	width: 100%;
 	height: 100%;
-	overflow: scroll;
 }
 
 .infobox-image {
@@ -38,7 +37,12 @@
 }
 
 .infobox-text {
-	flex: 1 1 auto;
-	padding: 10px 0;
+	flex: 1 1 fit-content;
+	padding: 10px 0px 0px 0px;
 	user-select: text;
+	overflow: scroll;
+}
+
+.infobox-clickable-arrow {
+	padding: 10px 0px 0px 0px;
 }