ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-26 17:23:15 -05:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* Fix loading and clickable div screen reader issues

* Change back to default clickable to false
This commit is contained in:
Charles Gagnon
2020-02-07 13:27:29 -08:00
committed by GitHub
parent 39ac8498dc
commit fe9ffddd3b
5 changed files with 42 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/sql/workbench/browser/modelComponents/divContainer.component.ts
View File

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