ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-27 17:23:21 -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

9
src/sql/azdata.d.ts vendored
View File

@@ -3019,6 +3019,14 @@ declare module 'azdata' {
* Corresponds to the aria-label accessibility attribute for this component
*/
ariaLabel?: string;
/**
* Corresponds to the role accessibility attribute for this component
*/
ariaRole?: string;
/**
* Corresponds to the aria-selected accessibility attribute for this component
*/
ariaSelected?: boolean;
/**
* Matches the CSS style key and its available values.
*/
@@ -3092,7 +3100,6 @@ declare module 'azdata' {
title?: string;
ariaRowCount?: number;
ariaColumnCount?: number;
ariaRole?: string;
updateCells?: TableCell[];
moveFocusOutWithTab?: boolean; //accessibility requirement for tables with no actionable cells
}

16
src/sql/workbench/api/common/extHostModelView.ts
View File

@@ -566,6 +566,22 @@ class ComponentWrapper implements azdata.Component {
this.setProperty('ariaLabel', v);
}
public get ariaRole(): string {
return this.properties['ariaRole'];
}
public set ariaRole(v: string) {
this.setProperty('ariaRole', v);
}
public get ariaSelected(): boolean {
return this.properties['ariaSelected'];
}
public set ariaSelected(v: boolean) {
this.setProperty('ariaSelected', v);
}
public get CSSStyles(): { [key: string]: string } {
return this.properties['CSSStyles'];
}

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 {