refactor(frontend): buttons on react-aria Button

frontend/src/js/button/BasicButton.tsx

@@ -1,9 +1,20 @@
-import type { ButtonHTMLAttributes, Ref } from "react";
-import { mergeProps, useFocusable, useObjectRef } from "react-aria";
+import type { CSSProperties, ReactNode, Ref } from "react";
+import {
+  Button as RacButton,
+  type ButtonProps as RacButtonProps,
+} from "react-aria-components";
 import { tv } from "tailwind-variants";
 
 export interface BasicButtonProps
-  extends ButtonHTMLAttributes<HTMLButtonElement> {
+  extends Omit<
+    RacButtonProps,
+    "className" | "style" | "children" | "isDisabled"
+  > {
+  className?: string;
+  style?: CSSProperties;
+  children?: ReactNode;
+  /** maps to react-aria's `isDisabled` */
+  disabled?: boolean;
   bare?: boolean;
   tiny?: boolean;
   small?: boolean;
@@ -33,6 +44,9 @@ const button = tv({
   },
 });
 
+// react-aria's Button is the trigger that TooltipTrigger, MenuTrigger and
+// friends expect. `onClick` is react-aria's alias for `onPress` and receives
+// a mouse event; react-aria prefers `onPress`.
 const BasicButton = ({
   ref,
   className,
@@ -44,29 +58,21 @@ const BasicButton = ({
   secondary,
   disabled,
   ...props
-}: BasicButtonProps & { ref?: Ref<HTMLButtonElement> }) => {
-  const domRef = useObjectRef(ref);
-  // A surrounding TooltipTrigger hands its hover/focus props to the
-  // nearest focusable element: this makes every button a tooltip trigger.
-  const { focusableProps } = useFocusable({ isDisabled: disabled }, domRef);
-
-  return (
-    <button
-      type="button"
-      className={button({
-        bare,
-        tiny,
-        small,
-        large,
-        active,
-        secondary,
-        className,
-      })}
-      disabled={disabled}
-      {...mergeProps(focusableProps, props)}
-      ref={domRef}
-    />
-  );
-};
+}: BasicButtonProps & { ref?: Ref<HTMLButtonElement> }) => (
+  <RacButton
+    className={button({
+      bare,
+      tiny,
+      small,
+      large,
+      active,
+      secondary,
+      className,
+    })}
+    isDisabled={disabled}
+    {...props}
+    ref={ref}
+  />
+);
 
 export default BasicButton;

frontend/src/js/previous-queries/list/DeleteProjectItemButton.tsx

@@ -40,7 +40,7 @@ export const DeleteProjectItemButton = ({ item }: { item: ProjectItemT }) => {
         <IconButton
           icon={faTimes}
           bare
-          title="delete"
+          aria-label={t("common.delete")}
           data-test-id="project-item-delete-button"
         />
       </ConfirmableTooltip>

frontend/src/js/previous-queries/list/ProjectItem.tsx

@@ -142,7 +142,7 @@ const ShareButton = ({
       <IconButton
         icon={isShared ? faUser : faUserRegular}
         bare
-        title="share"
+        aria-label={isShared ? t("common.shared") : t("common.share")}
         data-test-id="share"
         onClick={onClick}
       />

frontend/src/js/search-bar/SearchBar.tsx

@@ -74,7 +74,7 @@ const SearchBar = ({
           <IconButton
             className={searchButton()}
             icon={faSearch}
-            aria-hidden="true"
+            aria-label={placeholder}
             onClick={() => onSearch(localSearchTerm)}
           />
         </div>

frontend/src/js/standard-query-editor/QueryClearButton.tsx

@@ -20,7 +20,7 @@ const QueryClearButton = ({ className }: { className?: string }) => {
           confirmationText={t(`queryEditor.clearConfirm`)}
           onConfirm={onClearQuery}
         >
-          <IconButton tiny icon={faTrash} tabIndex={-1} />
+          <IconButton tiny icon={faTrash} excludeFromTabOrder />
         </ConfirmableTooltip>
         <Tooltip>{t("queryEditor.clear")}</Tooltip>
       </TooltipTrigger>

frontend/src/js/ui-components/BaseInput.tsx

@@ -215,9 +215,8 @@ const BaseInput = ({
             className={clearZoneIconButton()}
             tiny
             icon={faTimes}
-            tabIndex={-1}
+            excludeFromTabOrder
             disabled={disabled}
-            title={t("common.clearValue")}
             aria-label={t("common.clearValue")}
             onClick={() => onChange(null)}
           />

frontend/src/js/ui-components/ImportModal.tsx

@@ -75,9 +75,7 @@ export const ImportModal = ({
 
   const fileInputRef = useRef<HTMLInputElement>(null);
 
-  const onSubmitClick = (
-    e: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>,
-  ) => {
+  const onSubmitClick = (e: MouseEvent<Element, globalThis.MouseEvent>) => {
     e.stopPropagation();
 
     const lines = textInput

frontend/src/js/ui-components/InputTextarea/InputTextarea.tsx

@@ -74,8 +74,7 @@ export const InputTextarea = ({
             className={clearZoneIconButton()}
             tiny
             icon={faTimes}
-            tabIndex={-1}
-            title={t("common.clearValue")}
+            excludeFromTabOrder
             aria-label={t("common.clearValue")}
             onClick={() => onChange(null)}
           />

frontend/src/js/ui-components/TooManyValues.tsx

@@ -30,7 +30,6 @@ const TooManyValues = ({
       <IconButton
         icon={faTimes}
         tiny
-        title={t("common.clearValue")}
         aria-label={t("common.clearValue")}
         onClick={onClear}
       />