Fix loading and clickable div screen reader issues (#9088)

* Fix loading and clickable div screen reader issues

* Change back to default clickable to false

src/sql/workbench/browser/modelComponents/divContainer.component.ts

@@ -6,7 +6,7 @@ import 'vs/css!./media/divContainer';
 
 import {
 	Component, Input, Inject, ChangeDetectorRef, forwardRef,
-	ViewChild, ElementRef, OnDestroy,
+	ViewChild, ElementRef, OnDestroy, Renderer2, AfterViewInit
 } from '@angular/core';
 
 import * as azdata from 'azdata';
@@ -24,7 +24,7 @@ class DivItem {
 
 @Component({
 	template: `
-		<div #divContainer *ngIf="items" class="divContainer" [style.height]="height" [style.width]="width" [style.display]="display" (click)="onClick()" (keyup)="onKey($event)" [attr.role]="ariaRole" [attr.aria-selected]="ariaSelected">
+		<div #divContainer *ngIf="items" class="divContainer" [style.height]="height" [style.width]="width" [style.display]="display" (keyup)="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>
@@ -32,22 +32,30 @@ class DivItem {
 		</div>
 	`
 })
-export default class DivContainer extends ContainerBase<azdata.DivItemLayout> implements IComponent, OnDestroy {
+export default class DivContainer extends ContainerBase<azdata.DivItemLayout> implements IComponent, OnDestroy, AfterViewInit {
 	@Input() descriptor: IComponentDescriptor;
 	@Input() modelStore: IModelStore;
 	@ViewChild('divContainer', { read: ElementRef }) divContainer;
 	private _height: string;
 	private _width: string;
 	private _overflowY: string;
+	private viewInitialized: boolean;
+	private cancelClick: Function;
 
 	constructor(
 		@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef,
-		@Inject(forwardRef(() => ElementRef)) el: ElementRef
+		@Inject(forwardRef(() => ElementRef)) el: ElementRef,
+		@Inject(forwardRef(() => Renderer2)) private renderer: Renderer2
 	) {
 		super(changeRef, el);
 		this._overflowY = '';	// default
 	}
 
+	ngAfterViewInit() {
+		this.viewInitialized = true;
+		this.updateClickListener();
+	}
+
 	ngOnInit(): void {
 		this.baseInit();
 	}
@@ -97,6 +105,7 @@ export default class DivContainer extends ContainerBase<azdata.DivItemLayout> im
 			element.removeAttribute('tabIndex');
 			element.style.cursor = 'default';
 		}
+		this.updateClickListener();
 	}
 
 	private onClick() {
@@ -148,4 +157,17 @@ export default class DivContainer extends ContainerBase<azdata.DivItemLayout> im
 	public getItemStyles(item: DivItem): { [key: string]: string } {
 		return item.config && item.config.CSSStyles ? item.config.CSSStyles : {};
 	}
+
+	private updateClickListener(): void {
+		// We can't hook into the listener until the view is initialized
+		if (!this.viewInitialized) {
+			return;
+		}
+		if (this.clickable && !this.cancelClick) {
+			this.cancelClick = this.renderer.listen(this.divContainer.nativeElement, 'click', () => this.onClick());
+		} else if (!this.clickable) {
+			this.cancelClick();
+			this.cancelClick = undefined;
+		}
+	}
 }

src/sql/workbench/browser/modelComponents/loadingComponent.component.ts

@@ -13,13 +13,11 @@ import * as azdata from 'azdata';
 import { ComponentBase } from 'sql/workbench/browser/modelComponents/componentBase';
 import { localize } from 'vs/nls';
 import { IComponent, IComponentDescriptor, IModelStore } from 'sql/platform/dashboard/browser/interfaces';
+import { status } from 'vs/base/browser/ui/aria/aria';
 
 @Component({
 	selector: 'modelview-loadingComponent',
 	template: `
-		<div role="status" aria-live="polite" class="modelview-loading-component-status-message">
-			{{getStatusText()}}
-		</div>
 		<div class="modelview-loadingComponent-container" aria-busy="true" *ngIf="loading">
 			<div class="modelview-loadingComponent-spinner" [title]="getStatusText()" #spinnerElement></div>
 			<div *ngIf="showText" class="modelview-loadingComponent-status-text">{{getStatusText()}}</div>
@@ -66,7 +64,11 @@ export default class LoadingComponent extends ComponentBase implements IComponen
 	}
 
 	public setProperties(properties: { [key: string]: any; }): void {
+		const wasLoading = this.loading;
 		super.setProperties(properties);
+		if (wasLoading && !this.loading) {
+			status(this.getStatusText());
+		}
 	}
 
 	public get loading(): boolean {

src/sql/workbench/browser/modelComponents/media/loadingComponent.css

@@ -32,14 +32,3 @@
 .modelview-loadingComponent-content-loading {
 	display: none;
 }
-
-/* We want to make this on DOM but not visible so that screen reader can read the status message */
-
-.modelview-loading-component-status-message {
-	top: -1;
-	left: -1px;
-	width: 1px;
-	height: 1px;
-	position: absolute;
-	overflow: hidden;
-}