Implement checkbox aria info (#182754)

Part of #116141
microsoft · May 17, 2023 · 578c3f0 · 578c3f0
1 parent 327bf4d
commit 578c3f0
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 4 deletions.
diff --git a/src/vs/workbench/api/common/extHostTreeViews.ts b/src/vs/workbench/api/common/extHostTreeViews.ts
@@ -24,6 +24,7 @@ import { IMarkdownString } from 'vs/base/common/htmlContent';
 import { CancellationToken, CancellationTokenSource } from 'vs/base/common/cancellation';
 import { checkProposedApiEnabled } from 'vs/workbench/services/extensions/common/extensions';
 import { ITreeViewsDnDService, TreeViewsDnDService } from 'vs/editor/common/services/treeViewsDnd';
+import { IAccessibilityInformation } from 'vs/platform/accessibility/common/accessibility';
 
 type TreeItemHandle = string;
 
@@ -768,14 +769,15 @@ class ExtHostTreeView<T> extends Disposable {
 		}
 		let checkboxState: TreeItemCheckboxState;
 		let tooltip: string | undefined = undefined;
+		let accessibilityInformation: IAccessibilityInformation | undefined = undefined;
 		if (typeof extensionTreeItem.checkboxState === 'number') {
 			checkboxState = extensionTreeItem.checkboxState;
-		}
-		else {
+		} else {
 			checkboxState = extensionTreeItem.checkboxState.state;
 			tooltip = extensionTreeItem.checkboxState.tooltip;
+			accessibilityInformation = extensionTreeItem.checkboxState.accessibilityInformation;
 		}
-		return { isChecked: checkboxState === TreeItemCheckboxState.Checked, tooltip };
+		return { isChecked: checkboxState === TreeItemCheckboxState.Checked, tooltip, accessibilityInformation };
 	}
 
 	private validateTreeItem(extensionTreeItem: vscode.TreeItem) {

diff --git a/src/vs/workbench/browser/parts/views/checkbox.ts b/src/vs/workbench/browser/parts/views/checkbox.ts
@@ -56,7 +56,7 @@ export class TreeItemCheckbox extends Disposable {
 				icon: node.checkbox.isChecked ? Codicon.check : undefined,
 				...defaultToggleStyles
 			});
-
+			this.setAccessibilityInformation(node.checkbox);
 			this.toggle.domNode.classList.add(TreeItemCheckbox.checkboxClass);
 			DOM.append(this.checkboxContainer, this.toggle.domNode);
 			this.registerListener(node);
@@ -78,6 +78,7 @@ export class TreeItemCheckbox extends Disposable {
 			node.checkbox.isChecked = this.toggle.checked;
 			this.toggle.setIcon(this.toggle.checked ? Codicon.check : undefined);
 			this.toggle.setTitle(this.createCheckboxTitle(node.checkbox));
+			this.setAccessibilityInformation(node.checkbox);
 			this.checkboxStateHandler.setCheckboxState(node);
 		}
 	}
@@ -87,6 +88,15 @@ export class TreeItemCheckbox extends Disposable {
 			checkbox.isChecked ? localize('checked', 'Checked') : localize('unchecked', 'Unchecked');
 	}
 
+	private setAccessibilityInformation(checkbox: ITreeItemCheckboxState) {
+		if (this.toggle && checkbox.accessibilityInformation) {
+			this.toggle.domNode.ariaLabel = checkbox.accessibilityInformation.label;
+			if (checkbox.accessibilityInformation.role) {
+				this.toggle.domNode.role = checkbox.accessibilityInformation.role;
+			}
+		}
+	}
+
 	private removeCheckbox() {
 		const children = this.checkboxContainer.children;
 		for (const child of children) {

diff --git a/src/vs/workbench/common/views.ts b/src/vs/workbench/common/views.ts
@@ -756,6 +756,7 @@ export type TreeCommand = Command & { originalId?: string };
 export interface ITreeItemCheckboxState {
 	isChecked: boolean;
 	tooltip?: string;
+	accessibilityInformation?: IAccessibilityInformation;
 }
 
 export interface ITreeItem {