diff --git a/src/sql/base/browser/ui/selectBox/selectBox.ts b/src/sql/base/browser/ui/selectBox/selectBox.ts index 3dc848cf3e..049db5a975 100644 --- a/src/sql/base/browser/ui/selectBox/selectBox.ts +++ b/src/sql/base/browser/ui/selectBox/selectBox.ts @@ -69,6 +69,9 @@ export class SelectBox extends vsSelectBox { if (container) { this.element = dom.append(container, $('.monaco-selectbox.idle')); } + + // explicitly set the accessible role so that the screen readers can read the control type properly + this.selectElement.setAttribute('role', 'combobox'); } public style(styles: ISelectBoxStyles): void { diff --git a/src/sql/parts/connection/connectionDialog/connectionDialogWidget.ts b/src/sql/parts/connection/connectionDialog/connectionDialogWidget.ts index d319836be7..6a409fc6c6 100644 --- a/src/sql/parts/connection/connectionDialog/connectionDialogWidget.ts +++ b/src/sql/parts/connection/connectionDialog/connectionDialogWidget.ts @@ -100,10 +100,10 @@ export class ConnectionDialogWidget extends Modal { public refresh(): void { let filteredProviderTypes = this.providerTypeOptions; - if (this._newConnectionParams && this._newConnectionParams.providers) { + if (this._newConnectionParams && this._newConnectionParams.providers) { let validProviderNames = Object.keys(this.providerNameToDisplayNameMap).filter(x => this.includeProvider(x, this._newConnectionParams)); if (validProviderNames && validProviderNames.length > 0) { - filteredProviderTypes = filteredProviderTypes.filter(x => validProviderNames.find( v => this.providerNameToDisplayNameMap[v] === x) !== undefined); + filteredProviderTypes = filteredProviderTypes.filter(x => validProviderNames.find(v => this.providerNameToDisplayNameMap[v] === x) !== undefined); } } this._providerTypeSelectBox.setOptions(filteredProviderTypes); @@ -118,8 +118,8 @@ export class ConnectionDialogWidget extends Modal { container.appendChild(connectionContainer.getHTMLElement()); this._bodyBuilder = new Builder(connectionContainer.getHTMLElement()); - this._providerTypeSelectBox = new SelectBox(this.providerTypeOptions, this.selectedProviderType, this._contextViewService); - + const connectTypeLabel = localize('connectType', 'Connection type'); + this._providerTypeSelectBox = new SelectBox(this.providerTypeOptions, this.selectedProviderType, this._contextViewService, undefined, { ariaLabel: connectTypeLabel }); // Recent connection tab let recentConnectionTab = $('.connection-recent-tab'); recentConnectionTab.div({ class: 'connection-recent', id: 'recentConnection' }, (builder) => { @@ -182,7 +182,6 @@ export class ConnectionDialogWidget extends Modal { }); this._bodyBuilder.div({ class: 'connection-type' }, (modelTableContent) => { - let connectTypeLabel = localize('connectType', 'Connection type'); modelTableContent.element('table', { class: 'connection-table-content' }, (tableContainer) => { DialogHelper.appendInputSelectBox( DialogHelper.appendRow(tableContainer, connectTypeLabel, 'connection-label', 'connection-input'), this._providerTypeSelectBox); @@ -450,4 +449,4 @@ export class ConnectionDialogWidget extends Modal { public get databaseDropdownExpanded(): boolean { return this._databaseDropdownExpanded; } -} +} \ No newline at end of file diff --git a/src/sql/parts/connection/connectionDialog/connectionWidget.ts b/src/sql/parts/connection/connectionDialog/connectionWidget.ts index 8eb59ec4c5..815b93253f 100644 --- a/src/sql/parts/connection/connectionDialog/connectionWidget.ts +++ b/src/sql/parts/connection/connectionDialog/connectionWidget.ts @@ -65,6 +65,7 @@ export class ConnectionWidget { private _databaseDropdownExpanded: boolean = false; private _defaultDatabaseName: string = localize('defaultDatabaseOption', ''); private _loadingDatabaseName: string = localize('loadingDatabaseOption', 'Loading...'); + private _serverGroupDisplayString: string = localize('serverGroup', 'Server group'); public DefaultServerGroup: IConnectionProfileGroup = { id: '', name: localize('defaultServerGroup', ''), @@ -112,14 +113,14 @@ export class ConnectionWidget { } else { authTypeOption.defaultValue = this.getAuthTypeDisplayName(Constants.sqlLogin); } - this._authTypeSelectBox = new SelectBox(authTypeOption.categoryValues.map(c => c.displayName), authTypeOption.defaultValue, this._contextViewService); + this._authTypeSelectBox = new SelectBox(authTypeOption.categoryValues.map(c => c.displayName), authTypeOption.defaultValue, this._contextViewService, undefined, { ariaLabel: authTypeOption.displayName }); } this._providerName = providerName; } public createConnectionWidget(container: HTMLElement): void { this._serverGroupOptions = [this.DefaultServerGroup]; - this._serverGroupSelectBox = new SelectBox(this._serverGroupOptions.map(g => g.name), this.DefaultServerGroup.name, this._contextViewService); + this._serverGroupSelectBox = new SelectBox(this._serverGroupOptions.map(g => g.name), this.DefaultServerGroup.name, this._contextViewService, undefined, { ariaLabel: this._serverGroupDisplayString }); this._previousGroupOption = this._serverGroupSelectBox.value; this._builder = $().div({ class: 'connection-table' }, (modelTableContent) => { modelTableContent.element('table', { class: 'connection-table-content' }, (tableContainer) => { @@ -218,8 +219,7 @@ export class ConnectionWidget { }); // Server group - let serverGroupLabel = localize('serverGroup', 'Server group'); - let serverGroupBuilder = DialogHelper.appendRow(this._tableContainer, serverGroupLabel, 'connection-label', 'connection-input'); + let serverGroupBuilder = DialogHelper.appendRow(this._tableContainer, this._serverGroupDisplayString, 'connection-label', 'connection-input'); DialogHelper.appendInputSelectBox(serverGroupBuilder, this._serverGroupSelectBox); let AdvancedLabel = localize('advanced', 'Advanced...'); diff --git a/src/sql/parts/disasterRecovery/backup/backup.component.ts b/src/sql/parts/disasterRecovery/backup/backup.component.ts index a890993e6c..909a0cc9fe 100644 --- a/src/sql/parts/disasterRecovery/backup/backup.component.ts +++ b/src/sql/parts/disasterRecovery/backup/backup.component.ts @@ -221,7 +221,7 @@ export class BackupComponent { ariaLabel: LocalizedStrings.RECOVERY_MODEL }); // Set backup type - this.backupTypeSelectBox = new SelectBox([], '', this.contextViewService); + this.backupTypeSelectBox = new SelectBox([], '', this.contextViewService, undefined, { ariaLabel: this.localizedStrings.BACKUP_TYPE }); this.backupTypeSelectBox.render(this.backupTypeElement.nativeElement); // Set copy-only check box @@ -283,13 +283,13 @@ export class BackupComponent { this.removePathButton.title = localize('removeFile', 'Remove files'); // Set compression - this.compressionSelectBox = new SelectBox(this.compressionOptions, this.compressionOptions[0], this.contextViewService); + this.compressionSelectBox = new SelectBox(this.compressionOptions, this.compressionOptions[0], this.contextViewService, undefined, { ariaLabel: this.localizedStrings.SET_BACKUP_COMPRESSION }); this.compressionSelectBox.render(this.compressionElement.nativeElement); // Set encryption - this.algorithmSelectBox = new SelectBox(this.encryptionAlgorithms, this.encryptionAlgorithms[0], this.contextViewService); + this.algorithmSelectBox = new SelectBox(this.encryptionAlgorithms, this.encryptionAlgorithms[0], this.contextViewService, undefined, { ariaLabel: this.localizedStrings.ALGORITHM }); this.algorithmSelectBox.render(this.encryptionAlgorithmElement.nativeElement); - this.encryptorSelectBox = new SelectBox([], '', this.contextViewService); + this.encryptorSelectBox = new SelectBox([], '', this.contextViewService, undefined, { ariaLabel: this.localizedStrings.CERTIFICATE_OR_ASYMMETRIC_KEY }); this.encryptorSelectBox.render(this.encryptorElement.nativeElement); // Set media @@ -911,4 +911,4 @@ export class BackupComponent { return backupInfo; } -} +} \ No newline at end of file diff --git a/src/sql/parts/disasterRecovery/restore/restoreDialog.ts b/src/sql/parts/disasterRecovery/restore/restoreDialog.ts index d3cd9b4181..a19d4199f7 100644 --- a/src/sql/parts/disasterRecovery/restore/restoreDialog.ts +++ b/src/sql/parts/disasterRecovery/restore/restoreDialog.ts @@ -273,7 +273,7 @@ export class RestoreDialog extends Modal { labelContainer.hide(); this._restorePlanData = new TableDataView(); this._restorePlanTable = new Table(labelContainer.getHTMLElement(), - { dataProvider: this._restorePlanData, columns: this._restorePlanColumn }, { enableColumnReorder: false }); + { dataProvider: this._restorePlanData, columns: this._restorePlanColumn }, { enableColumnReorder: false }); this._restorePlanTable.setSelectionModel(new RowSelectionModel({ selectActiveRow: false })); this._restorePlanTable.onSelectedRowsChanged((e, data) => this.backupFileCheckboxChanged(e, data)); }); @@ -330,7 +330,7 @@ export class RestoreDialog extends Modal { }]; this._fileListData = new TableDataView(); this._fileListTable = new Table(fileNameContainer.getHTMLElement(), - { dataProvider : this._fileListData, columns } , { enableColumnReorder: false }); + { dataProvider: this._fileListData, columns }, { enableColumnReorder: false }); this._fileListTable.setSelectionModel(new RowSelectionModel()); }); }); @@ -541,7 +541,7 @@ export class RestoreDialog extends Modal { }); inputContainer.div({ class: 'dialog-input' }, (inputCellContainer) => { - selectBox = new SelectBox(options, selectedOption, this._contextViewService, inputCellContainer.getHTMLElement()); + selectBox = new SelectBox(options, selectedOption, this._contextViewService, inputCellContainer.getHTMLElement(), { ariaLabel: label }); selectBox.render(inputCellContainer.getHTMLElement()); }); });