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

Adding arialive to flex and div container (#19757)

Browse Source 
* Adding arialive to flex and div container

* Fixing compilation issues

* Moving ariaLive to container properties

* fixes

Co-authored-by: Charles Gagnon <chgagnon@microsoft.com>
This commit is contained in:
Aasim Khan
2022-06-21 09:45:45 -07:00
committed by GitHub
parent 6440ae84d9
commit 8079cf8a2d
6 changed files with 52 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -279,7 +279,7 @@ export abstract class ComponentBase<TPropertyBag extends azdata.ComponentPropert
}
}
export abstract class ContainerBase<T, TPropertyBag extends azdata.ComponentProperties = azdata.ComponentProperties> extends ComponentBase<TPropertyBag> {
export abstract class ContainerBase<T, TPropertyBag extends azdata.ContainerProperties = azdata.ContainerProperties> extends ComponentBase<TPropertyBag> {
protected items: ItemDescriptor<T>[];
@ViewChildren(ModelComponentWrapper) protected _componentWrappers: QueryList<ModelComponentWrapper>;
@@ -395,4 +395,12 @@ export abstract class ContainerBase<T, TPropertyBag extends azdata.ComponentProp
protected onItemLayoutUpdated(item: ItemDescriptor<T>): void {
}
public get ariaLive(): string | undefined {
return this.getPropertyOrDefault<string>((props) => props.ariaLive, undefined);
}
public set ariaLive(newValue: string | undefined) {
this.setPropertyFromUI<string>((props, value) => props.ariaLive = value, newValue);
}
}

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

@@ -27,7 +27,7 @@ class DivItem {
@Component({
template: `
<div #divContainer *ngIf="items" [ngClass] = "{'divContainer': true, 'clickable-divContainer': clickable}" [ngStyle]="CSSStyles" [style.height]="height" [style.width]="width" [style.display]="display" (keydown)="onKey($event)" [attr.role]="ariaRole" [attr.aria-selected]="ariaSelected">
<div #divContainer *ngIf="items" [ngClass] = "{'divContainer': true, 'clickable-divContainer': clickable}" [ngStyle]="CSSStyles" [style.height]="height" [style.width]="width" [style.display]="display" (keydown)="onKey($event)" [attr.role]="ariaRole" [attr.aria-selected]="ariaSelected" [attr.aria-live]="ariaLive">
<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

@@ -23,7 +23,7 @@ export class FlexItem {
@Component({
template: `
<div *ngIf="items" class="flexContainer" [ngStyle]="CSSStyles" [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" [attr.role]="ariaRole">
[style.alignItems]="alignItems" [style.alignContent]="alignContent" [style.height]="height" [style.width]="width" [style.flex-wrap]="flexWrap" [attr.role]="ariaRole" [attr.aria-live] = "ariaLive">
<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>