diff --git a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/CreateAnalyticsBucketModal.tsx b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/CreateAnalyticsBucketModal.tsx index 8f642b146e3..a0988e643be 100644 --- a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/CreateAnalyticsBucketModal.tsx +++ b/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({ resolver: zodResolver(FormSchema), @@ -192,13 +194,8 @@ export const CreateAnalyticsBucketModal = ({ type={buttonType} className={buttonClassName} icon={} - disabled={ - !canCreateBuckets || - !icebergCatalogEnabled || - isLoading || - buckets.length >= 2 || - disabled - } + disabled={isDisabled} + tabIndex={isDisabled ? -1 : 0} style={{ justifyContent: 'start' }} onClick={() => setVisible(true)} tooltip={{ diff --git a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/index.tsx b/apps/studio/components/interfaces/Storage/AnalyticsBuckets/index.tsx index 16d0712664c..9bd173ab9cf 100644 --- a/apps/studio/components/interfaces/Storage/AnalyticsBuckets/index.tsx +++ b/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 = () => { )} {analyticsBuckets.map((bucket) => ( - + handleBucketNavigation(bucket.id, event)} + onKeyDown={(event) => { + if (event.key === 'Enter' || event.key === ' ') { + event.preventDefault() + handleBucketNavigation(bucket.id, event) + } + }} + tabIndex={0} + >

{bucket.id}

-
diff --git a/apps/studio/components/interfaces/Storage/CreateBucketModal.tsx b/apps/studio/components/interfaces/Storage/CreateBucketModal.tsx index 11c3ebbf411..a9b8eb011bb 100644 --- a/apps/studio/components/interfaces/Storage/CreateBucketModal.tsx +++ b/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', diff --git a/apps/studio/components/interfaces/Storage/FilesBuckets/BucketTable.tsx b/apps/studio/components/interfaces/Storage/FilesBuckets/BucketTable.tsx index dca347a3d51..2d9dcbb1ebb 100644 --- a/apps/studio/components/interfaces/Storage/FilesBuckets/BucketTable.tsx +++ b/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 ( - + handleBucketNavigation(bucket.id, event)} + onKeyDown={(event) => { + if (event.key === 'Enter' || event.key === ' ') { + event.preventDefault() + handleBucketNavigation(bucket.id, event) + } + }} + tabIndex={0} + > @@ -109,12 +120,6 @@ export const BucketTableRow = ({

{bucket.id}

{bucket.public && Public} - diff --git a/apps/studio/components/interfaces/Storage/FilesBuckets/index.tsx b/apps/studio/components/interfaces/Storage/FilesBuckets/index.tsx index 9444eb99a50..a9719679b61 100644 --- a/apps/studio/components/interfaces/Storage/FilesBuckets/index.tsx +++ b/apps/studio/components/interfaces/Storage/FilesBuckets/index.tsx @@ -80,7 +80,7 @@ export const FilesBuckets = () => { /> - diff --git a/apps/studio/components/interfaces/Storage/VectorBuckets/CreateVectorBucketDialog.tsx b/apps/studio/components/interfaces/Storage/VectorBuckets/CreateVectorBucketDialog.tsx index d4e801dec5e..34f3a3b6692 100644 --- a/apps/studio/components/interfaces/Storage/VectorBuckets/CreateVectorBucketDialog.tsx +++ b/apps/studio/components/interfaces/Storage/VectorBuckets/CreateVectorBucketDialog.tsx @@ -150,6 +150,7 @@ export const CreateVectorBucketDialog = () => { className="w-fit" icon={} disabled={!canCreateBuckets} + tabIndex={!canCreateBuckets ? -1 : 0} onClick={() => setVisible(true)} tooltip={{ content: { diff --git a/apps/studio/components/interfaces/Storage/VectorBuckets/index.tsx b/apps/studio/components/interfaces/Storage/VectorBuckets/index.tsx index 0be16217f31..329b41e47a1 100644 --- a/apps/studio/components/interfaces/Storage/VectorBuckets/index.tsx +++ b/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 ( - + handleBucketNavigation(name, event)} + onKeyDown={(event) => { + if (event.key === 'Enter' || event.key === ' ') { + event.preventDefault() + handleBucketNavigation(name, event) + } + }} + tabIndex={0} + >

{name}

-