revert focus-ring changes and refine BigQuery file drop affordance

apps/design-system/content/docs/accessibility.mdx

@@ -62,7 +62,7 @@ Uses `outline` (not `ring`) so it paints reliably on interactive `<tr>`s. Tailwi
 &:focus-visible {
   outline-style: solid
   outline-width: 2px
-  outline-offset: -3px
+  outline-offset: -2px
   outline-color: var(--ring)
   border-radius: var(--radius-md)
 }

apps/studio/components/interfaces/Database/Replication/DestinationPanel/DestinationForm/BigQuery/Fields.tsx

@@ -127,43 +127,48 @@ export const BigQueryFields = ({
               }
             >
               <div
-                className={cn(
-                  'space-y-2 rounded-md',
-                  isDraggingFile && 'bg-surface-200 ring-2 ring-brand'
-                )}
+                className="relative"
                 onDragOver={handleDragOver}
                 onDragLeave={handleDragLeave}
                 onDrop={handleDrop}
               >
-                <FormControl>
-                  <TextArea
-                    {...field}
-                    rows={5}
-                    maxLength={MAX_SERVICE_ACCOUNT_KEY_LENGTH}
-                    placeholder={
-                      editMode
-                        ? STORED_SECRET_PLACEHOLDER
-                        : '{"type": "service_account", "project_id": "...", ...}'
-                    }
-                    className="max-h-[calc(13lh+1rem)] font-mono text-xs"
+                <div className={cn('space-y-2 transition-opacity', isDraggingFile && 'opacity-40')}>
+                  <FormControl>
+                    <TextArea
+                      {...field}
+                      rows={5}
+                      maxLength={MAX_SERVICE_ACCOUNT_KEY_LENGTH}
+                      placeholder={
+                        editMode
+                          ? STORED_SECRET_PLACEHOLDER
+                          : '{"type": "service_account", "project_id": "...", ...}'
+                      }
+                      className="max-h-[calc(13lh+1rem)] font-mono text-xs"
+                    />
+                  </FormControl>
+                  <input
+                    ref={serviceAccountFileInputRef}
+                    type="file"
+                    accept="application/json,.json"
+                    className="hidden"
+                    onChange={handleServiceAccountFileInputChange}
                   />
-                </FormControl>
-                <input
-                  ref={serviceAccountFileInputRef}
-                  type="file"
-                  accept="application/json,.json"
-                  className="hidden"
-                  onChange={handleServiceAccountFileInputChange}
-                />
-                <Button
-                  type="button"
-                  variant="default"
-                  size="tiny"
-                  icon={<Upload size={14} />}
-                  onClick={() => serviceAccountFileInputRef.current?.click()}
-                >
-                  Upload JSON file
-                </Button>
+                  <Button
+                    type="button"
+                    variant="default"
+                    size="tiny"
+                    icon={<Upload size={14} />}
+                    onClick={() => serviceAccountFileInputRef.current?.click()}
+                  >
+                    Upload JSON file
+                  </Button>
+                </div>
+                {isDraggingFile ? (
+                  <div
+                    aria-hidden="true"
+                    className="pointer-events-none absolute inset-0 rounded-md ring-2 ring-brand ring-offset-2 ring-offset-background"
+                  />
+                ) : null}
               </div>
             </FormItemLayout>
           )}

packages/config/css/utilities.css

@@ -201,7 +201,7 @@
   &:focus-visible {
     outline-style: solid;
     outline-width: 2px;
-    outline-offset: -3px;
+    outline-offset: -2px;
     outline-color: var(--ring);
     border-radius: var(--radius-md, 0.375rem);
   }

packages/ui/src/components/shadcn/ui/accordion.test.tsx

@@ -1,36 +0,0 @@
-import { render, screen } from '@testing-library/react'
-import { describe, expect, it } from 'vitest'
-
-import { Accordion, AccordionItem, AccordionTrigger } from './accordion'
-
-describe('AccordionTrigger', () => {
-  it('provides rounded geometry and the shared inset focus ring', () => {
-    render(
-      <Accordion type="single" collapsible>
-        <AccordionItem value="advanced">
-          <AccordionTrigger>Advanced settings</AccordionTrigger>
-        </AccordionItem>
-      </Accordion>
-    )
-
-    const trigger = screen.getByRole('button', { name: 'Advanced settings' })
-    expect(trigger).toHaveClass('rounded-md', 'px-2', 'relative', 'focus-inset')
-    expect(trigger).not.toHaveClass('focus-ring')
-    expect(trigger).not.toHaveClass('transition-colors')
-    expect(trigger).not.toHaveClass('transition-all')
-  })
-
-  it('supports an outer focus ring when explicitly requested', () => {
-    render(
-      <Accordion type="single" collapsible>
-        <AccordionItem value="advanced">
-          <AccordionTrigger focusVariant="ring">Advanced settings</AccordionTrigger>
-        </AccordionItem>
-      </Accordion>
-    )
-
-    const trigger = screen.getByRole('button', { name: 'Advanced settings' })
-    expect(trigger).toHaveClass('focus-ring')
-    expect(trigger).not.toHaveClass('focus-inset')
-  })
-})

packages/ui/src/components/shadcn/ui/accordion.tsx

@@ -19,50 +19,41 @@ AccordionItem.displayName = 'AccordionItem'
 
 const AccordionTrigger = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> & {
-    focusVariant?: 'ring' | 'inset'
-    hideIcon?: boolean
-  }
->(
-  (
-    { className, children, focusVariant = 'inset', hideIcon, disabled, tabIndex, ...props },
-    ref
-  ) => {
-    const computedTabIndex = getExplicitTabIndex(tabIndex, disabled)
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> & { hideIcon?: boolean }
+>(({ className, children, hideIcon, disabled, tabIndex, ...props }, ref) => {
+  const computedTabIndex = getExplicitTabIndex(tabIndex, disabled)
 
-    return (
-      <AccordionPrimitive.Header asChild>
-        <div className="flex">
-          <AccordionPrimitive.Trigger
-            ref={ref}
-            className={cn(
-              'cursor-pointer flex flex-1 gap-2 items-center justify-between rounded-md px-2 py-4 text-left',
-              'font-medium hover:underline',
-              focusVariant === 'ring' ? 'focus-ring' : 'relative focus-inset',
-              '[&[data-state=open]>svg]:rotate-180',
-              className
-            )}
-            {...props}
-            disabled={disabled}
-            tabIndex={computedTabIndex}
-          >
-            {children}
-            {!hideIcon && (
-              <ChevronDown
-                aria-hidden="true"
-                className={cn(
-                  'h-4 w-4 shrink-0',
-                  'transition-transform duration-200',
-                  'motion-reduce:transition-none motion-reduce:duration-0'
-                )}
-              />
-            )}
-          </AccordionPrimitive.Trigger>
-        </div>
-      </AccordionPrimitive.Header>
-    )
-  }
-)
+  return (
+    <AccordionPrimitive.Header asChild>
+      <div className="flex">
+        <AccordionPrimitive.Trigger
+          ref={ref}
+          className={cn(
+            'cursor-pointer flex flex-1 gap-2 items-center justify-between py-4 text-left',
+            'font-medium transition-all hover:underline',
+            '[&[data-state=open]>svg]:rotate-180',
+            className
+          )}
+          {...props}
+          disabled={disabled}
+          tabIndex={computedTabIndex}
+        >
+          {children}
+          {!hideIcon && (
+            <ChevronDown
+              aria-hidden="true"
+              className={cn(
+                'h-4 w-4 shrink-0',
+                'transition-transform duration-200',
+                'motion-reduce:transition-none motion-reduce:duration-0'
+              )}
+            />
+          )}
+        </AccordionPrimitive.Trigger>
+      </div>
+    </AccordionPrimitive.Header>
+  )
+})
 AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
 
 const AccordionContent = React.forwardRef<

packages/ui/src/components/shadcn/ui/collapsible.tsx

@@ -3,7 +3,6 @@
 import { Collapsible as CollapsiblePrimitive } from 'radix-ui'
 import * as React from 'react'
 
-import { cn } from '../../../lib/utils/cn'
 import { getExplicitTabIndex } from '../../../lib/utils/getExplicitTabIndex'
 
 const Collapsible = CollapsiblePrimitive.Root
@@ -11,13 +10,12 @@ const Collapsible = CollapsiblePrimitive.Root
 const CollapsibleTrigger = React.forwardRef<
   React.ElementRef<typeof CollapsiblePrimitive.CollapsibleTrigger>,
   React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.CollapsibleTrigger>
->(({ className, disabled, tabIndex, ...props }, ref) => {
+>(({ disabled, tabIndex, ...props }, ref) => {
   const computedTabIndex = getExplicitTabIndex(tabIndex, disabled)
 
   return (
     <CollapsiblePrimitive.CollapsibleTrigger
       ref={ref}
-      className={cn('relative rounded-md focus-inset', className)}
       {...props}
       disabled={disabled}
       tabIndex={computedTabIndex}