ObjectTree/List: Add ariaRootRole option. Addresses: #65939 (#67092)

* ObjectTree/List: Add ariaRootRole option.  Addresses: #65939

* Address @joaomoreno tweaks

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

@@ -62,6 +62,12 @@ export interface IIdentityProvider<T> {
 	getId(element: T): { toString(): string; };
 }
 
+// Default tree/list root role 'tree' does not support interactive element labeling, 'form' does
+export enum ListAriaRootRole {
+	TREE = 'tree',		// default tree structure role
+	FORM = 'form'		// unstructured - allows interactive elements within tree/list structure
+}
+
 export interface IKeyboardNavigationLabelProvider<T> {
 	getKeyboardNavigationLabel(element: T): { toString(): string; };
 	mightProducePrintableCharacter?(event: IKeyboardEvent): boolean;

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

@@ -16,7 +16,7 @@ import { KeyCode } from 'vs/base/common/keyCodes';
 import { StandardKeyboardEvent, IKeyboardEvent } from 'vs/base/browser/keyboardEvent';
 import { Event, Emitter, EventBufferer } from 'vs/base/common/event';
 import { domEvent } from 'vs/base/browser/event';
-import { IListVirtualDelegate, IListRenderer, IListEvent, IListContextMenuEvent, IListMouseEvent, IListTouchEvent, IListGestureEvent, IIdentityProvider, IKeyboardNavigationLabelProvider, IListDragAndDrop, IListDragOverReaction } from './list';
+import { IListVirtualDelegate, IListRenderer, IListEvent, IListContextMenuEvent, IListMouseEvent, IListTouchEvent, IListGestureEvent, IIdentityProvider, IKeyboardNavigationLabelProvider, IListDragAndDrop, IListDragOverReaction, ListAriaRootRole } from './list';
 import { ListView, IListViewOptions, IListViewDragAndDrop } from './listView';
 import { Color } from 'vs/base/common/color';
 import { mixin } from 'vs/base/common/objects';
@@ -779,11 +779,13 @@ export class DefaultStyleController implements IStyleController {
 	}
 }
 
+
 export interface IListOptions<T> extends IListStyles {
 	readonly identityProvider?: IIdentityProvider<T>;
 	readonly dnd?: IListDragAndDrop<T>;
 	readonly enableKeyboardNavigation?: boolean;
 	readonly keyboardNavigationLabelProvider?: IKeyboardNavigationLabelProvider<T>;
+	readonly ariaRole?: ListAriaRootRole;
 	readonly ariaLabel?: string;
 	readonly keyboardSupport?: boolean;
 	readonly multipleSelectionSupport?: boolean;
@@ -844,7 +846,8 @@ const DefaultOptions = {
 		onDragStart(): void { },
 		onDragOver() { return false; },
 		drop() { }
-	}
+	},
+	ariaRootRole: ListAriaRootRole.TREE
 };
 
 // TODO@Joao: move these utils into a SortedArray class
@@ -1165,7 +1168,13 @@ export class List<T> implements ISpliceable<T>, IDisposable {
 		};
 
 		this.view = new ListView(container, virtualDelegate, renderers, viewOptions);
-		this.view.domNode.setAttribute('role', 'tree');
+
+		if (typeof _options.ariaRole !== 'string') {
+			this.view.domNode.setAttribute('role', ListAriaRootRole.TREE);
+		} else {
+			this.view.domNode.setAttribute('role', _options.ariaRole);
+		}
+
 		DOM.addClass(this.view.domNode, this.idPrefix);
 		this.view.domNode.tabIndex = 0;
 

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

@@ -12,7 +12,7 @@ import { alert as ariaAlert } from 'vs/base/browser/ui/aria/aria';
 import { Button } from 'vs/base/browser/ui/button/button';
 import { Checkbox } from 'vs/base/browser/ui/checkbox/checkbox';
 import { InputBox } from 'vs/base/browser/ui/inputbox/inputBox';
-import { IListVirtualDelegate } from 'vs/base/browser/ui/list/list';
+import { IListVirtualDelegate, ListAriaRootRole } from 'vs/base/browser/ui/list/list';
 import { ISelectOptionItem, SelectBox } from 'vs/base/browser/ui/selectBox/selectBox';
 import { ToolBar } from 'vs/base/browser/ui/toolbar/toolbar';
 import { IObjectTreeOptions, ObjectTree } from 'vs/base/browser/ui/tree/objectTree';
@@ -437,11 +437,6 @@ export abstract class AbstractSettingRenderer implements ITreeRenderer<SettingsT
 		template.deprecationWarningElement.innerText = element.setting.deprecationMessage || '';
 		this.renderValue(element, <ISettingItemTemplate>template, onChange);
 
-		// Remove tree attributes - sometimes overridden by tree - should be managed there
-		template.containerElement.parentElement.parentElement.removeAttribute('role');
-		template.containerElement.parentElement.parentElement.removeAttribute('aria-level');
-		template.containerElement.parentElement.parentElement.removeAttribute('aria-posinset');
-		template.containerElement.parentElement.parentElement.removeAttribute('aria-setsize');
 	}
 
 	private renderDescriptionMarkdown(element: SettingsTreeSettingElement, text: string, disposeables: IDisposable[]): HTMLElement {
@@ -1292,11 +1287,14 @@ export class SettingsTree extends ObjectTree<SettingsTreeElement> {
 	) {
 		const treeClass = 'settings-editor-tree';
 
+		// Must use role = EListAriaRootRole.FORM for interactive elements in settingsTree
+
 		super(container,
 			new SettingsTreeDelegate(),
 			renderers,
 			{
 				supportDynamicHeights: true,
+				ariaRole: ListAriaRootRole.FORM,
 				ariaLabel: localize('treeAriaLabel', "Settings"),
 				identityProvider: {
 					getId(e) {

src/vs/workbench/parts/preferences/electron-browser/settingsEditor2.ts

@@ -605,10 +605,6 @@ export class SettingsEditor2 extends BaseEditor {
 			this.settingRenderers.allRenderers));
 		this.settingsTree.getHTMLElement().attributes.removeNamedItem('tabindex');
 
-		// Have to redefine role of the tree widget to form for input elements
-		// TODO:CDL make this an option for tree
-		this.settingsTree.getHTMLElement().setAttribute('role', 'form');
-
 		// this._register(this.settingsTree.onDidScroll(() => {
 		// 	this.updateTreeScrollSync();
 		// }));