ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-16 10:58:30 -05:00
Code Issues Packages Projects Releases Wiki Activity

Fix listview component accessibility (#16492)

Browse Source 
* Add aria label to list component

* Fix accessibility for listview component
This commit is contained in:
Charles Gagnon
2021-07-30 10:44:53 -07:00
committed by GitHub
parent 788c84a1ee
commit 245ae5b9ee
3 changed files with 33 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
extensions/resource-deployment/src/ui/resourceTypePickerDialog.ts
View File

@@ -142,7 +142,8 @@ export class ResourceTypePickerDialog extends DialogBase {
'margin-top': '35px' 'margin-top': '35px'
}, },
options: items, options: items,
selectedOptionId: items[0].id selectedOptionId: items[0].id,
ariaLabel: loc.resourceTypeCategoryListViewTitle
}).component(); }).component();
this._toDispose.push(listView.onDidClick((e) => { this._toDispose.push(listView.onDidClick((e) => {
this._resourceSearchBox.value = ''; this._resourceSearchBox.value = '';

2
src/sql/workbench/browser/modelComponents/listView.component.html
View File

@@ -1,4 +1,4 @@
<div role="listbox" class="modelview-listview-container" [ngStyle]="CSSStyles"> <div class="modelview-listview-container" [ngStyle]="CSSStyles">
<div *ngIf="title" class="modelview-listview-title">{{title.text}}</div> <div *ngIf="title" class="modelview-listview-title">{{title.text}}</div>
<div #vscodelist> </div> <div #vscodelist> </div>
</div> </div>

35
src/sql/workbench/browser/modelComponents/listView.component.ts
View File

@@ -8,7 +8,7 @@ import { ComponentBase } from 'sql/workbench/browser/modelComponents/componentBa
import * as DOM from 'vs/base/browser/dom'; import * as DOM from 'vs/base/browser/dom';
import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent'; import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
import { KeyCode } from 'vs/base/common/keyCodes'; 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'; import 'vs/css!./media/listView';
@@ -47,10 +47,13 @@ export default class ListViewComponent extends ComponentBase<azdata.ListViewComp
mouseSupport: true, mouseSupport: true,
smoothScrolling: true, smoothScrolling: true,
verticalScrollMode: ScrollbarVisibility.Auto, verticalScrollMode: ScrollbarVisibility.Auto,
accessibilityProvider: new OptionsListAccessibilityProvider(this)
}; };
this._optionsList = new List<azdata.ListViewOption>('ModelViewListView', this._vscodeList.nativeElement, new OptionListDelegate(ListViewComponent.ROW_HEIGHT), [new OptionsListRenderer()], vscodelistOption); this._optionsList = new List<azdata.ListViewOption>('ModelViewListView',
this._vscodeList.nativeElement,
new OptionListDelegate(ListViewComponent.ROW_HEIGHT), [new OptionsListRenderer()],
vscodelistOption);
this._register(attachListStyler(this._optionsList, this.themeService)); this._register(attachListStyler(this._optionsList, this.themeService));
this._register(this._optionsList.onDidChangeSelection((e) => { this._register(this._optionsList.onDidChangeSelection((e) => {
@@ -112,8 +115,7 @@ export default class ListViewComponent extends ComponentBase<azdata.ListViewComp
if (this.selectedOptionId) { if (this.selectedOptionId) {
this._optionsList.setSelection([this.options.map(v => v.id).indexOf(this.selectedOptionId)]); this._optionsList.setSelection([this.options.map(v => v.id).indexOf(this.selectedOptionId)]);
} }
this._optionsList.ariaLabel = this.ariaLabel;
} }
public selectOptionByIdx(idx: number): void { public selectOptionByIdx(idx: number): void {
@@ -192,3 +194,26 @@ class OptionsListRenderer implements IListRenderer<azdata.ListViewOption, Extens
// noop // noop
} }
} }
class OptionsListAccessibilityProvider implements IListAccessibilityProvider<azdata.ListViewOption> {
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';
}
}