Fix accessibility of alert table dropdown

Author: koesie10

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

@@ -8,16 +8,17 @@ 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"};
+  padding: 0;
 `;
 
 const TextButton = ({
   size,
   onClick,
   children,
 }: {
-  size: Size;
-  onClick: () => void;
+  size?: Size;
+  onClick: (e: React.MouseEvent) => void;
   children: React.ReactNode;
 }) => (
   <StyledButton size={size} onClick={onClick}>

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

@@ -1,4 +1,5 @@
 import * as React from "react";
+import TextButton from "../common/TextButton";
 import { chevronDown, chevronRight } from "./octicons";
 
 type Props = {
@@ -10,12 +11,8 @@ export function AlertTableDropdownIndicatorCell({ expanded, onClick }: Props) {
   const indicator = expanded ? chevronDown : chevronRight;
 
   return (
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-    <td
-      className="vscode-codeql__icon-cell vscode-codeql__dropdown-cell"
-      onMouseDown={onClick}
-    >
-      {indicator}
+    <td className="vscode-codeql__icon-cell">
+      <TextButton onClick={onClick}>{indicator}</TextButton>
     </td>
   );
 }

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;
@@ -167,10 +174,6 @@ td.vscode-codeql__icon-cell {
   width: 24px;
 }
 
-td.vscode-codeql__dropdown-cell:hover {
-  cursor: pointer;
-}
-
 td.vscode-codeql__path-index-cell {
   text-align: right;
 }