dashboard: make comboboxes focusable (#35101)

- Work around headlessui to make sure the combobox button has tabIndex set to 0
- Improve focus styles on button and tooltip elements
- Improve some border styling in the filter controls

GitOrigin-RevId: 4a7d1ac3440364744a60363bc5ecc174784542a4

Author: atrakh

npm-packages/dashboard-common/src/elements/Button.tsx

@@ -103,7 +103,7 @@ export const Button = forwardRef<HTMLElement, ButtonProps>(function Button(
 });
 
 const button = tv({
-  base: "inline-flex animate-fadeInFromLoading select-none items-center whitespace-nowrap rounded text-sm font-medium transition-colors focus-visible:outline-0 focus-visible:ring-1 focus-visible:ring-util-accent/40 focus-visible:ring-offset-2",
+  base: "inline-flex animate-fadeInFromLoading select-none items-center whitespace-nowrap rounded text-sm font-medium transition-colors focus-visible:border focus-visible:border-border-selected focus-visible:outline-none",
   variants: {
     variant: {
       primary:

npm-packages/dashboard-common/src/elements/Combobox.tsx

@@ -53,7 +53,7 @@ export function Combobox<T>({
   disabled?: boolean;
   unknownLabel?: (value: T) => string;
   processFilterOption?: (option: string) => string;
-  size?: "xs" | "sm" | "md";
+  size?: "sm" | "md";
   icon?: React.ReactNode;
 }) {
   const [query, setQuery] = useState("");
@@ -62,6 +62,14 @@ export function Combobox<T>({
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(
     null,
   );
+
+  // Force tabindex to 0
+  useEffect(() => {
+    if (referenceElement?.children[0]) {
+      (referenceElement.children[0] as HTMLElement).tabIndex = 0;
+    }
+  }, [referenceElement]);
+
   const [isOpen, setIsOpen] = useState(false);
 
   const { styles, attributes, update } = usePopper(
@@ -150,11 +158,10 @@ export function Combobox<T>({
                   className={cn(
                     "flex gap-1 w-full items-center group",
                     "truncate relative text-left text-content-primary rounded disabled:bg-background-tertiary disabled:text-content-secondary disabled:cursor-not-allowed",
-                    "border focus:border-border-selected focus:outline-none bg-background-secondary text-sm",
+                    "border focus-visible:z-10 focus-visible:border-border-selected focus-visible:outline-none bg-background-secondary text-sm",
                     "hover:bg-background-tertiary",
                     "cursor-pointer",
                     open && "border-border-selected z-10",
-                    size === "xs" && "py-0.25 px-0.25 text-xs",
                     size === "sm" && "py-1 px-2 text-xs",
                     size === "md" && "py-2 px-3",
                     innerButtonClasses,

npm-packages/dashboard-common/src/elements/MultiSelectCombobox.tsx

@@ -42,6 +42,14 @@ export function MultiSelectCombobox({
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(
     null,
   );
+
+  // Force tabindex to 0
+  useEffect(() => {
+    if (referenceElement?.children[0]) {
+      (referenceElement.children[0] as HTMLElement).tabIndex = 0;
+    }
+  }, [referenceElement]);
+
   const [isOpen, setIsOpen] = useState(false);
 
   const { styles, attributes, update } = usePopper(

npm-packages/dashboard-common/src/elements/Tooltip.tsx

@@ -28,10 +28,7 @@ export function Tooltip({
       <RadixTooltip.Root>
         <RadixTooltip.Trigger
           asChild={wrapsButton}
-          className={classNames(
-            "focus-visible:outline-0 focus-visible:ring-1 focus-visible:ring-util-accent/40 rounded focus-visible:ring-offset-2",
-            className,
-          )}
+          className={classNames("focus-visible:outline-0", className)}
         >
           {children}
         </RadixTooltip.Trigger>

npm-packages/dashboard-common/src/features/data/components/DataFilters/DataFilters.tsx

@@ -107,17 +107,15 @@ export function DataFilters({
       <div className="flex flex-col">
         <div className="flex justify-between gap-2">
           <div className="flex items-center">
-            <div
-              className={cn(
-                "flex w-full divide-x divide-border-transparent rounded border bg-background-secondary",
-                showFilters && "rounded-b-none border-b-0",
-              )}
-            >
+            <div className="flex w-full rounded bg-background-secondary">
               <div className="flex items-center">
                 <Button
                   size="xs"
                   variant="neutral"
-                  className="rounded-r-none"
+                  className={cn(
+                    "rounded-r-none border border-r-0",
+                    showFilters && "rounded-b-none border-b-0",
+                  )}
                   icon={<ArrowLeftIcon className="my-[1px]" />}
                   inline
                   tip="Previous Filters"
@@ -131,7 +129,10 @@ export function DataFilters({
                 <Button
                   size="xs"
                   variant="neutral"
-                  className="rounded-none"
+                  className={cn(
+                    "rounded-none border border-x-0",
+                    showFilters && "border-b-0",
+                  )}
                   icon={<ArrowRightIcon className="my-[1px]" />}
                   tip="Next Filters"
                   inline

npm-packages/dashboard-common/src/features/data/components/DataFilters/FilterButton.tsx

@@ -5,6 +5,7 @@ import {
 } from "@radix-ui/react-icons";
 import { FilterExpression } from "system-udfs/convex/_system/frontend/lib/filters";
 import { Button } from "@common/elements/Button";
+import { cn } from "@common/lib/cn";
 
 export const filterMenuId = "filterMenu";
 
@@ -49,7 +50,10 @@ export function FilterButton({
       aria-controls={filterMenuId}
       icon={<MixerHorizontalIcon className="size-3.5" />}
       focused={open}
-      className="w-fit rounded-l-none text-xs"
+      className={cn(
+        "w-fit rounded-l-none text-xs border",
+        open && "rounded-b-none border-b-0",
+      )}
       inline
     >
       {filterButtonContent}

npm-packages/dashboard-common/src/features/data/components/FilterEditor/FilterEditor.tsx

@@ -192,7 +192,7 @@ function ValueEditor({
     state.field === "_creationTime" && typeof state.value === "number";
 
   return (
-    <div className="ml-[-1px] min-w-0 grow">
+    <div className="ml-[-1px] min-w-0 grow focus-within:z-20">
       {isTypeFilterOp(state.op) ? (
         <Combobox
           searchPlaceholder="Search types..."
@@ -221,7 +221,7 @@ function ValueEditor({
       ) : (
         <ObjectEditor
           key={objectEditorKey}
-          className="min-w-4 rounded-none border"
+          className="min-w-4 rounded-none border focus-within:border focus-within:border-border-selected"
           editorClassname="px-2 py-1 mt-0 rounded bg-background-secondary rounded-l-none rounded-r-none"
           size="sm"
           disableFolding