Fix accessibility bugs in Chart Viewer and Advanced properties (#2240)

* fix accessibility bugs in chart viewer

* add advanced properties

* add comments for changes in vs

src/sql/base/browser/ui/checkbox/checkbox.component.ts

@@ -20,7 +20,7 @@ export class Checkbox implements OnInit, OnChanges {
 	@Input() label: string;
 	@Input() enabled = true;
 	@Input() checked = true;
-	@Input() private ariaLabel: string;
+	@Input('aria-label') private ariaLabel: string;
 
 	@Output() onChange = new EventEmitter<boolean>();
 

src/sql/base/browser/ui/inputBox/inputBox.component.ts

@@ -15,7 +15,6 @@ import { AngularDisposable } from 'sql/base/common/lifecycle';
 
 import { attachInputBoxStyler } from 'vs/platform/theme/common/styler';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
-import { IContextViewProvider } from 'vs/base/browser/ui/contextview/contextview';
 import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
 
 @Component({
@@ -29,7 +28,7 @@ export class InputBox extends AngularDisposable implements OnInit, OnChanges {
 	@Input() max: string;
 	@Input() type: string;
 	@Input() placeholder: string;
-	@Input() ariaLabel: string;
+	@Input('aria-label') ariaLabel: string;
 	@Input() value: string;
 
 	@Output() onDidChange = new EventEmitter<string | number>();

src/sql/base/browser/ui/modal/optionsDialogHelper.ts

@@ -49,7 +49,7 @@ export function createOptionElement(option: sqlops.ServiceOption, rowContainer:
 		optionWidget.value = optionValue;
 		inputElement = findElement(rowContainer, 'input');
 	} else if (option.valueType === ServiceOptionType.category || option.valueType === ServiceOptionType.boolean) {
-		optionWidget = new SelectBox(possibleInputs, optionValue.toString(), contextViewService);
+		optionWidget = new SelectBox(possibleInputs, optionValue.toString(), contextViewService, undefined, { ariaLabel: option.displayName });
 		DialogHelper.appendInputSelectBox(rowContainer, optionWidget);
 		inputElement = findElement(rowContainer, 'monaco-select-box');
 	} else if (option.valueType === ServiceOptionType.string || option.valueType === ServiceOptionType.password) {

src/sql/base/browser/ui/selectBox/selectBox.component.ts

@@ -28,6 +28,7 @@ export class SelectBox extends AngularDisposable implements OnInit, OnChanges {
 	@Input() options: string[];
 	@Input() selectedOption: string;
 	@Input() onlyEmitOnChange = false;
+	@Input('aria-label') ariaLabel: string;
 
 	@Output() onDidSelect = new EventEmitter<ISelectData>();
 
@@ -42,7 +43,7 @@ export class SelectBox extends AngularDisposable implements OnInit, OnChanges {
 	}
 
 	ngOnInit(): void {
-		this._selectbox = new vsSelectBox(this.options, this.selectedOption, this.contextViewService);
+		this._selectbox = new vsSelectBox(this.options, this.selectedOption, this.contextViewService, undefined, { ariaLabel: this.ariaLabel });
 		this._selectbox.render(this._el.nativeElement);
 		this._selectbox.onDidSelect(e => {
 			if (this.onlyEmitOnChange) {

src/sql/base/browser/ui/selectBox/selectBox.ts

@@ -4,7 +4,7 @@
  *--------------------------------------------------------------------------------------------*/
 
 'use strict';
-import { SelectBox as vsSelectBox, ISelectBoxStyles as vsISelectBoxStyles } from 'vs/base/browser/ui/selectBox/selectBox';
+import { SelectBox as vsSelectBox, ISelectBoxStyles as vsISelectBoxStyles, ISelectBoxOptions } from 'vs/base/browser/ui/selectBox/selectBox';
 import { Color } from 'vs/base/common/color';
 import { IContextViewProvider, AnchorAlignment } from 'vs/base/browser/ui/contextview/contextview';
 import * as dom from 'vs/base/browser/dom';
@@ -46,8 +46,8 @@ export class SelectBox extends vsSelectBox {
 	private inputValidationErrorBackground: Color;
 	private element: HTMLElement;
 
-	constructor(options: string[], selectedOption: string, contextViewProvider: IContextViewProvider, container?: HTMLElement) {
+	constructor(options: string[], selectedOption: string, contextViewProvider: IContextViewProvider, container?: HTMLElement, selectBoxOptions?: ISelectBoxOptions) {
-		super(options, 0, contextViewProvider);
+		super(options, 0, contextViewProvider, undefined, selectBoxOptions);
 		this._optionsDictionary = new Array();
 		for (var i = 0; i < options.length; i++) {
 			this._optionsDictionary[options[i]] = i;

src/sql/parts/grid/views/query/chartViewer.component.html

@@ -7,9 +7,9 @@
 	</div>
 	<div class="angular-modal-body-content chart-viewer" style="flex:1 1 auto; border-left: 1px solid; margin: 5px;">
 		<div style="position: relative; width: 100%">
-			<div class="dialog-label" id="chartTypeLabel">{{localizedStrings.CHART_TYPE}}</div>
+			<div class="dialog-label">{{localizedStrings.CHART_TYPE}}</div>
 			<select-box #chartTypeSelect class="input-divider"
-				aria-labelledby="chartTypeLabel"
+				[aria-label]="localizedStrings.CHART_TYPE"
 				[options]="insightRegistry.getAllIds()"
 				[selectedOption]="getDefaultChartType()"
 				[onlyEmitOnChange]="true"
@@ -150,7 +150,8 @@
 -->
 <ng-template #legendInput>
 	<div class="dialog-label" id="legendLabel">{{localizedStrings.LEGEND}}</div>
-	<select-box class="input-divider" aria-labelledby="legendLabel"
+	<select-box class="input-divider"
+		[aria-label]="localizedStrings.LEGEND"
 		[options]="legendOptions"
 		[selectedOption]="_chartConfig.legendPosition"
 		[onlyEmitOnChange]="true"
@@ -214,18 +215,23 @@
 <ng-template #yAxisLabelInput>
 	<span>
 		{{localizedStrings.Y_AXIS_LABEL}}
-		<input-box (onDidChange)="setConfigValue('yAxisLabel', $event)"></input-box>
+		<input-box (onDidChange)="setConfigValue('yAxisLabel', $event)"
+			[aria-label]="localizedStrings.Y_AXIS_LABEL"></input-box>
 	</span>
 </ng-template>
 
 <ng-template #yAxisMinMaxInput>
 	<span>
 		{{localizedStrings.Y_AXIS_MAX_VAL}}
-		<input-box [type]="'number'" (onDidChange)="setConfigValue('yAxisMax', $event)"></input-box>
+		<input-box [type]="'number'"
+			(onDidChange)="setConfigValue('yAxisMax', $event)"
+			[aria-label]="localizedStrings.Y_AXIS_MAX_VAL"></input-box>
 	</span>
 	<span>
 		{{localizedStrings.Y_AXIS_MIN_VAL}}
-		<input-box [type]="'number'" (onDidChange)="setConfigValue('yAxisMin', $event)"></input-box>
+		<input-box [type]="'number'"
+			(onDidChange)="setConfigValue('yAxisMin', $event)"
+			[aria-label]="localizedStrings.Y_AXIS_MIN_VAL"></input-box>
 	</span>
 </ng-template>
 
@@ -237,17 +243,22 @@
 <ng-template #xAxisLabelInput>
 	<span>
 		{{localizedStrings.X_AXIS_LABEL}}
-		<input-box (onDidChange)="setConfigValue('xAxisLabel', $event)"></input-box>
+		<input-box (onDidChange)="setConfigValue('xAxisLabel', $event)"
+			[aria-label]="localizedStrings.X_AXIS_LABEL"></input-box>
 	</span>
 </ng-template>
 
 <ng-template #xAxisMinMaxInput>
 	<span>
 		{{localizedStrings.X_AXIS_MAX_VAL}}
-		<input-box [type]="'number'" (onDidChange)="setConfigValue('xAxisMax', $event)"></input-box>
+		<input-box [type]="'number'"
+			(onDidChange)="setConfigValue('xAxisMax', $event)"
+			[aria-label]="localizedStrings.X_AXIS_MAX_VAL"></input-box>
 	</span>
 	<span>
 		{{localizedStrings.X_AXIS_MIN_VAL}}
-		<input-box [type]="'number'" (onDidChange)="setConfigValue('xAxisMin', $event)"></input-box>
+		<input-box [type]="'number'"
+			(onDidChange)="setConfigValue('xAxisMin', $event)"
+			[aria-label]="localizedStrings.X_AXIS_MIN_VAL"></input-box>
 	</span>
 </ng-template>

src/vs/base/browser/ui/selectBox/selectBox.ts

@@ -35,6 +35,8 @@ export interface ISelectBoxDelegate {
 }
 
 export interface ISelectBoxOptions {
+	// {{SQL CARBON EDIT}}
+	ariaLabel?: string;
 	minBottomMargin?: number;
 }
 
@@ -76,7 +78,8 @@ export class SelectBox extends Widget implements ISelectBoxDelegate {
 
 		// Instantiate select implementation based on platform
 		if (isMacintosh) {
-			this.selectBoxDelegate = new SelectBoxNative(options, selected, styles);
+			// {{SQL CARBON EDIT}}
+			this.selectBoxDelegate = new SelectBoxNative(options, selected, styles, selectBoxOptions);
 		} else {
 			this.selectBoxDelegate = new SelectBoxList(options, selected, contextViewProvider, styles, selectBoxOptions);
 		}

src/vs/base/browser/ui/selectBox/selectBoxCustom.ts

@@ -110,6 +110,11 @@ export class SelectBoxList implements ISelectBoxDelegate, IDelegate<ISelectOptio
 		this.selectElement = document.createElement('select');
 		this.selectElement.className = 'monaco-select-box';
 
+		// {{SQL CARBON EDIT}}
+		if (selectBoxOptions && selectBoxOptions.ariaLabel) {
+			this.selectElement.setAttribute('aria-label', selectBoxOptions.ariaLabel);
+		}
+
 		this._onDidSelect = new Emitter<ISelectData>();
 		this.styles = styles;
 

src/vs/base/browser/ui/selectBox/selectBoxNative.ts

@@ -8,7 +8,7 @@ import { Event, Emitter } from 'vs/base/common/event';
 import { KeyCode } from 'vs/base/common/keyCodes';
 import * as dom from 'vs/base/browser/dom';
 import * as arrays from 'vs/base/common/arrays';
-import { ISelectBoxDelegate, ISelectBoxStyles, ISelectData } from 'vs/base/browser/ui/selectBox/selectBox';
+import { ISelectBoxDelegate, ISelectBoxStyles, ISelectData, ISelectBoxOptions } from 'vs/base/browser/ui/selectBox/selectBox';
 import { isMacintosh } from 'vs/base/common/platform';
 
 export class SelectBoxNative implements ISelectBoxDelegate {
@@ -21,13 +21,19 @@ export class SelectBoxNative implements ISelectBoxDelegate {
 	private toDispose: IDisposable[];
 	private styles: ISelectBoxStyles;
 
-	constructor(options: string[], selected: number, styles: ISelectBoxStyles) {
+	// {{SQL CARBON EDIT}}
+	constructor(options: string[], selected: number, styles: ISelectBoxStyles, selectBoxOptions?: ISelectBoxOptions) {
 
 		this.toDispose = [];
 
 		this.selectElement = document.createElement('select');
 		this.selectElement.className = 'monaco-select-box';
 
+		// {{SQL CARBON EDIT}}
+		if (selectBoxOptions && selectBoxOptions.ariaLabel) {
+			this.selectElement.setAttribute('aria-label', selectBoxOptions.ariaLabel);
+		}
+
 		this._onDidSelect = new Emitter<ISelectData>();
 
 		this.styles = styles;