From cea246d195329043bb4f482cc99d1d2d75887502 Mon Sep 17 00:00:00 2001
From: ChloeGarciaMillerand <chloe@garcia.cloud>
Date: Fri, 24 Jul 2026 10:47:14 +0200
Subject: [PATCH] Fix: improve accessibility for icon buttons (Table Editor
 menu) (#47639)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

## What kind of change does this PR introduce?

Bug fix (accessibility improvement)

## What is the current behavior?

Icon-only buttons do not have explicit accessible names for screen
readers or tooltips.

## What is the new behavior?

All icon-only buttons now have explicit accessible names using visually
hidden text (sr-only), ensuring proper screen reader support.

## Additional context

Tooltip text is preserved or added for visual users.
No visual changes were introduced.


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Accessibility Improvements**
* Updated table editor action controls with clearer, context-aware
`aria-label`s (e.g., “Add new column”, “More options for …”, “New
table”).
* **UI Refinements**
* Added hover tooltips to key table editor actions, including
add-column, more-options dropdown triggers, and create-new-table button,
improving discoverability and guidance.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../grid/components/grid/AddColumn.tsx        | 15 ++++++++--
 .../TableGridEditor/GridHeaderActions.tsx     | 21 ++++++++------
 .../TableEditorLayout/EntityListItem.tsx      | 28 +++++++++++--------
 .../features/queue-table-operations.spec.ts   |  2 +-
 4 files changed, 44 insertions(+), 22 deletions(-)

diff --git a/apps/studio/components/grid/components/grid/AddColumn.tsx b/apps/studio/components/grid/components/grid/AddColumn.tsx
index d877d2d2d42..d10053b0daa 100644
--- a/apps/studio/components/grid/components/grid/AddColumn.tsx
+++ b/apps/studio/components/grid/components/grid/AddColumn.tsx
@@ -1,6 +1,6 @@
 import { Plus } from 'lucide-react'
 import type { CalculatedColumn } from 'react-data-grid'
-import { Button } from 'ui'
+import { Button, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
 
 import { ADD_COLUMN_KEY } from '../../constants'
 import { DefaultFormatter } from '../formatter/DefaultFormatter'
@@ -32,7 +32,18 @@ const AddColumnHeader = () => {
 
   return (
     <div className="flex h-full w-full py-1.5 flex items-center">
-      <Button block variant="text" onClick={tableEditorSnap.onAddColumn} icon={<Plus />} />
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            block
+            variant="text"
+            onClick={tableEditorSnap.onAddColumn}
+            icon={<Plus />}
+            aria-label="Add new column"
+          />
+        </TooltipTrigger>
+        <TooltipContent side="bottom">Add new column</TooltipContent>
+      </Tooltip>
     </div>
   )
 }
diff --git a/apps/studio/components/interfaces/TableGridEditor/GridHeaderActions.tsx b/apps/studio/components/interfaces/TableGridEditor/GridHeaderActions.tsx
index 0e8f86367dc..58b7588cab0 100644
--- a/apps/studio/components/interfaces/TableGridEditor/GridHeaderActions.tsx
+++ b/apps/studio/components/interfaces/TableGridEditor/GridHeaderActions.tsx
@@ -332,14 +332,19 @@ export const GridHeaderActions = ({ table, isRefetching }: GridHeaderActionsProp
           <RoleImpersonationPopover header="View data as a role" align="center" />
 
           <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button
-                variant="default"
-                icon={<MoreVertical />}
-                className="h-7 w-7"
-                aria-label="More actions"
-              />
-            </DropdownMenuTrigger>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    variant="default"
+                    icon={<MoreVertical />}
+                    className="h-7 w-7"
+                    aria-label={`More options for ${table.name}`}
+                  />
+                </DropdownMenuTrigger>
+              </TooltipTrigger>
+              <TooltipContent side="bottom">More options</TooltipContent>
+            </Tooltip>
             <DropdownMenuContent className="w-48">
               {isTable && realtimeEnabled && (
                 <DropdownMenuItem className="gap-x-2" onClick={() => setRealtimeDialogOpen(true)}>
diff --git a/apps/studio/components/layouts/TableEditorLayout/EntityListItem.tsx b/apps/studio/components/layouts/TableEditorLayout/EntityListItem.tsx
index eeffd9a142f..e3e000216d6 100644
--- a/apps/studio/components/layouts/TableEditorLayout/EntityListItem.tsx
+++ b/apps/studio/components/layouts/TableEditorLayout/EntityListItem.tsx
@@ -234,17 +234,23 @@ export const EntityListItem = ({
 
         {canEdit && (
           <DropdownMenu>
-            <DropdownMenuTrigger
-              asChild
-              className="text-foreground-lighter transition-all text-transparent group-hover:text-foreground data-open:text-foreground"
-            >
-              <Button
-                variant="text"
-                className="w-6 h-6"
-                icon={<MoreVertical size={14} strokeWidth={2} />}
-                onClick={(e) => e.preventDefault()}
-              />
-            </DropdownMenuTrigger>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <DropdownMenuTrigger
+                  asChild
+                  className="text-foreground-lighter transition-all text-transparent group-hover:text-foreground data-open:text-foreground"
+                >
+                  <Button
+                    variant="text"
+                    className="w-6 h-6"
+                    icon={<MoreVertical size={14} strokeWidth={2} />}
+                    onClick={(e) => e.preventDefault()}
+                    aria-label={`More options for ${entity.name}`}
+                  />
+                </DropdownMenuTrigger>
+              </TooltipTrigger>
+              <TooltipContent side="bottom">More options</TooltipContent>
+            </Tooltip>
             <DropdownMenuContent side="bottom" align="start" className="w-52">
               <DropdownMenuItem
                 key="copy-name"
diff --git a/e2e/studio/features/queue-table-operations.spec.ts b/e2e/studio/features/queue-table-operations.spec.ts
index 3ff1581a3a4..51cf82a4259 100644
--- a/e2e/studio/features/queue-table-operations.spec.ts
+++ b/e2e/studio/features/queue-table-operations.spec.ts
@@ -15,7 +15,7 @@ const enableQueueOperations = async (page: Page) => {
 }
 
 const openQueueDropdownAndClick = async (page: Page, itemName: string) => {
-  await page.getByRole('button', { name: 'More options' }).click()
+  await page.getByRole('button', { name: 'More options', exact: true }).click()
   await page.getByRole('menuitem', { name: itemName }).click()
 }