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

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

@@ -50,7 +50,7 @@ class ModelBuilderImpl implements azdata.ModelBuilder {
flexContainer(): azdata.FlexBuilder {
let id = this.getNextComponentId();
let container: GenericContainerBuilder<azdata.FlexContainer, any, any, azdata.ComponentProperties> = new GenericContainerBuilder<azdata.FlexContainer, azdata.FlexLayout, azdata.FlexItemLayout, azdata.ComponentProperties>(this._proxy, this._handle, ModelComponentTypes.FlexContainer, id, this.logService);
let container: GenericContainerBuilder<azdata.FlexContainer, any, any, azdata.ContainerProperties> = new GenericContainerBuilder<azdata.FlexContainer, azdata.FlexLayout, azdata.FlexItemLayout, azdata.ContainerProperties>(this._proxy, this._handle, ModelComponentTypes.FlexContainer, id, this.logService);
this._componentBuilders.set(id, container);
return container;
}
@@ -342,11 +342,17 @@ class ComponentBuilderImpl<T extends azdata.Component, TPropertyBag extends azda
}
}
class ContainerBuilderImpl<TComponent extends azdata.Component, TLayout, TItemLayout, TPropertyBag extends azdata.ComponentProperties> extends ComponentBuilderImpl<TComponent, TPropertyBag> implements azdata.ContainerBuilder<TComponent, TLayout, TItemLayout, TPropertyBag> {
class ContainerBuilderImpl<TComponent extends azdata.Component, TLayout, TItemLayout, TPropertyBag extends azdata.ContainerProperties> extends ComponentBuilderImpl<TComponent, TPropertyBag> implements azdata.ContainerBuilder<TComponent, TLayout, TItemLayout, TPropertyBag> {
constructor(componentWrapper: ComponentWrapper) {
super(componentWrapper);
}
override withProps(properties: TPropertyBag): azdata.ContainerBuilder<TComponent, TLayout, TItemLayout, TPropertyBag> {
// We use the same basic logic to set the properties but return this so we can return the container object type
super.withProps(properties);
return this;
}
withLayout(layout: TLayout): azdata.ContainerBuilder<TComponent, TLayout, TItemLayout, TPropertyBag> {
this._component.layout = layout;
return this;
@@ -361,7 +367,7 @@ class ContainerBuilderImpl<TComponent extends azdata.Component, TLayout, TItemLa
}
}
class GenericContainerBuilder<T extends azdata.Component, TLayout, TItemLayout, TPropertyBag extends azdata.ComponentProperties> extends ContainerBuilderImpl<T, TLayout, TItemLayout, TPropertyBag> {
class GenericContainerBuilder<T extends azdata.Component, TLayout, TItemLayout, TPropertyBag extends azdata.ContainerProperties> extends ContainerBuilderImpl<T, TLayout, TItemLayout, TPropertyBag> {
constructor(proxy: MainThreadModelViewShape, handle: number, type: ModelComponentTypes, id: string, logService: ILogService) {
super(new ComponentWrapper(proxy, handle, type, id, logService));
}

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>