list: accessibilityProvider.getWidgetRole

src/vs/base/browser/ui/list/listWidget.ts

@@ -822,7 +822,6 @@ export interface IListOptions<T> {
 	readonly automaticKeyboardNavigation?: boolean;
 	readonly keyboardNavigationLabelProvider?: IKeyboardNavigationLabelProvider<T>;
 	readonly keyboardNavigationDelegate?: IKeyboardNavigationDelegate;
-	readonly ariaRole?: string;
 	readonly keyboardSupport?: boolean;
 	readonly multipleSelectionSupport?: boolean;
 	readonly multipleSelectionController?: IMultipleSelectionController<T>;
@@ -1186,7 +1185,8 @@ export class List<T> implements ISpliceable<T>, IDisposable {
 		renderers: IListRenderer<any /* TODO@joao */, any>[],
 		private _options: IListOptions<T> = DefaultOptions
 	) {
-		this.selection = new SelectionTrait(this._options.ariaRole !== 'listbox');
+		const role = this._options.accessibilityProvider && this._options.accessibilityProvider.getWidgetRole ? this._options.accessibilityProvider?.getWidgetRole() : 'list';
+		this.selection = new SelectionTrait(role !== 'listbox');
 		this.focus = new Trait('focused');
 
 		mixin(_options, defaultStyles, false);
@@ -1211,7 +1211,7 @@ export class List<T> implements ISpliceable<T>, IDisposable {
 		};
 
 		this.view = new ListView(container, virtualDelegate, renderers, viewOptions);
-		this.view.domNode.setAttribute('role', _options.ariaRole ?? 'list');
+		this.view.domNode.setAttribute('role', role);
 
 		if (_options.styleController) {
 			this.styleController = _options.styleController(this.view.domId);

src/vs/base/browser/ui/selectBox/selectBoxCustom.ts

@@ -20,6 +20,7 @@ import { ISelectBoxDelegate, ISelectOptionItem, ISelectBoxOptions, ISelectBoxSty
 import { isMacintosh } from 'vs/base/common/platform';
 import { renderMarkdown } from 'vs/base/browser/markdownRenderer';
 import { IContentActionHandler } from 'vs/base/browser/formattedTextRenderer';
+import { localize } from 'vs/nls';
 
 const $ = dom.$;
 
@@ -723,7 +724,13 @@ export class SelectBoxList extends Disposable implements ISelectBoxDelegate, ILi
 			useShadows: false,
 			verticalScrollMode: ScrollbarVisibility.Visible,
 			keyboardSupport: false,
-			mouseSupport: false
+			mouseSupport: false,
+			accessibilityProvider: {
+				getAriaLabel: (element) => element.text,
+				getWidgetAriaLabel: () => localize('selectBox', "Select Box"),
+				getRole: () => 'option',
+				getWidgetRole: () => 'listbox'
+			}
 		});
 		if (this.selectBoxOptions.ariaLabel) {
 			this.selectList.ariaLabel = this.selectBoxOptions.ariaLabel;

src/vs/base/browser/ui/tree/abstractTree.ts

@@ -192,6 +192,7 @@ function asListOptions<T, TFilterData, TRef>(modelProvider: () => ITreeModel<T,
 			getWidgetAriaLabel() {
 				return options.accessibilityProvider!.getWidgetAriaLabel();
 			},
+			getWidgetRole: options.accessibilityProvider && options.accessibilityProvider.getWidgetRole ? () => options.accessibilityProvider!.getWidgetRole!() : () => 'tree',
 			getAriaLevel(node) {
 				return node.depth;
 			},
@@ -205,8 +206,7 @@ function asListOptions<T, TFilterData, TRef>(modelProvider: () => ITreeModel<T,
 				return options.keyboardNavigationLabelProvider!.getKeyboardNavigationLabel(node.element);
 			}
 		},
-		enableKeyboardNavigation: options.simpleKeyboardNavigation,
-		ariaRole: 'tree'
+		enableKeyboardNavigation: options.simpleKeyboardNavigation
 	};
 }
 

src/vs/base/browser/ui/tree/asyncDataTree.ts

@@ -245,6 +245,7 @@ function asObjectTreeOptions<TInput, T, TFilterData>(options?: IAsyncDataTreeOpt
 			getWidgetAriaLabel() {
 				return options.accessibilityProvider!.getWidgetAriaLabel();
 			},
+			getWidgetRole: options.accessibilityProvider!.getWidgetRole ? () => options.accessibilityProvider!.getWidgetRole!() : () => 'tree',
 			getAriaLevel: options.accessibilityProvider!.getAriaLevel && (node => {
 				return options.accessibilityProvider!.getAriaLevel!(node.element as T);
 			}),
@@ -269,7 +270,6 @@ function asObjectTreeOptions<TInput, T, TFilterData>(options?: IAsyncDataTreeOpt
 				e => (options.expandOnlyOnTwistieClick as ((e: T) => boolean))(e.element as T)
 			)
 		),
-		ariaRole: 'tree',
 		additionalScrollHeight: options.additionalScrollHeight
 	};
 }

src/vs/base/parts/quickinput/browser/quickInputList.ts

@@ -287,8 +287,7 @@ export class QuickInputList {
 			setRowLineHeight: false,
 			multipleSelectionSupport: false,
 			horizontalScrolling: false,
-			accessibilityProvider,
-			ariaRole: 'listbox'
+			accessibilityProvider
 		} as IListOptions<ListElement>);
 		this.list.getHTMLElement().id = id;
 		this.disposables.push(this.list);
@@ -723,6 +722,10 @@ class QuickInputAccessibilityProvider implements IListAccessibilityProvider<List
 		return element.saneAriaLabel;
 	}
 
+	getWidgetRole() {
+		return 'listbox';
+	}
+
 	getRole() {
 		return 'option';
 	}

src/vs/editor/contrib/suggest/suggestWidget.ts

@@ -607,7 +607,6 @@ export class SuggestWidget implements IContentWidget, IListVirtualDelegate<Compl
 			useShadows: false,
 			openController: { shouldOpen: () => false },
 			mouseSupport: false,
-			ariaRole: 'listbox',
 			accessibilityProvider: {
 				getRole: () => 'option',
 				getAriaLabel: (item: CompletionItem) => {
@@ -624,7 +623,8 @@ export class SuggestWidget implements IContentWidget, IListVirtualDelegate<Compl
 						return textLabel;
 					}
 				},
-				getWidgetAriaLabel: () => nls.localize('suggest', "Suggest")
+				getWidgetAriaLabel: () => nls.localize('suggest', "Suggest"),
+				getWidgetRole: () => 'listbox'
 			}
 		});
 

src/vs/workbench/contrib/preferences/browser/settingsTree.ts

@@ -1558,12 +1558,23 @@ export class SettingsTree extends ObjectTree<SettingsTreeElement> {
 			renderers,
 			{
 				supportDynamicHeights: true,
-				ariaRole: 'form',
 				identityProvider: {
 					getId(e) {
 						return e.id;
 					}
 				},
+				accessibilityProvider: {
+					getWidgetRole() {
+						return 'form';
+					},
+					getAriaLabel() {
+						// TODO@roblourens https://github.com/microsoft/vscode/issues/95862
+						return '';
+					},
+					getWidgetAriaLabel() {
+						return localize('settings', "Settings");
+					}
+				},
 				styleController: id => new DefaultStyleController(DOM.createStyleSheet(container), id),
 				filter: instantiationService.createInstance(SettingsTreeFilter, viewState)
 			});