diff --git a/extensions/resource-deployment/src/ui/resourceTypePickerDialog.ts b/extensions/resource-deployment/src/ui/resourceTypePickerDialog.ts index 0602cbf5d2..a1db696c93 100644 --- a/extensions/resource-deployment/src/ui/resourceTypePickerDialog.ts +++ b/extensions/resource-deployment/src/ui/resourceTypePickerDialog.ts @@ -142,7 +142,8 @@ export class ResourceTypePickerDialog extends DialogBase { 'margin-top': '35px' }, options: items, - selectedOptionId: items[0].id + selectedOptionId: items[0].id, + ariaLabel: loc.resourceTypeCategoryListViewTitle }).component(); this._toDispose.push(listView.onDidClick((e) => { this._resourceSearchBox.value = ''; diff --git a/src/sql/workbench/browser/modelComponents/listView.component.html b/src/sql/workbench/browser/modelComponents/listView.component.html index e658cbbc97..9d235d6261 100644 --- a/src/sql/workbench/browser/modelComponents/listView.component.html +++ b/src/sql/workbench/browser/modelComponents/listView.component.html @@ -1,4 +1,4 @@ -
+
{{title.text}}
diff --git a/src/sql/workbench/browser/modelComponents/listView.component.ts b/src/sql/workbench/browser/modelComponents/listView.component.ts index 4df0eb9893..4dd6fa4569 100644 --- a/src/sql/workbench/browser/modelComponents/listView.component.ts +++ b/src/sql/workbench/browser/modelComponents/listView.component.ts @@ -8,7 +8,7 @@ import { ComponentBase } from 'sql/workbench/browser/modelComponents/componentBa import * as DOM from 'vs/base/browser/dom'; import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent'; import { KeyCode } from 'vs/base/common/keyCodes'; -import { IListOptions, List } from 'vs/base/browser/ui/list/listWidget'; +import { IListAccessibilityProvider, IListOptions, List } from 'vs/base/browser/ui/list/listWidget'; import 'vs/css!./media/listView'; @@ -47,10 +47,13 @@ export default class ListViewComponent extends ComponentBase('ModelViewListView', this._vscodeList.nativeElement, new OptionListDelegate(ListViewComponent.ROW_HEIGHT), [new OptionsListRenderer()], vscodelistOption); + this._optionsList = new List('ModelViewListView', + this._vscodeList.nativeElement, + new OptionListDelegate(ListViewComponent.ROW_HEIGHT), [new OptionsListRenderer()], + vscodelistOption); this._register(attachListStyler(this._optionsList, this.themeService)); this._register(this._optionsList.onDidChangeSelection((e) => { @@ -112,8 +115,7 @@ export default class ListViewComponent extends ComponentBase v.id).indexOf(this.selectedOptionId)]); } - - + this._optionsList.ariaLabel = this.ariaLabel; } public selectOptionByIdx(idx: number): void { @@ -192,3 +194,26 @@ class OptionsListRenderer implements IListRenderer { + + constructor(private _listViewComponent: ListViewComponent) { } + + getAriaLabel(element: azdata.ListViewOption): string { + return element.label; + } + + getWidgetAriaLabel(): string { + return this._listViewComponent.ariaLabel; + } + + getRole(element: azdata.ListViewOption): string { + // Currently hardcode this to option since we don't support nested lists (which would use listitem) + return 'option'; + } + + getWidgetRole(): string { + return 'listbox'; + } + +}