ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-01 09:35:41 -05:00
Code Issues Packages Projects Releases Wiki Activity

Provide aria-labels for node checkboxes in the tree view. (#17676)

Browse Source 
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.
This commit is contained in:
Alexander Ivanov
2021-11-16 08:13:18 -08:00
committed by GitHub
parent 343e314103
commit 42b9f3b552
1 changed files with 14 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/sql/workbench/browser/modelComponents/treeComponentRenderer.ts
View File

@@ -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 {