From f9e5a22cd96b931a2a3ac92dae3d0c9fedf35bf1 Mon Sep 17 00:00:00 2001
From: Kai Rollmann <kai.rollmann@gmail.com>
Date: Thu, 3 Sep 2026 10:54:07 +0200
Subject: [PATCH 1/2] refactor(frontend): buttons on react-aria Button

---
 frontend/src/js/button/BasicButton.tsx        | 60 ++++++++++---------
 .../list/DeleteProjectItemButton.tsx          |  2 +-
 .../js/previous-queries/list/ProjectItem.tsx  |  2 +-
 frontend/src/js/search-bar/SearchBar.tsx      |  2 +-
 .../QueryClearButton.tsx                      |  2 +-
 frontend/src/js/ui-components/BaseInput.tsx   |  3 +-
 frontend/src/js/ui-components/ImportModal.tsx |  4 +-
 .../InputTextarea/InputTextarea.tsx           |  3 +-
 .../src/js/ui-components/TooManyValues.tsx    |  1 -
 9 files changed, 40 insertions(+), 39 deletions(-)

diff --git a/frontend/src/js/button/BasicButton.tsx b/frontend/src/js/button/BasicButton.tsx
index 2a3f3dec0b..5fc75c076d 100644
--- a/frontend/src/js/button/BasicButton.tsx
+++ b/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;
+  /** HTML name kept for now, mapped 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, DialogTrigger and
+// friends expect, so every button built on this one works inside them as is.
+// `onClick` is react-aria's alias for `onPress` and receives a mouse event.
 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;
diff --git a/frontend/src/js/previous-queries/list/DeleteProjectItemButton.tsx b/frontend/src/js/previous-queries/list/DeleteProjectItemButton.tsx
index f344440c28..0e8cbb9c02 100644
--- a/frontend/src/js/previous-queries/list/DeleteProjectItemButton.tsx
+++ b/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>
diff --git a/frontend/src/js/previous-queries/list/ProjectItem.tsx b/frontend/src/js/previous-queries/list/ProjectItem.tsx
index bb8597a159..c69b6523cb 100644
--- a/frontend/src/js/previous-queries/list/ProjectItem.tsx
+++ b/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}
       />
diff --git a/frontend/src/js/search-bar/SearchBar.tsx b/frontend/src/js/search-bar/SearchBar.tsx
index 36374c0828..db2ef181ce 100644
--- a/frontend/src/js/search-bar/SearchBar.tsx
+++ b/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>
diff --git a/frontend/src/js/standard-query-editor/QueryClearButton.tsx b/frontend/src/js/standard-query-editor/QueryClearButton.tsx
index 3f1c91a324..241d42c8d7 100644
--- a/frontend/src/js/standard-query-editor/QueryClearButton.tsx
+++ b/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>
diff --git a/frontend/src/js/ui-components/BaseInput.tsx b/frontend/src/js/ui-components/BaseInput.tsx
index 196d2e7cd0..2e06785347 100644
--- a/frontend/src/js/ui-components/BaseInput.tsx
+++ b/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)}
           />
diff --git a/frontend/src/js/ui-components/ImportModal.tsx b/frontend/src/js/ui-components/ImportModal.tsx
index 4a14a578d5..d41a79aeb8 100644
--- a/frontend/src/js/ui-components/ImportModal.tsx
+++ b/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
diff --git a/frontend/src/js/ui-components/InputTextarea/InputTextarea.tsx b/frontend/src/js/ui-components/InputTextarea/InputTextarea.tsx
index 8ff53c232a..14609dec0f 100644
--- a/frontend/src/js/ui-components/InputTextarea/InputTextarea.tsx
+++ b/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)}
           />
diff --git a/frontend/src/js/ui-components/TooManyValues.tsx b/frontend/src/js/ui-components/TooManyValues.tsx
index 92082caa10..668bcc6254 100644
--- a/frontend/src/js/ui-components/TooManyValues.tsx
+++ b/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}
       />

From e925f9c89482523935d77ccd0440a2f00718d499 Mon Sep 17 00:00:00 2001
From: Kai Rollmann <kai.rollmann@gmail.com>
Date: Thu, 3 Sep 2026 12:24:39 +0200
Subject: [PATCH 2/2] comments describe the present

---
 frontend/src/js/button/BasicButton.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/js/button/BasicButton.tsx b/frontend/src/js/button/BasicButton.tsx
index 5fc75c076d..bdb8dcad4c 100644
--- a/frontend/src/js/button/BasicButton.tsx
+++ b/frontend/src/js/button/BasicButton.tsx
@@ -13,7 +13,7 @@ export interface BasicButtonProps
   className?: string;
   style?: CSSProperties;
   children?: ReactNode;
-  /** HTML name kept for now, mapped to react-aria's `isDisabled` */
+  /** maps to react-aria's `isDisabled` */
   disabled?: boolean;
   bare?: boolean;
   tiny?: boolean;
@@ -44,9 +44,9 @@ const button = tv({
   },
 });
 
-// react-aria's Button is the trigger that TooltipTrigger, DialogTrigger and
-// friends expect, so every button built on this one works inside them as is.
-// `onClick` is react-aria's alias for `onPress` and receives a mouse event.
+// 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,