add aria description (#19734)

* add aria description

* type check

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);
 		});

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<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

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 {

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 = new Dropdown(dropdownContainer, this._contextViewProvider, {
-					dropdown.ariaLabel = componentDefinition.componentProperties?.title;
+						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 = new SelectBox(dropdownProperties.values as string[] || [], undefined, this._contextViewProvider, undefined, {
-					dropdown.setAriaLabel(componentDefinition.componentProperties?.title);
+						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 });
 				});

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;
 }

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<ISelectData>();
 		this._register(this._onDidSelect);
 

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<ISelectData>());
 
 		this.styles = styles;