ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-16 10:58:30 -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

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

@@ -2692,7 +2692,7 @@ declare module 'azdata' {
* Supports defining a model that can be instantiated as a view in the UI * Supports defining a model that can be instantiated as a view in the UI
*/ */
export interface ModelBuilder { export interface ModelBuilder {
navContainer(): ContainerBuilder<NavContainer, any, any, ComponentProperties>; navContainer(): ContainerBuilder<NavContainer, any, any, ContainerProperties>;
divContainer(): DivBuilder; divContainer(): DivBuilder;
flexContainer(): FlexBuilder; flexContainer(): FlexBuilder;
splitViewContainer(): SplitViewBuilder; splitViewContainer(): SplitViewBuilder;
@@ -2763,16 +2763,16 @@ declare module 'azdata' {
withProps(properties: TPropertyBag): ComponentBuilder<TComponent, TPropertyBag>; withProps(properties: TPropertyBag): ComponentBuilder<TComponent, TPropertyBag>;
withValidation(validation: (component: TComponent) => boolean | Thenable<boolean>): ComponentBuilder<TComponent, TPropertyBag>; withValidation(validation: (component: TComponent) => boolean | Thenable<boolean>): ComponentBuilder<TComponent, TPropertyBag>;
} }
export interface ContainerBuilder<TComponent extends Component, TLayout, TItemLayout, TPropertyBag extends ComponentProperties> extends ComponentBuilder<TComponent, TPropertyBag> { export interface ContainerBuilder<TComponent extends Component, TLayout, TItemLayout, TPropertyBag extends ContainerProperties> extends ComponentBuilder<TComponent, TPropertyBag> {
withLayout(layout: TLayout): ContainerBuilder<TComponent, TLayout, TItemLayout, TPropertyBag>; withLayout(layout: TLayout): ContainerBuilder<TComponent, TLayout, TItemLayout, TPropertyBag>;
withItems(components: Array<Component>, itemLayout?: TItemLayout): ContainerBuilder<TComponent, TLayout, TItemLayout, TPropertyBag>; withItems(components: Array<Component>, itemLayout?: TItemLayout): ContainerBuilder<TComponent, TLayout, TItemLayout, TPropertyBag>;
} }
export interface FlexBuilder extends ContainerBuilder<FlexContainer, FlexLayout, FlexItemLayout, ComponentProperties> { export interface FlexBuilder extends ContainerBuilder<FlexContainer, FlexLayout, FlexItemLayout, ContainerProperties> {
} }
// Building on top of flex item // Building on top of flex item
export interface SplitViewBuilder extends ContainerBuilder<SplitViewContainer, SplitViewLayout, FlexItemLayout, ComponentProperties> { export interface SplitViewBuilder extends ContainerBuilder<SplitViewContainer, SplitViewLayout, FlexItemLayout, ContainerProperties> {
} }
export interface DivBuilder extends ContainerBuilder<DivContainer, DivLayout, DivItemLayout, DivContainerProperties> { export interface DivBuilder extends ContainerBuilder<DivContainer, DivLayout, DivItemLayout, DivContainerProperties> {
@@ -2781,8 +2781,8 @@ declare module 'azdata' {
export interface GroupBuilder extends ContainerBuilder<GroupContainer, GroupLayout, GroupItemLayout, GroupContainerProperties> { export interface GroupBuilder extends ContainerBuilder<GroupContainer, GroupLayout, GroupItemLayout, GroupContainerProperties> {
} }
export interface ToolbarBuilder extends ContainerBuilder<ToolbarContainer, ToolbarLayout, any, ComponentProperties> { export interface ToolbarBuilder extends ContainerBuilder<ToolbarContainer, ToolbarLayout, any, ContainerProperties> {
withToolbarItems(components: ToolbarComponent[]): ContainerBuilder<ToolbarContainer, ToolbarLayout, any, ComponentProperties>; withToolbarItems(components: ToolbarComponent[]): ContainerBuilder<ToolbarContainer, ToolbarLayout, any, ContainerProperties>;
/** /**
* Creates a collection of child components and adds them all to this container * Creates a collection of child components and adds them all to this container
@@ -2807,7 +2807,7 @@ declare module 'azdata' {
withItem(component: Component): LoadingComponentBuilder; withItem(component: Component): LoadingComponentBuilder;
} }
export interface FormBuilder extends ContainerBuilder<FormContainer, FormLayout, FormItemLayout, ComponentProperties> { export interface FormBuilder extends ContainerBuilder<FormContainer, FormLayout, FormItemLayout, ContainerProperties> {
withFormItems(components: (FormComponent | FormComponentGroup)[], itemLayout?: FormItemLayout): FormBuilder; withFormItems(components: (FormComponent | FormComponentGroup)[], itemLayout?: FormItemLayout): FormBuilder;
/** /**
@@ -3324,6 +3324,13 @@ declare module 'azdata' {
CSSStyles?: CssStyles | undefined; CSSStyles?: CssStyles | undefined;
} }
/**
* Common properties for container components such as {@link DivContainer} or {@link FlexContainer}
*/
export interface ContainerProperties extends ComponentProperties {
}
export type ThemedIconPath = { light: string | vscode.Uri; dark: string | vscode.Uri }; export type ThemedIconPath = { light: string | vscode.Uri; dark: string | vscode.Uri };
export type IconPath = string | vscode.Uri | ThemedIconPath; export type IconPath = string | vscode.Uri | ThemedIconPath;
@@ -3544,7 +3551,7 @@ declare module 'azdata' {
export interface ImageComponentProperties extends ComponentWithIconProperties { export interface ImageComponentProperties extends ComponentWithIconProperties {
} }
export interface GroupContainerProperties extends ComponentProperties { export interface GroupContainerProperties extends ContainerProperties {
collapsed: boolean; collapsed: boolean;
} }
@@ -3817,7 +3824,7 @@ declare module 'azdata' {
loadingCompletedText?: string | undefined; loadingCompletedText?: string | undefined;
} }
export interface DivContainerProperties extends ComponentProperties { export interface DivContainerProperties extends ContainerProperties {
/** /**
* Matches the overflow-y CSS property and its available values. * Matches the overflow-y CSS property and its available values.
*/ */
@@ -4357,12 +4364,12 @@ declare module 'azdata' {
/** /**
* Builder for TabbedPanelComponent * Builder for TabbedPanelComponent
*/ */
export interface TabbedPanelComponentBuilder extends ContainerBuilder<TabbedPanelComponent, TabbedPanelLayout, any, ComponentProperties> { export interface TabbedPanelComponentBuilder extends ContainerBuilder<TabbedPanelComponent, TabbedPanelLayout, any, ContainerProperties> {
/** /**
* Add the tabs to the component * Add the tabs to the component
* @param tabs tabs/tab groups to be added * @param tabs tabs/tab groups to be added
*/ */
withTabs(tabs: (Tab | TabGroup)[]): ContainerBuilder<TabbedPanelComponent, TabbedPanelLayout, any, ComponentProperties>; withTabs(tabs: (Tab | TabGroup)[]): ContainerBuilder<TabbedPanelComponent, TabbedPanelLayout, any, ContainerProperties>;
} }
export interface SliderComponentProperties extends ComponentProperties { export interface SliderComponentProperties extends ComponentProperties {

14
src/sql/azdata.proposed.d.ts vendored
View File

@@ -1526,6 +1526,20 @@ declare module 'azdata' {
link: LinkArea; link: LinkArea;
} }
export interface ContainerBuilder<TComponent extends Component, TLayout, TItemLayout, TPropertyBag extends ContainerProperties> extends ComponentBuilder<TComponent, TPropertyBag> {
/**
* Sets the initial set of properties for the container being created
* @param properties The properties to apply to the container
*/
withProps(properties: TPropertyBag): ContainerBuilder<TComponent, TLayout, TItemLayout, TPropertyBag>;
}
export interface ContainerProperties extends ComponentProperties {
/**
* Corresponds to the aria-live accessibility attribute for this component
*/
ariaLive?: string;
}
export namespace queryeditor { export namespace queryeditor {
export interface IQueryMessage { export interface IQueryMessage {

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

@@ -50,7 +50,7 @@ class ModelBuilderImpl implements azdata.ModelBuilder {
flexContainer(): azdata.FlexBuilder { flexContainer(): azdata.FlexBuilder {
let id = this.getNextComponentId(); 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); this._componentBuilders.set(id, container);
return 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) { constructor(componentWrapper: ComponentWrapper) {
super(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> { withLayout(layout: TLayout): azdata.ContainerBuilder<TComponent, TLayout, TItemLayout, TPropertyBag> {
this._component.layout = layout; this._component.layout = layout;
return this; 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) { constructor(proxy: MainThreadModelViewShape, handle: number, type: ModelComponentTypes, id: string, logService: ILogService) {
super(new ComponentWrapper(proxy, handle, type, id, logService)); 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>[]; protected items: ItemDescriptor<T>[];
@ViewChildren(ModelComponentWrapper) protected _componentWrappers: QueryList<ModelComponentWrapper>; @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 { 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({ @Component({
template: ` 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)"> <div *ngFor="let item of items" [style.order]="getItemOrder(item)" [ngStyle]="getItemStyles(item)">
<model-component-wrapper [descriptor]="item.descriptor" [modelStore]="modelStore"> <model-component-wrapper [descriptor]="item.descriptor" [modelStore]="modelStore">
</model-component-wrapper> </model-component-wrapper>

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

@@ -23,7 +23,7 @@ export class FlexItem {
@Component({ @Component({
template: ` template: `
<div *ngIf="items" class="flexContainer" [ngStyle]="CSSStyles" [style.display]="display" [style.flexFlow]="flexFlow" [style.justifyContent]="justifyContent" [style.position]="position" <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)"> <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 [descriptor]="item.descriptor" [modelStore]="modelStore">
</model-component-wrapper> </model-component-wrapper>