Merge pull request #59236 from Microsoft/isidorn/listAriaRole

Introduce aria role to tree and list

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

@@ -672,6 +672,7 @@ export class DefaultStyleController implements IStyleController {
 export interface IListOptions<T> extends IListViewOptions, IListStyles {
 	identityProvider?: IIdentityProvider<T>;
 	ariaLabel?: string;
+	ariaRole?: string;
 	mouseSupport?: boolean;
 	selectOnMouseDown?: boolean;
 	focusOnMouseDown?: boolean;
@@ -949,6 +950,9 @@ export class List<T> implements ISpliceable<T>, IDisposable {
 		if (options.ariaLabel) {
 			this.view.domNode.setAttribute('aria-label', localize('aria list', "{0}. Use the navigation keys to navigate.", options.ariaLabel));
 		}
+		if (options.ariaRole) {
+			this.view.domNode.setAttribute('role', options.ariaRole);
+		}
 
 		this.style(options);
 	}

src/vs/base/parts/quickopen/browser/quickOpenViewer.ts

@@ -56,6 +56,10 @@ export class AccessibilityProvider implements IAccessibilityProvider {
 		return model.accessibilityProvider && model.accessibilityProvider.getAriaLabel(element);
 	}
 
+	public getAriaRole(tree: ITree, element: any): string {
+		return 'listitem';
+	}
+
 	getPosInSet(tree: ITree, element: any): string {
 		const model = this.modelProvider.getModel();
 		let i = 0;
@@ -140,4 +144,4 @@ export class Renderer implements IRenderer {
 		const model = this.modelProvider.getModel();
 		model.renderer.disposeTemplate(templateId, templateData);
 	}
-}
\ No newline at end of file
+}

src/vs/base/parts/tree/browser/tree.ts

@@ -446,6 +446,13 @@ export interface IAccessibilityProvider {
 	 */
 	getAriaLabel(tree: ITree, element: any): string;
 
+	/**
+	 * Given an element in the tree, return the ARIA role that should be associated with the
+	 * item. This helps screen readers to provide a meaningful role for the currently focused
+	 * tree element.
+	 */
+	getAriaRole(tree: ITree, element: any): string;
+
 	/**
 	 * Given an element in the tree return its aria-posinset. Should be between 1 and aria-setsize
 	 * https://www.w3.org/TR/wai-aria/states_and_properties#aria-posinset

src/vs/base/parts/tree/browser/treeDefaults.ts

@@ -467,6 +467,10 @@ export class DefaultAccessibilityProvider implements _.IAccessibilityProvider {
 	getAriaLabel(tree: _.ITree, element: any): string {
 		return null;
 	}
+
+	getAriaRole(tree: _.ITree, element: any): string {
+		return null;
+	}
 }
 
 export class DefaultTreestyler implements _.ITreeStyler {

src/vs/base/parts/tree/browser/treeView.ts

@@ -208,12 +208,17 @@ export class ViewItem implements IViewItem {
 		this.element.style.height = this.height + 'px';
 
 		// ARIA
-		this.element.setAttribute('role', 'treeitem');
 		const accessibility = this.context.accessibilityProvider;
 		const ariaLabel = accessibility.getAriaLabel(this.context.tree, this.model.getElement());
 		if (ariaLabel) {
 			this.element.setAttribute('aria-label', ariaLabel);
 		}
+
+		const ariaRole = accessibility.getAriaRole(this.context.tree, this.model.getElement());
+		if (ariaRole) {
+			this.element.setAttribute('role', ariaRole);
+		}
+
 		if (accessibility.getPosInSet && accessibility.getSetSize) {
 			this.element.setAttribute('aria-setsize', accessibility.getSetSize());
 			this.element.setAttribute('aria-posinset', accessibility.getPosInSet(this.context.tree, this.model.getElement()));

src/vs/editor/contrib/referenceSearch/referencesWidget.ts

@@ -422,6 +422,10 @@ class AriaProvider implements tree.IAccessibilityProvider {
 			return undefined;
 		}
 	}
+
+	public getAriaRole(tree: tree.ITree, element: any): string {
+		return 'treeitem';
+	}
 }
 
 class VSash {

src/vs/workbench/parts/debug/browser/breakpointsView.ts

@@ -79,7 +79,8 @@ export class BreakpointsView extends ViewletPanel {
 			new FunctionBreakpointInputRenderer(this.debugService, this.contextViewService, this.themeService)
 		], {
 				identityProvider: element => element.getId(),
-				multipleSelectionSupport: false
+				multipleSelectionSupport: false,
+				ariaRole: 'checkbox'
 			}) as WorkbenchList<IEnablement>;
 
 		CONTEXT_BREAKPOINTS_FOCUSED.bindTo(this.list.contextKeyService);

src/vs/workbench/parts/debug/browser/loadedScriptsView.ts

@@ -592,4 +592,8 @@ class LoadedSciptsAccessibilityProvider implements IAccessibilityProvider {
 		}
 		return null;
 	}
+
+	public getAriaRole(tree: ITree, element: any): string {
+		return 'treeitem';
+	}
 }

src/vs/workbench/parts/debug/electron-browser/callStackView.ts

@@ -556,4 +556,8 @@ class CallstackAccessibilityProvider implements IAccessibilityProvider {
 
 		return null;
 	}
+
+	public getAriaRole(tree: ITree, element: any): string {
+		return 'treeitem';
+	}
 }

src/vs/workbench/parts/debug/electron-browser/replViewer.ts

@@ -312,6 +312,10 @@ export class ReplExpressionsAccessibilityProvider implements IAccessibilityProvi
 
 		return null;
 	}
+
+	public getAriaRole(tree: ITree, element: any): string {
+		return 'treeitem';
+	}
 }
 
 export class ReplExpressionsActionProvider implements IActionProvider {

src/vs/workbench/parts/debug/electron-browser/variablesView.ts

@@ -310,6 +310,10 @@ class VariablesAccessibilityProvider implements IAccessibilityProvider {
 
 		return null;
 	}
+
+	public getAriaRole(tree: ITree, element: any): string {
+		return 'treeitem';
+	}
 }
 
 class VariablesController extends BaseDebugController {

src/vs/workbench/parts/debug/electron-browser/watchExpressionsView.ts

@@ -334,6 +334,10 @@ class WatchExpressionsAccessibilityProvider implements IAccessibilityProvider {
 
 		return null;
 	}
+
+	public getAriaRole(tree: ITree, element: any): string {
+		return 'treeitem';
+	}
 }
 
 class WatchExpressionsController extends BaseDebugController {

src/vs/workbench/parts/files/electron-browser/views/explorerViewer.ts

@@ -391,6 +391,10 @@ export class FileAccessibilityProvider implements IAccessibilityProvider {
 	public getAriaLabel(tree: ITree, stat: ExplorerItem): string {
 		return stat.name;
 	}
+
+	public getAriaRole(tree: ITree, element: any): string {
+		return 'treeitem';
+	}
 }
 
 // Explorer Controller

src/vs/workbench/parts/markers/electron-browser/markersTreeViewer.ts

@@ -311,4 +311,8 @@ export class MarkersTreeAccessibilityProvider implements IAccessibilityProvider
 		}
 		return null;
 	}
+
+	public getAriaRole(tree: ITree, element: any): string {
+		return 'treeitem';
+	}
 }

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

@@ -1396,6 +1396,10 @@ export class SettingsAccessibilityProvider implements IAccessibilityProvider {
 
 		return '';
 	}
+
+	public getAriaRole(tree: ITree, element: any): string {
+		return 'treeitem';
+	}
 }
 
 class NonExpandableOrSelectableTree extends Tree {
@@ -1614,4 +1618,4 @@ class CopySettingAsJSONAction extends Action {
 
 		return TPromise.as(null);
 	}
-}
\ No newline at end of file
+}

src/vs/workbench/parts/search/browser/searchResultsView.ts

@@ -361,6 +361,10 @@ export class SearchAccessibilityProvider implements IAccessibilityProvider {
 		}
 		return undefined;
 	}
+
+	public getAriaRole(tree: ITree, element: any): string {
+		return 'treeitem';
+	}
 }
 
 export class SearchFilter implements IFilter {