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

add aria description (#19734)

Browse Source 
* add aria description

* type check
This commit is contained in:
Alan Ren
2022-06-15 14:46:49 -07:00
committed by GitHub
parent 1bf99b0802
commit c75e95599f
7 changed files with 38 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/sql/base/browser/ui/checkbox/checkbox.ts
View File

@@ -16,6 +16,7 @@ export interface ICheckboxOptions {
checked?: boolean;
onChange?: (val: boolean) => void;
ariaLabel?: string;
ariaDescription?: string;
}
export interface ICheckboxStyles {
@@ -45,6 +46,10 @@ export class Checkbox extends Widget {
this.ariaLabel = opts.ariaLabel;
}
if (opts.ariaDescription) {
this._el.setAttribute('aria-description', opts.ariaDescription);
}
this.onchange(this._el, e => {
this._onChange.fire(this.checked);
});

7
src/sql/base/browser/ui/editableDropdown/browser/dropdown.ts
View File

@@ -51,6 +51,10 @@ export interface IDropdownOptions extends IDropdownStyles {
* Value to use as aria-label for the input box
*/
ariaLabel?: string;
/**
* Value to use as aria-description for the input box
*/
ariaDescription?: string;
}
export interface IDropdownStyles {
@@ -115,7 +119,8 @@ export class Dropdown extends Disposable implements IListVirtualDelegate<string>
validation: v => this._inputValidator(v)
},
placeholder: this._options.placeholder,
ariaLabel: this._options.ariaLabel
ariaLabel: this._options.ariaLabel,
ariaDescription: this._options.ariaDescription
});
// Clear title from input box element (defaults to placeholder value) since we don't want a tooltip for the selected value

5
src/sql/base/browser/ui/inputBox/inputBox.ts
View File

@@ -26,6 +26,7 @@ export interface IInputOptions extends vsIInputBoxOptions {
*/
requireForceValidations?: boolean;
required?: boolean;
ariaDescription?: string;
}
export class InputBox extends vsInputBox {
@@ -69,6 +70,10 @@ export class InputBox extends vsInputBox {
this._isTextAreaInput = true;
}
this.required = !!this._sqlOptions?.required;
if (this._sqlOptions.ariaDescription) {
this.inputElement.setAttribute('aria-description', this._sqlOptions.ariaDescription);
}
}
public override style(styles: IInputBoxStyles): void {

16
src/sql/workbench/browser/designer/designer.ts
View File

@@ -744,6 +744,7 @@ export class Designer extends Disposable implements IThemable {
const input = new InputBox(inputContainer, this._contextViewProvider, {
ariaLabel: inputProperties.title,
type: inputProperties.inputType,
ariaDescription: componentDefinition.description
});
input.onLoseFocus((args) => {
if (args.hasChanged) {
@@ -768,8 +769,11 @@ export class Designer extends Disposable implements IThemable {
const dropdownProperties = componentDefinition.componentProperties as DropDownProperties;
let dropdown;
if (dropdownProperties.isEditable) {
dropdown = new Dropdown(dropdownContainer, this._contextViewProvider, { values: dropdownProperties.values as string[] || [] });
dropdown.ariaLabel = componentDefinition.componentProperties?.title;
dropdown = new Dropdown(dropdownContainer, this._contextViewProvider, {
values: dropdownProperties.values as string[] || [],
ariaLabel: componentDefinition.componentProperties?.title,
ariaDescription: componentDefinition.description
});
dropdown.onValueChange((value) => {
this.handleEdit({ type: DesignerEditType.Update, path: propertyPath, value: value, source: view });
});
@@ -781,8 +785,10 @@ export class Designer extends Disposable implements IThemable {
}
});
} else {
dropdown = new SelectBox(dropdownProperties.values as string[] || [], undefined, this._contextViewProvider, undefined);
dropdown.setAriaLabel(componentDefinition.componentProperties?.title);
dropdown = new SelectBox(dropdownProperties.values as string[] || [], undefined, this._contextViewProvider, undefined, {
ariaLabel: componentDefinition.componentProperties?.title,
ariaDescription: componentDefinition.description
});
dropdown.render(dropdownContainer);
dropdown.selectElem.style.height = '25px';
dropdown.onDidSelect((e) => {
@@ -802,7 +808,7 @@ export class Designer extends Disposable implements IThemable {
container.appendChild(DOM.$('')).appendChild(DOM.$('span.component-label')).innerText = componentDefinition.componentProperties?.title ?? '';
const checkboxContainer = container.appendChild(DOM.$(''));
const checkboxProperties = componentDefinition.componentProperties as CheckBoxProperties;
const checkbox = new Checkbox(checkboxContainer, { label: '', ariaLabel: checkboxProperties.title });
const checkbox = new Checkbox(checkboxContainer, { label: '', ariaLabel: checkboxProperties.title, ariaDescription: componentDefinition.description });
checkbox.onChange((newValue) => {
this.handleEdit({ type: DesignerEditType.Update, path: propertyPath, value: newValue, source: view });
});