From a1c5adf4b2c8849afceb08156e0ecbc9d255c8f1 Mon Sep 17 00:00:00 2001 From: Aasim Khan Date: Wed, 24 May 2023 10:21:38 -0700 Subject: [PATCH] Adding visual label to find node widget (#23197) --- .../executionPlan/browser/media/executionPlan.css | 7 ++++++- .../browser/widgets/nodeSearchWidget.ts | 13 +++++++++++-- 2 files changed, 17 insertions(+), 3 deletions(-) diff --git a/src/sql/workbench/contrib/executionPlan/browser/media/executionPlan.css b/src/sql/workbench/contrib/executionPlan/browser/media/executionPlan.css index a11d556e2e..e46c010191 100644 --- a/src/sql/workbench/contrib/executionPlan/browser/media/executionPlan.css +++ b/src/sql/workbench/contrib/executionPlan/browser/media/executionPlan.css @@ -69,7 +69,12 @@ However we always want it to be the width of the container it is resizing. flex-direction: row; padding: 5px; height: auto; - width: 420px; + width: 460px; +} + +.eps-container .execution-plan .plan .plan-action-container .search-node-widget .property-name-label { + flex: 0 60px; + line-height: 26px } /* input bar styling in search node action view */ diff --git a/src/sql/workbench/contrib/executionPlan/browser/widgets/nodeSearchWidget.ts b/src/sql/workbench/contrib/executionPlan/browser/widgets/nodeSearchWidget.ts index 5555f49dd7..0cf897ce37 100644 --- a/src/sql/workbench/contrib/executionPlan/browser/widgets/nodeSearchWidget.ts +++ b/src/sql/workbench/contrib/executionPlan/browser/widgets/nodeSearchWidget.ts @@ -53,11 +53,20 @@ export class NodeSearchWidget extends ExecutionPlanWidgetBase { @IThemeService public readonly themeService: IThemeService ) { super(DOM.$('.search-node-widget'), 'searchWidget'); + const labelId = 'search-node-widget-label'; + const dialogLabel = localize('executionPlanFindNodeLabel', 'Find nodes'); + this.container.setAttribute('role', 'dialog'); + this.container.setAttribute('aria-labelledby', labelId); + + const label = DOM.$('label.property-name-label'); + label.innerText = dialogLabel; + label.id = labelId; + this.container.appendChild(label); // property name dropdown this._propertyNameSelectBoxContainer = DOM.$('.search-widget-property-name-select-box .dropdown-container'); this.container.appendChild(this._propertyNameSelectBoxContainer); - this._propertyNameSelectBoxContainer.style.width = '150px'; + this._propertyNameSelectBoxContainer.style.width = '120px'; const propDropdownOptions = this._executionPlanDiagram.getUniqueElementProperties(); this._propertyNameSelectBox = this._register(new SelectBox(propDropdownOptions, propDropdownOptions[0], this.contextViewService, this._propertyNameSelectBoxContainer)); @@ -148,7 +157,7 @@ export class NodeSearchWidget extends ExecutionPlanWidgetBase { // Initial focus is set to the search text input box public focus() { - this._searchTextInputBox.focus(); + this._propertyNameSelectBox.focus(); } public searchNodes(): void {