Accessibility enhancements (#1678)

* adds aria-label to inputs for connection

* formatting

* add ariaLabels to all checkboxes/inputboxes/dropdowns

* fix labels on database dropdown action

* fix compile errors

* remove unnecessary code
This commit is contained in:
Anthony Dresser
2018-06-20 16:56:19 -07:00
committed by GitHub
parent a372c76e07
commit 9d2b206156
7 changed files with 21 additions and 14 deletions

View File

@@ -172,7 +172,8 @@ export class ConnectionWidget {
strictSelection: false,
placeholder: this._defaultDatabaseName,
maxHeight: 125,
ariaLabel: databaseOption.displayName
ariaLabel: databaseOption.displayName,
actionLabel: localize('toggleDatabaseNameDropdown', 'Select Database Toggle Dropdown')
});
let serverGroupLabel = localize('serverGroup', 'Server group');

View File

@@ -235,7 +235,8 @@ export class RestoreDialog extends Modal {
this._databaseDropdown = new Dropdown(inputCellContainer.getHTMLElement(), this._contextViewService, this._themeService,
{
strictSelection: false,
ariaLabel: LocalizedStrings.TARGETDATABASE
ariaLabel: LocalizedStrings.TARGETDATABASE,
actionLabel: localize('toggleDatabaseNameDropdown', 'Select Database Toggle Dropdown')
}
);
this._databaseDropdown.onValueChange(s => {

View File

@@ -4,8 +4,8 @@
*--------------------------------------------------------------------------------------------*/
import {
Component, Input, Inject, ChangeDetectorRef, forwardRef, ComponentFactoryResolver,
ViewChild, ViewChildren, ElementRef, Injector, OnDestroy, QueryList, AfterViewInit
Component, Input, Inject, ChangeDetectorRef, forwardRef,
ViewChild, ElementRef, OnDestroy, AfterViewInit
} from '@angular/core';
import * as sqlops from 'sqlops';
@@ -14,14 +14,11 @@ import { ComponentBase } from 'sql/parts/modelComponents/componentBase';
import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType } from 'sql/parts/modelComponents/interfaces';
import { Dropdown, IDropdownOptions } from 'sql/base/browser/ui/editableDropdown/dropdown';
import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox';
import { CommonServiceInterface } from 'sql/services/common/commonServiceInterface.service';
import { attachEditableDropdownStyler } from 'sql/common/theme/styler';
import { attachSelectBoxStyler } from 'vs/platform/theme/common/styler';
import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
import { Event, Emitter } from 'vs/base/common/event';
import { attachListStyler } from 'vs/platform/theme/common/styler';
@Component({
selector: 'modelview-dropdown',
@@ -60,7 +57,8 @@ export default class DropDownComponent extends ComponentBase implements ICompone
strictSelection: false,
placeholder: '',
maxHeight: 125,
ariaLabel: ''
ariaLabel: '',
actionLabel: ''
};
this._editableDropdown = new Dropdown(this._editableDropDownContainer.nativeElement, this.contextViewService, this.themeService,
dropdownOptions);

View File

@@ -448,7 +448,8 @@ export class ListDatabasesActionItem extends EventEmitter implements IActionItem
this._dropdown = new Dropdown(this.$databaseListDropdown.getHTMLElement(), contextViewProvider, themeService, {
strictSelection: true,
placeholder: selectString,
ariaLabel: selectString
ariaLabel: selectString,
actionLabel: nls.localize('toggleDatabaseNameDropdown', 'Select Database Toggle Dropdown')
});
this._dropdown.onValueChange(s => this.databaseSelected(s));