ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-18 09:35:39 -05:00
Code Issues Packages Projects Releases Wiki Activity

Fix accessibility issues with Manage Access dialog (#8586)

Browse Source 
* Fix accessibility issues with Manage Access dialog

* implement more property interfaces

* Fix lgtm errors

* Simplify condition
This commit is contained in:
Charles Gagnon
2019-12-06 15:09:42 -08:00
committed by GitHub
parent 18ab73cc1d
commit 6e8cc3aaca
14 changed files with 499 additions and 383 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/sql/workbench/browser/modelComponents/button.component.ts
View File

@@ -184,12 +184,4 @@ export default class ButtonComponent extends ComponentWithIconBase implements IC
private setFileProperties(properties: azdata.ButtonProperties, isFile: boolean): void {
properties.isFile = isFile;
}
private get title(): string {
return this.getPropertyOrDefault<azdata.ButtonProperties, string>((props) => props.title, '');
}
private set title(newValue: string) {
this.setPropertyFromUI<azdata.ButtonProperties, string>((properties, title) => { properties.title = title; }, newValue);
}
}

8
src/sql/workbench/browser/modelComponents/componentBase.ts
View File

@@ -200,6 +200,14 @@ export abstract class ComponentBase extends Disposable implements IComponent, On
this.setPropertyFromUI<azdata.ComponentProperties, boolean>((props, value) => props.ariaSelected = value, newValue);
}
public get ariaHidden(): boolean {
return this.getPropertyOrDefault<azdata.ComponentProperties, boolean>((props) => props.ariaHidden, false);
}
public set ariaHidden(newValue: boolean) {
this.setPropertyFromUI<azdata.ComponentProperties, boolean>((props, value) => props.ariaHidden = value, newValue);
}
public get CSSStyles(): { [key: string]: string } {
return this.getPropertyOrDefault<azdata.ComponentProperties, { [key: string]: string }>((props) => props.CSSStyles, {});
}

14
src/sql/workbench/browser/modelComponents/componentWithIconBase.ts
View File

@@ -48,15 +48,23 @@ export abstract class ComponentWithIconBase extends ComponentBase {
}
public get iconPath(): string | URI | { light: string | URI; dark: string | URI } {
return this.getPropertyOrDefault<azdata.ComponentWithIcon, IUserFriendlyIcon>((props) => props.iconPath, undefined);
return this.getPropertyOrDefault<azdata.ComponentWithIconProperties, IUserFriendlyIcon>((props) => props.iconPath, undefined);
}
public get iconHeight(): number | string {
return this.getPropertyOrDefault<azdata.ComponentWithIcon, number | string>((props) => props.iconHeight, '50px');
return this.getPropertyOrDefault<azdata.ComponentWithIconProperties, number | string>((props) => props.iconHeight, '50px');
}
public get iconWidth(): number | string {
return this.getPropertyOrDefault<azdata.ComponentWithIcon, number | string>((props) => props.iconWidth, '50px');
return this.getPropertyOrDefault<azdata.ComponentWithIconProperties, number | string>((props) => props.iconWidth, '50px');
}
public get title(): string {
return this.getPropertyOrDefault<azdata.ComponentWithIconProperties, string>((props) => props.title, '');
}
public set title(newTitle: string) {
this.setPropertyFromUI<azdata.ComponentWithIconProperties, string>((properties, title) => { properties.title = title; }, newTitle);
}
ngOnDestroy(): void {

6
src/sql/workbench/browser/modelComponents/declarativeTable.component.ts
View File

@@ -31,7 +31,7 @@ export enum DeclarativeDataType {
<table role=grid #container *ngIf="columns" class="declarative-table" [style.height]="getHeight()" [attr.aria-label]="ariaLabel">
<thead>
<ng-container *ngFor="let column of columns;">
<th class="declarative-table-header" tabindex="-1" aria-sort="none" [attr.aria-label]="column.ariaLabel" [ngStyle]="column.headerCssStyles">{{column.displayName}}</th>
<th class="declarative-table-header" tabindex="-1" aria-sort="none" [style.width]="getColumnWidth(column)" [attr.aria-label]="column.ariaLabel" [ngStyle]="column.headerCssStyles">{{column.displayName}}</th>
</ng-container>
</thead>
<ng-container *ngIf="data">
@@ -159,8 +159,8 @@ export default class DeclarativeTableComponent extends ComponentBase implements
return this.columns[colIdx].valueType === DeclarativeDataType.component;
}
public getColumnWidth(colIdx: number): string {
let column: azdata.DeclarativeTableColumn = this.columns[colIdx];
public getColumnWidth(col: number | azdata.DeclarativeTableColumn): string {
let column = typeof col === 'number' ? this.columns[col] : col;
return this.convertSize(column.width, '30px');
}

6
src/sql/workbench/browser/modelComponents/image.component.ts
View File

@@ -9,15 +9,15 @@ import {
} from '@angular/core';
import * as DOM from 'vs/base/browser/dom';
import { IComponent, IComponentDescriptor, IModelStore } from 'sql/workbench/browser/modelComponents/interfaces';
import { IComponent, IComponentDescriptor, IModelStore, ITitledComponent } from 'sql/workbench/browser/modelComponents/interfaces';
import { ComponentWithIconBase } from 'sql/workbench/browser/modelComponents/componentWithIconBase';
@Component({
selector: 'modelview-image',
template: `
<div #imageContainer [style.title]="title" [style.width]="getWidth()" [style.height]="getHeight()" [style.background-size]="getImageSize()">`
<div #imageContainer [title]="title" [style.width]="getWidth()" [style.height]="getHeight()" [style.background-size]="getImageSize()">`
})
export default class ImageComponent extends ComponentWithIconBase implements IComponent, OnDestroy, AfterViewInit {
export default class ImageComponent extends ComponentWithIconBase implements ITitledComponent, IComponent, OnDestroy, AfterViewInit {
@Input() descriptor: IComponentDescriptor;
@Input() modelStore: IModelStore;
@ViewChild('imageContainer', { read: ElementRef }) imageContainer: ElementRef;

4
src/sql/workbench/browser/modelComponents/text.component.ts
View File

@@ -19,14 +19,14 @@ import { TitledComponent } from 'sql/workbench/browser/modelComponents/titledCom
selector: 'modelview-text',
template: `
<div *ngIf="showDiv;else noDiv" style="display:flex;flex-flow:row;align-items:center;" [style.width]="getWidth()" [style.height]="getHeight()">
<p [innerHTML]="getValue()" [title]="title" [ngStyle]="this.CSSStyles" [attr.role]="ariaRole"></p>
<p [innerHTML]="getValue()" [title]="title" [ngStyle]="this.CSSStyles" [attr.role]="ariaRole" [attr.aria-hidden]="ariaHidden"></p>
<p *ngIf="requiredIndicator" style="color:red;margin-left:5px;">*</p>
<div *ngIf="description" tabindex="0" class="modelview-text-tooltip" [attr.aria-label]="description">
<div class="modelview-text-tooltip-content" [innerHTML]="description"></div>
</div>
</div>
<ng-template #noDiv>
<p [innerHTML]="getValue()" [style.display]="display" [style.width]="getWidth()" [style.height]="getHeight()" [title]="title" [attr.role]="ariaRole" [ngStyle]="this.CSSStyles"></p>
<p [innerHTML]="getValue()" [style.display]="display" [style.width]="getWidth()" [style.height]="getHeight()" [title]="title" [attr.role]="ariaRole" [attr.aria-hidden]="ariaHidden" [ngStyle]="this.CSSStyles"></p>
</ng-template>`
})
export default class TextComponent extends TitledComponent implements IComponent, OnDestroy, AfterViewInit {

4
src/sql/workbench/browser/modelComponents/titledComponent.ts
View File

@@ -20,10 +20,10 @@ export abstract class TitledComponent extends ComponentBase implements ITitledCo
}
public get title(): string {
return this.getPropertyOrDefault<azdata.HyperlinkComponentProperties, string>((props) => props.title, '');
return this.getPropertyOrDefault<azdata.TitledComponentProperties, string>((props) => props.title, '');
}
public set title(newTitle: string) {
this.setPropertyFromUI<azdata.HyperlinkComponentProperties, string>((properties, title) => { properties.title = title; }, newTitle);
this.setPropertyFromUI<azdata.TitledComponentProperties, string>((properties, title) => { properties.title = title; }, newTitle);
}
}