From ae9c27795e54cd1fa199ca89d3933ff9679d681c Mon Sep 17 00:00:00 2001
From: vaidankarswapnil <81285216+vaidankarswapnil@users.noreply.github.com>
Date: Fri, 17 Sep 2021 02:51:19 +0530
Subject: [PATCH] Fix execute query keyboard focus moves to hidden element
 under 'Results' section of executed Query 1 blade (#1082)

* fix a11y quertTab results section hidden element focus issue

* Removed commented code

* Resolved lint issues
---
 .../Tabs/QueryTab/QueryTabComponent.tsx       | 19 ++++++++-----------
 1 file changed, 8 insertions(+), 11 deletions(-)

diff --git a/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx b/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx
index 4f9a63dcf..9577e2f9f 100644
--- a/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx
+++ b/src/Explorer/Tabs/QueryTab/QueryTabComponent.tsx
@@ -1,4 +1,4 @@
-import { DetailsList, DetailsListLayoutMode, IColumn, Pivot, PivotItem, SelectionMode } from "@fluentui/react";
+import { DetailsList, DetailsListLayoutMode, IColumn, Pivot, PivotItem, SelectionMode, Text } from "@fluentui/react";
 import React, { Fragment } from "react";
 import SplitterLayout from "react-splitter-layout";
 import "react-splitter-layout/lib/index.css";
@@ -120,21 +120,13 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
   constructor(props: IQueryTabComponentProps) {
     super(props);
     const columns: IColumn[] = [
-      {
-        key: "column1",
-        name: "",
-        minWidth: 16,
-        maxWidth: 16,
-        data: String,
-        fieldName: "toolTip",
-        onRender: this.onRenderColumnItem,
-      },
       {
         key: "column2",
         name: "METRIC",
         minWidth: 200,
         data: String,
         fieldName: "metric",
+        onRender: this.onRenderColumnItem,
       },
       {
         key: "column3",
@@ -206,7 +198,12 @@ export default class QueryTabComponent extends React.Component<IQueryTabComponen
 
   public onRenderColumnItem(item: IDocument): JSX.Element {
     if (item.toolTip !== "") {
-      return <InfoTooltip>{`${item.toolTip}`}</InfoTooltip>;
+      return (
+        <>
+          <InfoTooltip>{`${item.toolTip}`}</InfoTooltip>
+          <Text style={{ paddingLeft: 10, margin: 0 }}>{`${item.metric}`}</Text>
+        </>
+      );
     } else {
       return undefined;
     }