code · pull · Jul 21, 2026 · Jul 20, 2026
diff --git a/apps/learn/components/side-navigation-item.tsx b/apps/learn/components/side-navigation-item.tsx
@@ -93,6 +93,8 @@ const NavigationItem: React.FC<NavigationItemProps> = ({
       {hasChildren ? (
         <>
           <button
+            type="button"
+            tabIndex={0}
             onClick={handleButtonClick}
             className={cn('w-full flex items-center justify-between gap-2 zans', itemClasses)}
           >

diff --git a/apps/studio/.github/eslint-rule-baselines.json b/apps/studio/.github/eslint-rule-baselines.json
@@ -19,8 +19,7 @@
     "jsx-a11y/tabindex-no-positive": 0,
     "jsx-a11y/anchor-is-valid": 7,
     "jsx-a11y/heading-has-content": 2,
-    "jsx-a11y/no-distracting-elements": 0,
-    "supabase/require-explicit-tabindex": 82
+    "jsx-a11y/no-distracting-elements": 0
   },
   "ruleFiles": {
     "react-hooks/exhaustive-deps": {
@@ -1060,72 +1059,6 @@
     "jsx-a11y/heading-has-content": {
       "components/layouts/Scaffold.tsx": 2
     },
-    "jsx-a11y/no-distracting-elements": {},
-    "supabase/require-explicit-tabindex": {
-      "components/grid/components/grid/ColumnHeader.tsx": 1,
-      "components/grid/components/header/sort/SortRow.tsx": 1,
-      "components/interfaces/App/FeaturePreview/FeaturePreviewModal.tsx": 1,
-      "components/interfaces/BranchManagement/EdgeFunctionsDiffPanel.tsx": 1,
-      "components/interfaces/BranchManagement/WorkflowLogs.tsx": 1,
-      "components/interfaces/Connect/OrganizationSelector.tsx": 1,
-      "components/interfaces/ConnectSheet/ConnectConfigSection.tsx": 1,
-      "components/interfaces/ConnectSheet/ConnectionParameters.tsx": 1,
-      "components/interfaces/Database/EnumeratedTypes/EnumeratedTypeValueRow.tsx": 1,
-      "components/interfaces/Database/Policies/PolicyEditorPanel/PolicyEditorPanelHeader.tsx": 1,
-      "components/interfaces/Database/Privileges/PrivilegesTable.tsx": 1,
-      "components/interfaces/Database/Replication/DestinationPanel/DestinationForm/DuckLake/Fields.tsx": 1,
-      "components/interfaces/Database/Replication/DestinationPanel/ReadReplicaForm/ReadReplicaPricingDialog.tsx": 1,
-      "components/interfaces/Database/Replication/ReplicationPipelineStatus/SlotLagMetrics.tsx": 1,
-      "components/interfaces/Database/Replication/ReplicationPipelineStatus/SlotStatus.tsx": 1,
-      "components/interfaces/Database/Replication/ReplicationPipelineStatus/TableReplicationRow.tsx": 1,
-      "components/interfaces/Database/Roles/RoleRow.tsx": 1,
-      "components/interfaces/Database/Roles/RolesList.tsx": 2,
-      "components/interfaces/Database/Triggers/TriggerSheet.tsx": 1,
-      "components/interfaces/ExplainVisualizer/ExplainVisualizer.NodeRow.tsx": 1,
-      "components/interfaces/Functions/CommandRender.tsx": 1,
-      "components/interfaces/Functions/EdgeFunctionsListItem.tsx": 1,
-      "components/interfaces/Integrations/Integration/MarkdownContent.tsx": 1,
-      "components/interfaces/Integrations/Marketplace/MarketplaceFilterBar.tsx": 3,
-      "components/interfaces/LogDrains/LogDrainsCard.tsx": 1,
-      "components/interfaces/Observability/ServiceHealthTable.tsx": 1,
-      "components/interfaces/Organization/OrganizationCard.tsx": 1,
-      "components/interfaces/Organization/PrivateApps/Apps/ViewAppSheet/ViewAppSheetInfo.tsx": 1,
-      "components/interfaces/ProjectAPIDocs/FirstLevelNav.tsx": 6,
-      "components/interfaces/ProjectAPIDocs/SecondLevelNav.Layout.tsx": 1,
-      "components/interfaces/ProjectHome/ConnectSection.tsx": 1,
-      "components/interfaces/ProjectHome/SortableSection.tsx": 1,
-      "components/interfaces/QueryInsights/QueryInsightsChart/QueryInsightsChart.tsx": 2,
-      "components/interfaces/QueryPerformance/QueryPerformanceMetrics.tsx": 2,
-      "components/interfaces/Settings/Integrations/VercelIntegration/VercelIntegrationConnectionForm.tsx": 3,
-      "components/interfaces/Storage/BucketFilePickerDialog/BucketFilePickerHeader.tsx": 1,
-      "components/interfaces/Storage/StorageExplorer/FileExplorerRowEditing.tsx": 1,
-      "components/interfaces/Storage/StorageExplorer/MoveItemsModal.tsx": 1,
-      "components/interfaces/Storage/StoragePolicies/StoragePoliciesBucketsSection.tsx": 1,
-      "components/interfaces/Storage/StoragePolicies/StoragePolicyEditorModalTitle.tsx": 1,
-      "components/interfaces/Storage/StorageSettings/StorageSettings.ValidateSizeLimit.tsx": 1,
-      "components/interfaces/Support/AttachmentUpload.tsx": 3,
-      "components/interfaces/TableGridEditor/SidePanelEditor/SpreadsheetImport/SpreadsheetImportPreview.tsx": 1,
-      "components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/Column.tsx": 3,
-      "components/layouts/EdgeFunctionsLayout/EdgeFunctionDetailsLayout.tsx": 1,
-      "components/layouts/Navigation/LayoutHeader/FeedbackDropdown/FeedbackWidget.tsx": 1,
-      "components/layouts/ProjectLayout/LayoutHeader/MobileMenuContent/OrgMenuItem.tsx": 1,
-      "components/layouts/ProjectLayout/LayoutHeader/MobileMenuContent/TopLevelRouteItem.tsx": 1,
-      "components/layouts/TableEditorLayout/EntityListItem.tsx": 1,
-      "components/layouts/Tabs/CollapseButton.tsx": 1,
-      "components/layouts/Tabs/SortableTab.tsx": 1,
-      "components/layouts/Tabs/Tabs.tsx": 1,
-      "components/ui/AIAssistantPanel/ModelSelector.tsx": 1,
-      "components/ui/Charts/ChartHighlightActions.tsx": 1,
-      "components/ui/Charts/ComposedChart.utils.tsx": 1,
-      "components/ui/ComputeBadgeWrapper.tsx": 1,
-      "components/ui/DataTable/DataTableFilters/DataTableFilterCheckbox.tsx": 2,
-      "components/ui/DataTable/DataTableFilters/DataTableFilterCheckboxAsync.tsx": 1,
-      "components/ui/DevToolbar/ProjectStatusTab.tsx": 1,
-      "components/ui/DevToolbar/ResourceWarningsTab.tsx": 2,
-      "components/ui/FeaturePreviewBadge.tsx": 1,
-      "components/ui/FilterPopover.tsx": 1,
-      "components/ui/PasswordStrengthBar.tsx": 1,
-      "components/ui/SingleStat.tsx": 1
-    }
+    "jsx-a11y/no-distracting-elements": {}
   }
 }
diff --git a/apps/studio/components/grid/components/grid/ColumnHeader.tsx b/apps/studio/components/grid/components/grid/ColumnHeader.tsx
@@ -85,6 +85,7 @@ export function ColumnHeader<R>({
               <TooltipTrigger asChild>
                 <button
                   className="flex items-center"
+                  tabIndex={0}
                   onClick={() => openSheet(column.name as string)}
                 >
                   <span className="sr-only">View {column.name} index suggestion</span>

diff --git a/apps/studio/components/grid/components/header/sort/SortRow.tsx b/apps/studio/components/grid/components/header/sort/SortRow.tsx
@@ -40,6 +40,7 @@ const SortRow = ({ index, columnName, sort, onDelete, onToggle }: SortRowProps)
         {...listeners}
         className="opacity-50 hover:opacity-100 transition cursor-grab text-foreground"
         type="button"
+        tabIndex={0}
       >
         <GripVertical size={16} strokeWidth={1.5} />
       </button>

diff --git a/apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewModal.tsx b/apps/studio/components/interfaces/App/FeaturePreview/FeaturePreviewModal.tsx
@@ -251,6 +251,7 @@ const FeaturePreviewItem = ({
   return (
     <button
       type="button"
+      tabIndex={0}
       key={feature.key}
       onClick={() => selectFeaturePreview(feature.key)}
       className={cn(

diff --git a/apps/studio/components/interfaces/BranchManagement/EdgeFunctionsDiffPanel.tsx b/apps/studio/components/interfaces/BranchManagement/EdgeFunctionsDiffPanel.tsx
@@ -128,6 +128,7 @@ const FunctionDiff = ({
                   <li key={fileInfo.key} className="flex">
                     <button
                       type="button"
+                      tabIndex={0}
                       onClick={() => setActiveFileKey(fileInfo.key)}
                       className={cn(
                         'flex-1 text-left text-xs px-4 py-2 flex items-center gap-2',

diff --git a/apps/studio/components/interfaces/BranchManagement/WorkflowLogs.tsx b/apps/studio/components/interfaces/BranchManagement/WorkflowLogs.tsx
@@ -115,6 +115,7 @@ export const WorkflowLogs = ({ branch }: WorkflowLogsProps) => {
                       <li key={workflowRun.id} className="flex justify-between px-4 py-3 gap-2">
                         <button
                           type="button"
+                          tabIndex={workflowRun.id === projectRef ? -1 : 0}
                           disabled={workflowRun.id === projectRef}
                           onClick={() => setSelectedWorkflowRun(workflowRun)}
                           className="flex items-center gap-2 w-full justify-between"

diff --git a/apps/studio/components/interfaces/Connect/OrganizationSelector.tsx b/apps/studio/components/interfaces/Connect/OrganizationSelector.tsx
@@ -193,6 +193,7 @@ const ConnectOrganizationButton = ({
 }) => (
   <button
     type="button"
+    tabIndex={disabled ? -1 : 0}
     disabled={disabled}
     onClick={onClick}
     aria-pressed={selected}

diff --git a/apps/studio/components/interfaces/ConnectSheet/ConnectConfigSection.tsx b/apps/studio/components/interfaces/ConnectSheet/ConnectConfigSection.tsx
@@ -253,6 +253,7 @@ export function ModeSelector({ modes, selected, onChange }: ModeSelectorProps) {
         <button
           key={mode.id}
           type="button"
+          tabIndex={0}
           onClick={() => onChange(mode.id)}
           className={cn(
             'flex flex-col items-center gap-2 p-4 transition-colors border-r last:border-r-0',

diff --git a/apps/studio/components/interfaces/ConnectSheet/ConnectionParameters.tsx b/apps/studio/components/interfaces/ConnectSheet/ConnectionParameters.tsx
@@ -23,6 +23,9 @@ export const ConnectionParameters = ({ parameters, onCopy }: ConnectionParameter
             <span className="text-foreground-lighter">{param.key}:</span>
             <span className="ml-1 text-foreground">{param.value}</span>
             <button
+              type="button"
+              tabIndex={0}
+              aria-label={`Copy ${param.key}`}
               onClick={() => {
                 copyToClipboard(param.value, () => {
                   setCopiedMap((prev) => ({ ...prev, [param.key]: true }))
@@ -34,7 +37,7 @@ export const ConnectionParameters = ({ parameters, onCopy }: ConnectionParameter
               }}
               className={cn(
                 'text-foreground-lighter',
-                'ml-2 opacity-0 group-hover/param:opacity-100',
+                'ml-2 opacity-0 group-hover/param:opacity-100 focus-visible:opacity-100',
                 'hover:text-foreground rounded-xs p-1',
                 copiedMap[param.key] && 'opacity-100',
                 'transition-all'

diff --git a/apps/studio/components/interfaces/Database/EnumeratedTypes/EnumeratedTypeValueRow.tsx b/apps/studio/components/interfaces/Database/EnumeratedTypes/EnumeratedTypeValueRow.tsx
@@ -52,6 +52,7 @@ const EnumeratedTypeValueRow = <TFieldValues extends FieldValues>({
                   isDisabled ? 'text-foreground-lighter cursor-default!' : 'text-foreground'
                 }`}
                 type="button"
+                tabIndex={isDisabled ? -1 : 0}
                 disabled={isDisabled}
               >
                 <GripVertical size={16} strokeWidth={1.5} />

diff --git a/...dio/components/interfaces/Database/Policies/PolicyEditorPanel/PolicyEditorPanelHeader.tsx b/...dio/components/interfaces/Database/Policies/PolicyEditorPanel/PolicyEditorPanelHeader.tsx
@@ -105,6 +105,7 @@ export const PolicyEditorPanelHeader = ({
       <Tooltip>
         <TooltipTrigger asChild>
           <button
+            tabIndex={0}
             aria-expanded={showTools}
             aria-controls="ai-chat-assistant"
             className={cn(

diff --git a/apps/studio/components/interfaces/Database/Privileges/PrivilegesTable.tsx b/apps/studio/components/interfaces/Database/Privileges/PrivilegesTable.tsx
@@ -73,6 +73,7 @@ const PrivilegesTable = ({
         <Table.tr key={column.column_id}>
           <Table.td>
             <button
+              tabIndex={0}
               onClick={() => handleClickColumnName(column.column_id)}
               className="block w-full truncate text-left text-foreground"
             >

diff --git a/...ents/interfaces/Database/Replication/DestinationPanel/DestinationForm/DuckLake/Fields.tsx b/...ents/interfaces/Database/Replication/DestinationPanel/DestinationForm/DuckLake/Fields.tsx
@@ -76,6 +76,7 @@ const DuckLakeModeSelector = ({
           <button
             key={option.value}
             type="button"
+            tabIndex={0}
             role="radio"
             aria-checked={selected}
             onClick={() => onChange(option.value)}

diff --git a/...rfaces/Database/Replication/DestinationPanel/ReadReplicaForm/ReadReplicaPricingDialog.tsx b/...rfaces/Database/Replication/DestinationPanel/ReadReplicaForm/ReadReplicaPricingDialog.tsx
@@ -37,6 +37,7 @@ export const ReadReplicaPricingDialog = () => {
         <DialogTrigger asChild>
           <button
             type="button"
+            tabIndex={0}
             className={cn(InlineLinkClassName, 'cursor-pointer text-foreground-light')}
           >
             Learn more

diff --git a/...o/components/interfaces/Database/Replication/ReplicationPipelineStatus/SlotLagMetrics.tsx b/...o/components/interfaces/Database/Replication/ReplicationPipelineStatus/SlotLagMetrics.tsx
@@ -133,6 +133,7 @@ export const SlotLagMetricsList = ({
                     <TooltipTrigger asChild>
                       <button
                         type="button"
+                        tabIndex={0}
                         aria-label={`What is ${field.label}`}
                         className="inline-flex h-4 w-4 items-center justify-center rounded-full bg-surface-200 text-foreground-lighter transition-colors hover:bg-surface-300 hover:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-foreground-lighter"
                       >

diff --git a/...tudio/components/interfaces/Database/Replication/ReplicationPipelineStatus/SlotStatus.tsx b/...tudio/components/interfaces/Database/Replication/ReplicationPipelineStatus/SlotStatus.tsx
@@ -64,6 +64,7 @@ export const SlotStatusLegend = () => {
       <PopoverTrigger asChild>
         <button
           type="button"
+          tabIndex={0}
           aria-label="What do the slot statuses mean?"
           className="inline-flex h-4 w-4 items-center justify-center rounded-full bg-surface-200 text-foreground-lighter transition-colors hover:bg-surface-300 hover:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-foreground-lighter"
         >

diff --git a/...ponents/interfaces/Database/Replication/ReplicationPipelineStatus/TableReplicationRow.tsx b/...ponents/interfaces/Database/Replication/ReplicationPipelineStatus/TableReplicationRow.tsx
@@ -81,7 +81,11 @@ export const TableReplicationRow = ({
             <div className="text-sm text-foreground">
               {statusConfig.description}{' '}
               {isErrorState && 'reason' in table.state && (
-                <button className={InlineLinkClassName} onClick={() => onSelectShowError()}>
+                <button
+                  tabIndex={0}
+                  className={InlineLinkClassName}
+                  onClick={() => onSelectShowError()}
+                >
                   View error.
                 </button>
               )}

diff --git a/apps/studio/components/interfaces/Database/Roles/RoleRow.tsx b/apps/studio/components/interfaces/Database/Roles/RoleRow.tsx
@@ -117,6 +117,7 @@ export const RoleRow = ({ role, disabled = false, onSelectDelete }: RoleRowProps
           <button
             id={`collapsible-trigger-${role.id}`}
             type="button"
+            tabIndex={0}
             className="group flex w-full items-center justify-between rounded-sm py-3 px-card text-foreground"
             onClick={(event) => {
               event.preventDefault()

diff --git a/apps/studio/components/interfaces/Database/Roles/RolesList.tsx b/apps/studio/components/interfaces/Database/Roles/RolesList.tsx
@@ -149,6 +149,7 @@ export const RolesList = () => {
           />
           <div className="flex items-center border border-strong rounded-full w-min h-[26px]">
             <button
+              tabIndex={0}
               className={cn(
                 'text-xs w-[80px] h-full text-center rounded-l-full flex items-center justify-center transition',
                 filterType === 'all'
@@ -161,6 +162,7 @@ export const RolesList = () => {
             </button>
             <div className="h-full w-px border-r border-strong"></div>
             <button
+              tabIndex={0}
               className={cn(
                 'text-xs w-[80px] h-full text-center rounded-r-full flex items-center justify-center transition',
                 filterType === 'active'

diff --git a/apps/studio/components/interfaces/Database/Triggers/TriggerSheet.tsx b/apps/studio/components/interfaces/Database/Triggers/TriggerSheet.tsx
@@ -420,6 +420,7 @@ export const TriggerSheet = ({
                             {function_name.length === 0 ? (
                               <button
                                 type="button"
+                                tabIndex={0}
                                 className={cn(
                                   'relative w-full rounded-sm border border-default',
                                   'bg-surface-200 px-5 py-1 shadow-xs transition-all',

diff --git a/apps/studio/components/interfaces/ExplainVisualizer/ExplainVisualizer.NodeRow.tsx b/apps/studio/components/interfaces/ExplainVisualizer/ExplainVisualizer.NodeRow.tsx
@@ -49,6 +49,7 @@ export function ExplainNodeRow({ node, depth, maxDuration }: ExplainNodeRowProps
             {/* Expand/collapse button */}
             <button
               type="button"
+              tabIndex={canExpand ? 0 : -1}
               onClick={() => canExpand && setIsExpanded(!isExpanded)}
               disabled={!canExpand}
               className={cn(

diff --git a/apps/studio/components/interfaces/Functions/CommandRender.tsx b/apps/studio/components/interfaces/Functions/CommandRender.tsx
@@ -31,6 +31,7 @@ const Command = ({ item }: any) => {
             <span>{item.jsx ? item.jsx() : null} </span>
             <button
               type="button"
+              tabIndex={0}
               className="text-foreground-lighter hover:text-foreground"
               onClick={() => {
                 function onCopy(value: any) {

diff --git a/apps/studio/components/interfaces/Functions/EdgeFunctionsListItem.tsx b/apps/studio/components/interfaces/Functions/EdgeFunctionsListItem.tsx
@@ -74,6 +74,7 @@ export const EdgeFunctionsListItem = ({ function: item }: EdgeFunctionsListItemP
           </p>
           <button
             type="button"
+            tabIndex={0}
             className="text-foreground-lighter hover:text-foreground transition"
             onClick={(event: MouseEvent<HTMLButtonElement>) => {
               function onCopy(value: string) {

diff --git a/apps/studio/components/interfaces/Integrations/Integration/MarkdownContent.tsx b/apps/studio/components/interfaces/Integrations/Integration/MarkdownContent.tsx
@@ -58,6 +58,8 @@ export const MarkdownContent = ({
         {supportExpanding && (
           <div className={cn('bottom-0', !isExpanded ? 'absolute' : 'relative mt-3')}>
             <button
+              type="button"
+              tabIndex={0}
               className="text-foreground-light hover:text-foreground underline text-sm"
               onClick={() => setIsExpanded(!isExpanded)}
             >

diff --git a/apps/studio/components/interfaces/Integrations/Marketplace/MarketplaceFilterBar.tsx b/apps/studio/components/interfaces/Integrations/Marketplace/MarketplaceFilterBar.tsx
@@ -201,18 +201,21 @@ export const MarketplaceFilterBar = ({
       </DropdownMenu>
 
       {showClear && (
-        <button
+        <Button
           type="button"
+          variant="text"
+          size="tiny"
           onClick={onClearFilters}
-          className="px-1 text-xs text-foreground-light underline-offset-2 hover:underline"
+          className="text-foreground-light"
         >
           Clear all
-        </button>
+        </Button>
       )}
 
       <div className="ml-auto flex rounded-md border">
         <button
           type="button"
+          tabIndex={0}
           aria-label="Grid view"
           onClick={() => onViewModeChange('grid')}
           className={cn(
@@ -227,6 +230,7 @@ export const MarketplaceFilterBar = ({
         </button>
         <button
           type="button"
+          tabIndex={0}
           aria-label="List view"
           onClick={() => onViewModeChange('list')}
           className={cn(

diff --git a/apps/studio/components/interfaces/LogDrains/LogDrainsCard.tsx b/apps/studio/components/interfaces/LogDrains/LogDrainsCard.tsx
@@ -16,7 +16,7 @@ export const LogDrainsCard = ({
   onClick,
 }: LogDrainsCardProps) => {
   return (
-    <button className="w-full h-full text-left" onClick={onClick}>
+    <button type="button" tabIndex={0} className="w-full h-full text-left" onClick={onClick}>
       <Card className="p-6 cursor-pointer hover:bg-surface-200 hover:border-strong transition-colors h-48">
         <div className="flex flex-col gap-5">
           <div className="flex items-start justify-between w-full">

diff --git a/apps/studio/components/interfaces/Observability/ServiceHealthTable.tsx b/apps/studio/components/interfaces/Observability/ServiceHealthTable.tsx
@@ -127,6 +127,7 @@ const ServiceCell = ({
               <TooltipTrigger asChild>
                 <button
                   type="button"
+                  tabIndex={0}
                   className="relative z-10 text-foreground-lighter hover:text-foreground-light transition-colors shrink-0"
                   aria-label={`About ${service.name}`}
                 >

diff --git a/apps/studio/components/interfaces/Organization/OrganizationCard.tsx b/apps/studio/components/interfaces/Organization/OrganizationCard.tsx
@@ -118,6 +118,7 @@ export const CreateOrganizationCard = ({
     return (
       <button
         type="button"
+        tabIndex={disabled ? -1 : 0}
         disabled={disabled}
         onClick={onClick}
         className={cn(

diff --git a/...dio/components/interfaces/Organization/PrivateApps/Apps/ViewAppSheet/ViewAppSheetInfo.tsx b/...dio/components/interfaces/Organization/PrivateApps/Apps/ViewAppSheet/ViewAppSheetInfo.tsx
@@ -37,6 +37,8 @@ function CopyableId({ id, label }: { id: string; label: string }) {
 
   return (
     <button
+      type="button"
+      tabIndex={0}
       onClick={handleCopy}
       className="inline-flex items-center gap-x-1 cursor-pointer border border-transparent border-dashed rounded-sm transition-colors hover:bg-surface-100 hover:border hover:border-strong group font-mono text-xs text-foreground-light px-1 -ml-1"
     >