From 492c42ccda402cac6c506c5ed0fb1e4656b0860d Mon Sep 17 00:00:00 2001
From: MokireddySampath <120497218+MokireddySampath@users.noreply.github.com>
Date: Wed, 27 Sep 2023 20:47:10 +0530
Subject: [PATCH] info button in stats tab is made accessible with keyboard
 (#1503)

* arialabel has been added to close button of invitational youtube video

* heading role has been addedd and tag has been changed to h1

* outline has been restored to choose columns link in entities page

* Update QuickstartCarousel.tsx

* Update SplashScreen.tsx

* Update TableEntity.tsx

* outline for edit entity has been added on focus

* keyboard accessibility added to rows in table entities

* learn more link under analytical store

* Column header is populated with text

* aria label has been changed for  the screen readers to read placeholder text along with label text

* Update queryBuilder.less

* Update TableEntity.tsx

* Update ThroughputInputAutoPilotV3Component.tsx

* Update ThroughputInputAutoPilotV3Component.tsx

* Update ThroughputInputAutoPilotV3Component.test.tsx.snap

* Update ThroughputInput.less

* Update PanelComponent.less

* Update DataTableBindingManager.ts

* Update AddCollectionPanel.tsx

* Update AddCollectionPanel.test.tsx.snap

* spec.ts files updated for the tests

* update to container.spec files

* info button in stats tab is made accessible with keyboard

* Update AddCollectionPanel.tsx

* Update AddCollectionPanel.tsx

* Update AddCollectionPanel.test.tsx.snap

* Update container.spec.ts

* Update container.spec.ts

* Update container.spec.ts

* Update container32.spec.ts

* Update container.spec.ts

* Update container.spec.ts

* info icons are added as a column item and keyboard focus has been added to them

* Update QueryTabComponent.tsx
---
 .../Tabs/QueryTab/QueryResultSection.tsx      | 28 +++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/Explorer/Tabs/QueryTab/QueryResultSection.tsx b/src/Explorer/Tabs/QueryTab/QueryResultSection.tsx
index 428c4a2c5..8bfacd59c 100644
--- a/src/Explorer/Tabs/QueryTab/QueryResultSection.tsx
+++ b/src/Explorer/Tabs/QueryTab/QueryResultSection.tsx
@@ -2,15 +2,17 @@ import {
   DetailsList,
   DetailsListLayoutMode,
   IColumn,
+  Icon,
+  Link,
   Pivot,
   PivotItem,
   SelectionMode,
   Stack,
   Text,
+  TooltipHost,
 } from "@fluentui/react";
 import { HttpHeaders, NormalizedEventKey } from "Common/Constants";
 import MongoUtility from "Common/MongoUtility";
-import { InfoTooltip } from "Common/Tooltip/InfoTooltip";
 import { QueryMetrics } from "Contracts/DataModels";
 import { EditorReact } from "Explorer/Controls/Editor/EditorReact";
 import { IDocument } from "Explorer/Tabs/QueryTab/QueryTabComponent";
@@ -51,11 +53,33 @@ export const QueryResultSection: React.FC<QueryResultProps> = ({
 
   const onRender = (item: IDocument): JSX.Element => (
     <>
-      <InfoTooltip>{`${item.toolTip}`}</InfoTooltip>
       <Text style={{ paddingLeft: 10, margin: 0 }}>{`${item.metric}`}</Text>
     </>
   );
   const columns: IColumn[] = [
+    {
+      key: "column1",
+      name: "",
+      minWidth: 10,
+      maxWidth: 12,
+      data: String,
+      fieldName: "",
+      onRender: (item: IDocument) => {
+        if (item.toolTip !== "") {
+          return (
+            <>
+              <TooltipHost content={`${item.toolTip}`}>
+                <Link style={{ color: "#323130" }}>
+                  <Icon iconName="Info" ariaLabel={`${item.toolTip}`} className="panelInfoIcon" tabIndex={0} />
+                </Link>
+              </TooltipHost>
+            </>
+          );
+        } else {
+          return undefined;
+        }
+      },
+    },
     {
       key: "column2",
       name: "METRIC",