ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-16 10:58:30 -05:00
Code Issues Packages Projects Releases Wiki Activity

Respect ARIA label specified int he tree component options. (#17674)

Browse Source 
During accessibility testing it was discovered that tree view in our wizard reads "Tree Node tree view" instead of the proper label that is specified. It turned out to be the problem with the tree component, where `ariaLabel` was hardcoded to "Tree Node", instead of the one provided in the options.

This change addresses the problem by passing through `ariaLabel` from the options object to the underlying tree control. I also removed the default `Tree Node` hardcoded label, as it didn't make much sense. This does mean that all tree-views that do not explicitly specify their aria-label will now get an empty label. I think this is better than having unrelated, unlocalized `Tree Node`.

I'm also worried about changes to the `ariaLabel` property after the component was initialized. I updated the code to propagate the value to the underlying tree view in the `setProperties` override of the tree component and hope that it will take care of it.
This commit is contained in:
Alexander Ivanov
2021-11-16 09:15:45 -08:00
committed by GitHub
parent 42b9f3b552
commit 1b83c4623d
2 changed files with 15 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/sql/workbench/browser/modelComponents/tree.component.ts
View File

@@ -110,7 +110,7 @@ export default class TreeComponent extends ComponentBase<azdata.TreeProperties>
{
indentPixels: 10,
twistiePixels: 20,
ariaLabel: 'Tree Node'
ariaLabel: this.ariaLabel
});
this._tree.setInput(new Root());
this._tree.domFocus();
@@ -162,6 +162,13 @@ export default class TreeComponent extends ComponentBase<azdata.TreeProperties>
if (this._treeRenderer) {
this._treeRenderer.options.withCheckbox = this.withCheckbox;
}
if (this._tree) {
// If tree was already initialized, update its properties
if (this.ariaLabel) {
this._tree.ariaLabel = this.ariaLabel;
}
}
}
public get withCheckbox(): boolean {

7
src/vs/base/parts/tree/browser/treeImpl.ts
View File

@@ -205,6 +205,13 @@ export class Tree implements _.ITree {
getContentHeight(): number {
return this.view.getContentHeight();
}
/**
* Sets the `aria-label` attribute of the underlying root HTML element.
*/
public set ariaLabel(value: string) {
this.getHTMLElement().setAttribute('aria-label', value);
}
// {{SQL CARBON EDIT}} - end block