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

Add aria role and selected properties (#8405)

Browse Source 
* Add aria role and selected properties

* Add img role fix

* Add title to text
This commit is contained in:
Charles Gagnon
2019-11-20 13:56:59 -08:00
committed by GitHub
parent 7e553031ce
commit f26c790736
11 changed files with 92 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@@ -23,7 +23,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)">
<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 *ngFor="let item of items" [style.order]="getItemOrder(item)" [ngStyle]="getItemStyles(item)">
<model-component-wrapper [descriptor]="item.descriptor" [modelStore]="modelStore">
</model-component-wrapper>

2
src/sql/workbench/browser/modelComponents/flexContainer.component.ts
View File

@@ -21,7 +21,7 @@ export class FlexItem {
@Component({
template: `
<div *ngIf="items" class="flexContainer" [style.display]="display" [style.flexFlow]="flexFlow" [style.justifyContent]="justifyContent" [style.position]="position"
[style.alignItems]="alignItems" [style.alignContent]="alignContent" [style.height]="height" [style.width]="width" [style.flex-wrap]="flexWrap">
[style.alignItems]="alignItems" [style.alignContent]="alignContent" [style.height]="height" [style.width]="width" [style.flex-wrap]="flexWrap" [attr.role]="ariaRole">
<div *ngFor="let item of items" [style.flex]="getItemFlex(item)" [style.textAlign]="textAlign" [style.order]="getItemOrder(item)" [ngStyle]="getItemStyles(item)">
<model-component-wrapper [descriptor]="item.descriptor" [modelStore]="modelStore">
</model-component-wrapper>

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

@@ -352,10 +352,6 @@ export default class TableComponent extends ComponentBase implements IComponent,
return this.getPropertyOrDefault<azdata.TableComponentProperties, number>((props) => props.ariaColumnCount, -1);
}
public get ariaRole(): string {
return this.getPropertyOrDefault<azdata.TableComponentProperties, string>((props) => props.ariaRole, undefined);
}
public set moveFocusOutWithTab(newValue: boolean) {
this.setPropertyFromUI<azdata.TableComponentProperties, boolean>((props, value) => props.moveFocusOutWithTab = value, newValue);
}

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

@@ -26,7 +26,7 @@ import { TitledComponent } from 'sql/workbench/browser/modelComponents/titledCom
</div>
</div>
<ng-template #noDiv>
<p [innerHTML]="getValue()" [style.display]="display" [style.width]="getWidth()" [style.height]="getHeight()" [title]="title" [ngStyle]="this.CSSStyles" (click)="onClick()"></p>
<p [innerHTML]="getValue()" [style.display]="display" [style.width]="getWidth()" [style.height]="getHeight()" [title]="title" [attr.role]="ariaRole" [ngStyle]="this.CSSStyles" (click)="onClick()"></p>
</ng-template>`
})
export default class TextComponent extends TitledComponent implements IComponent, OnDestroy, AfterViewInit {