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 {