Use button instead of a for compare table queries

Author: koesie10

extensions/ql-vscode/src/view/common/TextButton.tsx

@@ -8,19 +8,21 @@ const StyledButton = styled.button<{ size: Size }>`
   color: var(--vscode-textLink-foreground);
   border: none;
   cursor: pointer;
-  font-size: ${(props) => props.size};
+  font-size: ${(props) => props.size ?? "1em"};
 `;
 
 const TextButton = ({
   size,
   onClick,
+  className,
   children,
 }: {
-  size: Size;
+  size?: Size;
   onClick: () => void;
+  className?: string;
   children: React.ReactNode;
 }) => (
-  <StyledButton size={size} onClick={onClick}>
+  <StyledButton size={size} onClick={onClick} className={className}>
     {children}
   </StyledButton>
 );

extensions/ql-vscode/src/view/compare/CompareTable.tsx

@@ -7,11 +7,19 @@ import { ResultRow } from "../../common/bqrs-cli-types";
 import RawTableRow from "../results/RawTableRow";
 import { vscode } from "../vscode-api";
 import { sendTelemetry } from "../common/telemetry";
+import TextButton from "../common/TextButton";
+import { styled } from "styled-components";
 
 interface Props {
   comparison: SetComparisonsMessage;
 }
 
+const OpenButton = styled(TextButton)`
+  cursor: pointer;
+  text-decoration: underline;
+  padding: 0;
+`;
+
 export default function CompareTable(props: Props) {
   const comparison = props.comparison;
   const rows = props.comparison.rows!;
@@ -46,32 +54,14 @@ export default function CompareTable(props: Props) {
       <thead>
         <tr>
           <td>
-            {/*
-              eslint-disable-next-line
-              jsx-a11y/anchor-is-valid,
-              jsx-a11y/click-events-have-key-events,
-              jsx-a11y/no-static-element-interactions
-            */}
-            <a
-              onClick={() => openQuery("from")}
-              className="vscode-codeql__compare-open"
-            >
+            <OpenButton onClick={() => openQuery("from")}>
               {comparison.stats.fromQuery?.name}
-            </a>
+            </OpenButton>
           </td>
           <td>
-            {/*
-              eslint-disable-next-line
-              jsx-a11y/anchor-is-valid,
-              jsx-a11y/click-events-have-key-events,
-              jsx-a11y/no-static-element-interactions
-            */}
-            <a
-              onClick={() => openQuery("to")}
-              className="vscode-codeql__compare-open"
-            >
+            <OpenButton onClick={() => openQuery("to")}>
               {comparison.stats.toQuery?.name}
-            </a>
+            </OpenButton>
           </td>
         </tr>
         <tr>

extensions/ql-vscode/src/view/results/resultsView.css

@@ -84,8 +84,15 @@
 .vscode-codeql__result-table th {
   border-top: 1px solid rgba(88, 96, 105, 0.25);
   border-bottom: 1px solid rgba(88, 96, 105, 0.25);
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial,
-    sans-serif, Apple Color Emoji, Segoe UI Emoji;
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    Segoe UI,
+    Helvetica,
+    Arial,
+    sans-serif,
+    Apple Color Emoji,
+    Segoe UI Emoji;
   background: rgba(225, 228, 232, 0.25);
   padding: 0.25em 0.5em;
   text-align: center;
@@ -225,11 +232,6 @@ td.vscode-codeql__path-index-cell {
   width: 100%;
 }
 
-.vscode-codeql__compare-open {
-  cursor: pointer;
-  text-decoration: underline;
-}
-
 .vscode-codeql__compare-body > tbody {
   vertical-align: top;
 }