From cdf29e907695ecfa1b1d5c04fc3d55609b37d9d9 Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Mon, 30 Dec 2024 07:56:12 -0500
Subject: [PATCH] Fleet UI: Condensed view query report link accessibility
 (#25023)

---
 .../cards/Queries/HostQueriesTableConfig.tsx  | 24 ++++++++++++++-----
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/frontend/pages/hosts/details/cards/Queries/HostQueriesTableConfig.tsx b/frontend/pages/hosts/details/cards/Queries/HostQueriesTableConfig.tsx
index 863cf818b836..ba1014768173 100644
--- a/frontend/pages/hosts/details/cards/Queries/HostQueriesTableConfig.tsx
+++ b/frontend/pages/hosts/details/cards/Queries/HostQueriesTableConfig.tsx
@@ -8,6 +8,8 @@ import PerformanceImpactCell from "components/TableContainer/DataTable/Performan
 import TooltipWrapper from "components/TooltipWrapper";
 import ReportUpdatedCell from "pages/hosts/details/cards/Queries/ReportUpdatedCell";
 import Icon from "components/Icon";
+import { Link } from "react-router";
+import PATHS from "router/paths";
 
 interface IHostQueriesTableData extends Partial<IQueryStats> {
   performance: { indicator: string; id: number };
@@ -90,6 +92,7 @@ const generateColumnConfigs = (
       accessor: "performance",
       Cell: (cellProps: IPerformanceImpactCell) => {
         const baseClass = "performance-cell";
+        const queryId = cellProps.row.original.id;
         return (
           <span className={baseClass}>
             <PerformanceImpactCell
@@ -98,12 +101,21 @@ const generateColumnConfigs = (
               isHostSpecific
             />
             {!queryReportsDisabled &&
-              cellProps.row.original.should_link_to_hqr && (
-                <Icon
-                  name="chevron-right"
-                  className={`${baseClass}__link-icon`}
-                  color="core-fleet-blue"
-                />
+              cellProps.row.original.should_link_to_hqr &&
+              hostId &&
+              queryId && (
+                // parent row has same onClick functionality but link here is required for keyboard accessibility
+                <Link
+                  className={`${baseClass}__link`}
+                  title="link to host query report"
+                  to={PATHS.HOST_QUERY_REPORT(hostId, queryId)}
+                >
+                  <Icon
+                    name="chevron-right"
+                    className={`${baseClass}__link-icon`}
+                    color="core-fleet-blue"
+                  />
+                </Link>
               )}
           </span>
         );