fix(studio): table row focus and hover (#40454)

* fix table row focus and hover

* add basic tabIndex

* fix buttons

* other table types

* Minor clean up

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>

apps/studio/components/interfaces/Storage/AnalyticsBuckets/CreateAnalyticsBucketModal.tsx

@@ -125,6 +125,8 @@ export const CreateAnalyticsBucketModal = ({
 
   const config = BUCKET_TYPES['analytics']
   const isCreating = isEnablingExtension || isCreatingIcebergWrapper || isCreatingAnalyticsBucket
+  const isDisabled =
+    !canCreateBuckets || !icebergCatalogEnabled || isLoading || buckets.length >= 2 || disabled
 
   const form = useForm<CreateAnalyticsBucketForm>({
     resolver: zodResolver(FormSchema),
@@ -192,13 +194,8 @@ export const CreateAnalyticsBucketModal = ({
           type={buttonType}
           className={buttonClassName}
           icon={<Plus size={14} />}
-          disabled={
-            !canCreateBuckets ||
-            !icebergCatalogEnabled ||
-            isLoading ||
-            buckets.length >= 2 ||
-            disabled
-          }
+          disabled={isDisabled}
+          tabIndex={isDisabled ? -1 : 0}
           style={{ justifyContent: 'start' }}
           onClick={() => setVisible(true)}
           tooltip={{

apps/studio/components/interfaces/Storage/AnalyticsBuckets/index.tsx

@@ -13,7 +13,6 @@ import {
   Badge,
   Button,
   Card,
-  cn,
   Table,
   TableBody,
   TableCell,
@@ -163,18 +162,23 @@ export const AnalyticsBuckets = () => {
                     </TableRow>
                   )}
                   {analyticsBuckets.map((bucket) => (
-                    <TableRow key={bucket.id} className="relative cursor-pointer h-16">
+                    <TableRow
+                      key={bucket.id}
+                      className="relative cursor-pointer h-16 inset-focus"
+                      onClick={(event) => handleBucketNavigation(bucket.id, event)}
+                      onKeyDown={(event) => {
+                        if (event.key === 'Enter' || event.key === ' ') {
+                          event.preventDefault()
+                          handleBucketNavigation(bucket.id, event)
+                        }
+                      }}
+                      tabIndex={0}
+                    >
                       <TableCell className="w-2 pr-1">
                         <BucketIcon size={16} className="text-foreground-muted" />
                       </TableCell>
                       <TableCell>
                         <p className="whitespace-nowrap max-w-[512px] truncate">{bucket.id}</p>
-                        <button
-                          className={cn('absolute inset-0', 'inset-focus')}
-                          onClick={(event) => handleBucketNavigation(bucket.id, event)}
-                        >
-                          <span className="sr-only">Go to table details</span>
-                        </button>
                       </TableCell>
 
                       <TableCell>

apps/studio/components/interfaces/Storage/CreateBucketModal.tsx

@@ -214,6 +214,7 @@ export const CreateBucketModal = ({
           disabled={!canCreateBuckets}
           style={{ justifyContent: 'start' }}
           onClick={() => setVisible(true)}
+          tabIndex={!canCreateBuckets ? -1 : 0}
           tooltip={{
             content: {
               side: 'bottom',

apps/studio/components/interfaces/Storage/FilesBuckets/BucketTable.tsx

@@ -10,7 +10,7 @@ import { formatBytes } from 'lib/helpers'
 import { ChevronRight } from 'lucide-react'
 import { useRouter } from 'next/navigation'
 import type React from 'react'
-import { Badge, cn, TableCell, TableHead, TableHeader, TableRow } from 'ui'
+import { Badge, TableCell, TableHead, TableHeader, TableRow } from 'ui'
 
 type BucketTableMode = 'standard' | 'virtualized'
 
@@ -100,7 +100,18 @@ export const BucketTableRow = ({
   }
 
   return (
-    <BucketTableRow key={bucket.id} className="relative cursor-pointer h-16">
+    <BucketTableRow
+      key={bucket.id}
+      className="relative cursor-pointer h-16 group inset-focus"
+      onClick={(event) => handleBucketNavigation(bucket.id, event)}
+      onKeyDown={(event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+          event.preventDefault()
+          handleBucketNavigation(bucket.id, event)
+        }
+      }}
+      tabIndex={0}
+    >
       <BucketTableCell className="w-2 pr-1">
         <BucketIcon size={16} className="text-foreground-muted" />
       </BucketTableCell>
@@ -109,12 +120,6 @@ export const BucketTableRow = ({
           <p className="whitespace-nowrap max-w-[512px] truncate">{bucket.id}</p>
           {bucket.public && <Badge variant="warning">Public</Badge>}
         </div>
-        <button
-          className={cn('absolute inset-0', 'inset-focus')}
-          onClick={(event) => handleBucketNavigation(bucket.id, event)}
-        >
-          <span className="sr-only">Go to bucket details</span>
-        </button>
       </BucketTableCell>
 
       <BucketTableCell>

apps/studio/components/interfaces/Storage/FilesBuckets/index.tsx

@@ -80,7 +80,7 @@ export const FilesBuckets = () => {
               />
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
-                  <Button type="default" icon={<ArrowDownNarrowWide />}>
+                  <Button tabIndex={0} type="default" icon={<ArrowDownNarrowWide />}>
                     Sorted by {snap.sortBucket === 'alphabetical' ? 'name' : 'created at'}
                   </Button>
                 </DropdownMenuTrigger>

apps/studio/components/interfaces/Storage/VectorBuckets/CreateVectorBucketDialog.tsx

@@ -150,6 +150,7 @@ export const CreateVectorBucketDialog = () => {
           className="w-fit"
           icon={<Plus size={14} />}
           disabled={!canCreateBuckets}
+          tabIndex={!canCreateBuckets ? -1 : 0}
           onClick={() => setVisible(true)}
           tooltip={{
             content: {

apps/studio/components/interfaces/Storage/VectorBuckets/index.tsx

@@ -13,7 +13,6 @@ import {
   Badge,
   Button,
   Card,
-  cn,
   Table,
   TableBody,
   TableCell,
@@ -157,18 +156,23 @@ export const VectorsBuckets = () => {
                     const created = +bucket.creationTime * 1000
 
                     return (
-                      <TableRow key={id} className="relative cursor-pointer h-16">
+                      <TableRow
+                        key={id}
+                        className="relative cursor-pointer h-16 inset-focus"
+                        onClick={(event) => handleBucketNavigation(name, event)}
+                        onKeyDown={(event) => {
+                          if (event.key === 'Enter' || event.key === ' ') {
+                            event.preventDefault()
+                            handleBucketNavigation(name, event)
+                          }
+                        }}
+                        tabIndex={0}
+                      >
                         <TableCell className="w-2 pr-1">
                           <BucketIcon size={16} className="text-foreground-muted" />
                         </TableCell>
                         <TableCell>
                           <p className="whitespace-nowrap max-w-[512px] truncate">{name}</p>
-                          <button
-                            className={cn('absolute inset-0', 'inset-focus')}
-                            onClick={(event) => handleBucketNavigation(name, event)}
-                          >
-                            <span className="sr-only">Go to bucket details</span>
-                          </button>
                         </TableCell>
                         <TableCell>
                           <p className="text-foreground-light">