ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-18 09:35:39 -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

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 #vscodelist> </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 { 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<azdata.ListViewComp
mouseSupport: true,
smoothScrolling: true,
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(this._optionsList.onDidChangeSelection((e) => {
@@ -112,8 +115,7 @@ export default class ListViewComponent extends ComponentBase<azdata.ListViewComp
if (this.selectedOptionId) {
this._optionsList.setSelection([this.options.map(v => v.id).indexOf(this.selectedOptionId)]);
}
this._optionsList.ariaLabel = this.ariaLabel;
}
public selectOptionByIdx(idx: number): void {
@@ -192,3 +194,26 @@ class OptionsListRenderer implements IListRenderer<azdata.ListViewOption, Extens
// 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';
}
}