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

Adding arialive to text (#20242)

Browse Source
This commit is contained in:
Aasim Khan
2022-08-03 20:25:17 -07:00
committed by GitHub
parent baf52a55ff
commit d139559d98
5 changed files with 26 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1390,6 +1390,14 @@ class TextComponentWrapper extends ComponentWrapper implements azdata.TextCompon
public set textType(type: azdata.TextType | undefined) {
this.setProperty('textType', type);
}
public get ariaLive(): string | undefined {
return this.properties['ariaLive'];
}
public set ariaLive(ariaLive: string | undefined) {
this.setProperty('ariaLive', ariaLive);
}
}
class ImageComponentWrapper extends ComponentWithIconWrapper implements azdata.ImageComponentProperties {

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

@@ -34,7 +34,7 @@ const errorTextClass = 'error-text';
@Component({
selector: 'modelview-text',
template: `
<div *ngIf="showList;else noList" [style.display]="display" [style.width]="getWidth()" [style.height]="getHeight()" [title]="title" [attr.role]="ariaRole" [attr.aria-hidden]="ariaHidden" [ngStyle]="this.CSSStyles">
<div *ngIf="showList;else noList" [style.display]="display" [style.width]="getWidth()" [style.height]="getHeight()" [title]="title" [attr.role]="ariaRole" [attr.aria-hidden]="ariaHidden" [ngStyle]="this.CSSStyles" [attr.aria-live]="ariaLive">
<div *ngIf="isUnOrderedList;else orderedlist">
<ul style="padding-left:0px">
<li *ngFor="let v of value">{{v}}</li>
@@ -48,7 +48,7 @@ const errorTextClass = 'error-text';
</div>
<ng-template #noList>
<div *ngIf="showDiv;else noDiv" style="display:flex;flex-flow:row;align-items:center;" [style.width]="getWidth()" [style.height]="getHeight()">
<p [title]="title" [ngStyle]="this.CSSStyles" [attr.role]="ariaRole" [attr.aria-hidden]="ariaHidden"></p>
<p [title]="title" [ngStyle]="this.CSSStyles" [attr.role]="ariaRole" [attr.aria-hidden]="ariaHidden" [attr.aria-live]="ariaLive"></p>
<div #textContainer id="textContainer"></div>
<span *ngIf="requiredIndicator" style="color:red;margin-left:5px;">*</span>
<div *ngIf="description" tabindex="0" class="modelview-text-tooltip" [attr.aria-label]="description" role="img" (mouseenter)="showTooltip($event)" (focus)="showTooltip($event)" (keydown)="onDescriptionKeyDown($event)">
@@ -56,7 +56,7 @@ const errorTextClass = 'error-text';
</div>
</div>
<ng-template #noDiv>
<div #textContainer id="textContainer" [style.display]="display" [style.width]="getWidth()" [style.height]="getHeight()" [title]="title" [attr.role]="ariaRole" [attr.aria-hidden]="ariaHidden" [ngStyle]="this.CSSStyles"></div>
<div #textContainer id="textContainer" [style.display]="display" [style.width]="getWidth()" [style.height]="getHeight()" [title]="title" [attr.role]="ariaRole" [attr.aria-hidden]="ariaHidden" [attr.aria-live]="ariaLive" [ngStyle]="this.CSSStyles"></div>
</ng-template>
</ng-template>`
})
@@ -213,6 +213,10 @@ export default class TextComponent extends TitledComponent<azdata.TextComponentP
return this.requiredIndicator || !!this.description;
}
public get ariaLive(): string | undefined {
return this.getPropertyOrDefault<string | undefined>((props) => props.ariaLive, undefined);
}
/**
* Creates the appropriate text element based on the type of text component (regular or header) this is
* @returns The text element