Make form components use title as aria-label (#8040)

This commit is contained in:
Charles Gagnon
2019-10-27 14:37:34 -07:00
committed by GitHub
parent 024bd00d93
commit bd15a96b83
5 changed files with 20 additions and 42 deletions

View File

@@ -329,6 +329,9 @@ class FormContainerBuilder extends GenericContainerBuilder<azdata.FormContainer,
if (formComponent.required && componentWrapper) {
componentWrapper.required = true;
}
if (formComponent.title && componentWrapper) {
componentWrapper.ariaLabel = formComponent.title;
}
let actions: string[] = undefined;
if (formComponent.actions) {
actions = formComponent.actions.map(action => {
@@ -552,6 +555,14 @@ class ComponentWrapper implements azdata.Component {
this.setProperty('display', v);
}
public get ariaLabel(): string {
return this.properties['ariaLabel'];
}
public set ariaLabel(v: string) {
this.setProperty('ariaLabel', v);
}
public get CSSStyles(): { [key: string]: string } {
return this.properties['CSSStyles'];
}
@@ -820,18 +831,11 @@ class InputBoxWrapper extends ComponentWrapper implements azdata.InputBoxCompone
this.setProperty('value', v);
}
public get ariaLabel(): string {
return this.properties['ariaLabel'];
}
public set ariaLabel(v: string) {
this.setProperty('ariaLabel', v);
}
public get ariaLive(): string {
return this.properties['ariaLive'];
}
public set ariaLive(v: string) {
this.setProperty('ariaLabel', v);
this.setProperty('ariaLive', v);
}
public get placeHolder(): string {
@@ -1327,13 +1331,6 @@ class DropDownWrapper extends ComponentWrapper implements azdata.DropDownCompone
this.setProperty('fireOnTextChange', v);
}
public get ariaLabel(): string {
return this.properties['ariaLabel'];
}
public set ariaLabel(v: string) {
this.setProperty('ariaLabel', v);
}
public get onValueChanged(): vscode.Event<any> {
let emitter = this._emitterMap.get(ComponentEventType.onDidChange);
return emitter && emitter.event;
@@ -1419,13 +1416,6 @@ class ButtonWrapper extends ComponentWithIconWrapper implements azdata.ButtonCom
this.setProperty('title', v);
}
public get ariaLabel(): string {
return this.properties['ariaLabel'];
}
public set ariaLabel(v: string) {
this.setProperty('ariaLabel', v);
}
public get onDidClick(): vscode.Event<any> {
let emitter = this._emitterMap.get(ComponentEventType.onDidClick);
return emitter && emitter.event;

View File

@@ -192,12 +192,4 @@ export default class ButtonComponent extends ComponentWithIconBase implements IC
private setFileType(value: string) {
this.properties.fileType = value;
}
private get ariaLabel(): string {
return this.getPropertyOrDefault<azdata.ButtonProperties, string>((properties) => properties.ariaLabel, '');
}
private set ariaLabel(newValue: string) {
this.setPropertyFromUI<azdata.ButtonProperties, string>((properties, ariaLabel) => { properties.ariaLabel = ariaLabel; }, newValue);
}
}

View File

@@ -174,6 +174,14 @@ export abstract class ComponentBase extends Disposable implements IComponent, On
this.setPropertyFromUI<azdata.ComponentProperties, string>((properties, display) => { properties.display = display; }, newValue);
}
public get ariaLabel(): string {
return this.getPropertyOrDefault<azdata.ComponentProperties, string>((props) => props.ariaLabel, '');
}
public set ariaLabel(newValue: string) {
this.setPropertyFromUI<azdata.ComponentProperties, string>((props, value) => props.ariaLabel = value, newValue);
}
public get CSSStyles(): { [key: string]: string } {
return this.getPropertyOrDefault<azdata.ComponentProperties, { [key: string]: string }>((props) => props.CSSStyles, {});
}

View File

@@ -188,10 +188,6 @@ export default class DropDownComponent extends ComponentBase implements ICompone
return this.getPropertyOrDefault<azdata.DropDownProperties, boolean>((props) => props.fireOnTextChange, false);
}
private get ariaLabel(): string {
return this.getPropertyOrDefault<azdata.DropDownProperties, string>((props) => props.ariaLabel, '');
}
public getEditableDisplay(): string {
return this.editable && !this._isInAccessibilityMode ? '' : 'none';
}

View File

@@ -248,14 +248,6 @@ export default class InputBoxComponent extends ComponentBase implements ICompone
this.setPropertyFromUI<azdata.InputBoxProperties, string>((props, value) => props.value = value, newValue);
}
public get ariaLabel(): string {
return this.getPropertyOrDefault<azdata.InputBoxProperties, string>((props) => props.ariaLabel, '');
}
public set ariaLabel(newValue: string) {
this.setPropertyFromUI<azdata.InputBoxProperties, string>((props, value) => props.ariaLabel = value, newValue);
}
public get ariaLive() {
return this.getPropertyOrDefault<azdata.InputBoxProperties, string>((props) => props.ariaLive, '');
}