From 42b9f3b552380d19cf79a5cdef8c6ee44a8f6e6e Mon Sep 17 00:00:00 2001 From: Alexander Ivanov Date: Tue, 16 Nov 2021 08:13:18 -0800 Subject: [PATCH] Provide aria-labels for node checkboxes in the tree view. (#17676) During accessibility testing, it was discovered that screen reader does not announce what checkboxes in the tree view represent. It was merely announcing "checkbox unchecked", so it was not clear without visuals which checkbox the focus is on. This change sets an `aria-label` of the checkbox elements to match the label of the owning tree node. This way the announcement becomes "My Node; checkbox; unchecked". This is fine as a quick solution to the problem, but in the future we may want to consider adding additional checkbox label property to the nodes exposed by the tree provider, so that each checkbox can announce additional information, if needed. --- .../modelComponents/treeComponentRenderer.ts | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/src/sql/workbench/browser/modelComponents/treeComponentRenderer.ts b/src/sql/workbench/browser/modelComponents/treeComponentRenderer.ts index ef870ebdbf..31f26fcb48 100644 --- a/src/sql/workbench/browser/modelComponents/treeComponentRenderer.ts +++ b/src/sql/workbench/browser/modelComponents/treeComponentRenderer.ts @@ -67,6 +67,13 @@ export class TreeDataTemplate extends Disposable { } } + /** + * Sets the `aria-label` of the checkbox element associated with the tree node. + */ + public set checkboxLabel(value: string) { + this._checkbox.setAttribute('aria-label', value); + } + public set enableCheckbox(value: boolean) { if (value === undefined) { value = true; @@ -160,8 +167,13 @@ export class TreeComponentRenderer extends Disposable implements IRenderer { let label = treeNode.label; templateData.label.textContent = label.label; templateData.root.title = label.label; - templateData.checkboxState = this.getCheckboxState(treeNode); - templateData.enableCheckbox = treeNode.enabled; + + if (templateData.checkbox) { + // Set the properties of the node's checkbox, if it is present + templateData.checkboxState = this.getCheckboxState(treeNode); + templateData.enableCheckbox = treeNode.enabled; + templateData.checkboxLabel = label.label; + } } private getCheckboxState(treeNode: ITreeComponentItem): TreeCheckboxState {