Use button instead of a for clickable location links

Author: koesie10

extensions/ql-vscode/src/stories/results/locations/ClickableLocation.stories.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+
+import { Meta, StoryFn } from "@storybook/react";
+
+import { ClickableLocation as ClickableLocationComponent } from "../../../view/results/locations/ClickableLocation";
+
+import "../../../view/results/resultsView.css";
+
+export default {
+  title: "Results/Clickable Location",
+  component: ClickableLocationComponent,
+} as Meta<typeof ClickableLocationComponent>;
+
+const Template: StoryFn<typeof ClickableLocationComponent> = (args) => (
+  <ClickableLocationComponent {...args} />
+);
+
+export const ClickableLocation = Template.bind({});
+ClickableLocation.args = {
+  loc: {
+    uri: "file:/home/runner/work/sql2o-example/sql2o-example/src/main/java/org/example/HelloController.java",
+    startLine: 22,
+    startColumn: 27,
+    endLine: 22,
+    endColumn: 57,
+  },
+  label: "url : String",
+};

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

@@ -9,20 +9,28 @@ const StyledButton = styled.button<{ size: Size }>`
   border: none;
   cursor: pointer;
   font-size: ${(props) => props.size ?? "1em"};
+  padding: 0;
 `;
 
 const TextButton = ({
   size,
   onClick,
   className,
+  title,
   children,
 }: {
   size?: Size;
   onClick: () => void;
   className?: string;
+  title?: string;
   children: React.ReactNode;
 }) => (
-  <StyledButton size={size} onClick={onClick} className={className}>
+  <StyledButton
+    size={size}
+    onClick={onClick}
+    className={className}
+    title={title}
+  >
     {children}
   </StyledButton>
 );

extensions/ql-vscode/src/view/results/ResultTablesHeader.tsx

@@ -8,6 +8,8 @@ import {
   ParsedResultSets,
 } from "../../common/interface-types";
 import { basename } from "../../common/path";
+import { styled } from "styled-components";
+import TextButton from "../common/TextButton";
 
 interface Props {
   queryName: string;
@@ -16,6 +18,10 @@ interface Props {
   selectedTable: string;
 }
 
+const OpenQueryLink = styled(TextButton)`
+  text-decoration: none;
+`;
+
 export function ResultTablesHeader(props: Props) {
   const { queryPath, queryName, parsedResultSets, selectedTable } = props;
 
@@ -122,17 +128,9 @@ export function ResultTablesHeader(props: Props) {
       </button>
       <div className={tableHeaderItemClassName}>{queryName}</div>
       <div className={tableHeaderItemClassName}>
-        {/*
-            eslint-disable-next-line
-            jsx-a11y/anchor-is-valid
-          */}
-        <a
-          href="#"
-          onClick={openQueryHandler}
-          className="vscode-codeql__result-table-location-link"
-        >
+        <OpenQueryLink onClick={openQueryHandler}>
           Open {basename(queryPath)}
-        </a>
+        </OpenQueryLink>
       </div>
     </span>
   );

extensions/ql-vscode/src/view/results/locations/ClickableLocation.tsx

@@ -2,6 +2,8 @@ import * as React from "react";
 import { useCallback } from "react";
 import { ResolvableLocationValue } from "../../../common/bqrs-cli-types";
 import { jumpToLocation } from "../result-table-utils";
+import TextButton from "../../common/TextButton";
+import { styled } from "styled-components";
 
 interface Props {
   loc: ResolvableLocationValue;
@@ -11,6 +13,10 @@ interface Props {
   onClick?: () => void;
 }
 
+const Link = styled(TextButton)`
+  text-decoration: none;
+`;
+
 /**
  * A clickable location link.
  */
@@ -31,20 +37,5 @@ export function ClickableLocation({
     [loc, databaseUri, onClick],
   );
 
-  return (
-    <>
-      {/*
-          eslint-disable-next-line
-          jsx-a11y/anchor-is-valid,
-        */}
-      <a
-        href="#"
-        className="vscode-codeql__result-table-location-link"
-        title={title}
-        onClick={handleClick}
-      >
-        {label}
-      </a>
-    </>
-  );
+  return <Link onClick={handleClick}>{label}</Link>;
 }

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

@@ -129,10 +129,6 @@
   text-align: left;
 }
 
-.vscode-codeql__result-table-location-link {
-  text-decoration: none;
-}
-
 select {
   background-color: var(--vscode-dropdown-background);
   color: var(--vscode-dropdown-foreground);