diff --git a/src/sql/base/browser/ui/checkbox/checkbox.ts b/src/sql/base/browser/ui/checkbox/checkbox.ts index a45d7c178e..af177bd9fc 100644 --- a/src/sql/base/browser/ui/checkbox/checkbox.ts +++ b/src/sql/base/browser/ui/checkbox/checkbox.ts @@ -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); }); diff --git a/src/sql/base/browser/ui/editableDropdown/browser/dropdown.ts b/src/sql/base/browser/ui/editableDropdown/browser/dropdown.ts index d0d298288a..fc2f7d84a3 100644 --- a/src/sql/base/browser/ui/editableDropdown/browser/dropdown.ts +++ b/src/sql/base/browser/ui/editableDropdown/browser/dropdown.ts @@ -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 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 diff --git a/src/sql/base/browser/ui/inputBox/inputBox.ts b/src/sql/base/browser/ui/inputBox/inputBox.ts index 4b4810f06d..de3d0d277a 100644 --- a/src/sql/base/browser/ui/inputBox/inputBox.ts +++ b/src/sql/base/browser/ui/inputBox/inputBox.ts @@ -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 { diff --git a/src/sql/workbench/browser/designer/designer.ts b/src/sql/workbench/browser/designer/designer.ts index e63d03a702..568b7028d7 100644 --- a/src/sql/workbench/browser/designer/designer.ts +++ b/src/sql/workbench/browser/designer/designer.ts @@ -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 }); }); diff --git a/src/vs/base/browser/ui/selectBox/selectBox.ts b/src/vs/base/browser/ui/selectBox/selectBox.ts index 5d53f0543c..e603440dbe 100644 --- a/src/vs/base/browser/ui/selectBox/selectBox.ts +++ b/src/vs/base/browser/ui/selectBox/selectBox.ts @@ -40,6 +40,7 @@ export interface ISelectBoxDelegate extends IDisposable { export interface ISelectBoxOptions { useCustomDrawn?: boolean; ariaLabel?: string; + ariaDescription?: string; // {{SQL CARBON EDIT}} - Add aria description minBottomMargin?: number; optionsAsChildren?: boolean; } diff --git a/src/vs/base/browser/ui/selectBox/selectBoxCustom.ts b/src/vs/base/browser/ui/selectBox/selectBoxCustom.ts index d56c4f52a9..26ff06a781 100644 --- a/src/vs/base/browser/ui/selectBox/selectBoxCustom.ts +++ b/src/vs/base/browser/ui/selectBox/selectBoxCustom.ts @@ -127,6 +127,11 @@ export class SelectBoxList extends Disposable implements ISelectBoxDelegate, ILi this.selectElement.setAttribute('aria-label', this.selectBoxOptions.ariaLabel); } + // {{SQL CARBON EDIT}} + if (typeof this.selectBoxOptions.ariaDescription === 'string') { + this.selectElement.setAttribute('aria-description', this.selectBoxOptions.ariaDescription); + } + this._onDidSelect = new Emitter(); this._register(this._onDidSelect); diff --git a/src/vs/base/browser/ui/selectBox/selectBoxNative.ts b/src/vs/base/browser/ui/selectBox/selectBoxNative.ts index 221c7197fd..97961720a7 100644 --- a/src/vs/base/browser/ui/selectBox/selectBoxNative.ts +++ b/src/vs/base/browser/ui/selectBox/selectBoxNative.ts @@ -36,6 +36,11 @@ export class SelectBoxNative extends Disposable implements ISelectBoxDelegate { this.selectElement.setAttribute('aria-label', this.selectBoxOptions.ariaLabel); } + // {{SQL CARBON EDIT}} + if (typeof this.selectBoxOptions.ariaDescription === 'string') { + this.selectElement.setAttribute('aria-description', this.selectBoxOptions.ariaDescription); + } + this._onDidSelect = this._register(new Emitter()); this.styles = styles;