From 0e573f67800c053975fbf048f32e5badd41970fc Mon Sep 17 00:00:00 2001
From: Jordan Lorho <jordan.lorho@gmail.com>
Date: Tue, 27 Oct 2026 17:44:33 +0100
Subject: [PATCH 1/3] fix(a11y): give DataTable row action buttons an
 accessible name

Icon-only row actions only referenced their tooltip through
aria-describedby, and several actions had no title at all, so screen
readers announced them as "button". The title is now required on
TableAction and used as the button's aria-label.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/DataTable.vue                | 9 ++-------
 src/components/comp_def.ts                  | 3 ++-
 src/components/tables/AppTable.vue          | 1 +
 src/components/tables/BundleTable.vue       | 2 ++
 src/components/tables/ChannelTable.vue      | 3 ++-
 src/pages/settings/organization/Members.vue | 1 +
 6 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/components/DataTable.vue b/src/components/DataTable.vue
index 16e6f5955d..96bbc0d107 100644
--- a/src/components/DataTable.vue
+++ b/src/components/DataTable.vue
@@ -431,10 +431,6 @@ function isActionDisabled(action: NonNullable<TableColumn['actions']>[number], e
   return Boolean(action.disabled && action.disabled(elem))
 }
 
-function tooltipIdFor(rowIndex: number, actionIndex: number): string {
-  return `datatable-action-tooltip-${rowIndex}-${actionIndex}`
-}
-
 const displayElemRange = computed(() => {
   if (props.elementList.length === 0)
     return '0'
@@ -807,7 +803,7 @@ const paginationClass = computed(() => props.mobileFixedPagination
                           <button
                             type="button"
                             :disabled="isActionDisabled(action, elem)"
-                            :aria-describedby="getActionTitle(action, elem) ? tooltipIdFor(i, actionIndex) : undefined"
+                            :aria-label="getActionTitle(action, elem)"
                             :data-test="action.testId ? (typeof action.testId === 'function' ? action.testId(elem) : action.testId) : undefined"
                             class="inline-flex items-center justify-center size-8 text-slate-400 rounded-md cursor-pointer transition-colors hover:text-slate-900 hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-white/10 dark:hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-azure-500 disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent disabled:hover:text-slate-400"
                             @click.stop="action.onClick(elem)"
@@ -816,8 +812,7 @@ const paginationClass = computed(() => props.mobileFixedPagination
                           </button>
                           <span
                             v-if="getActionTitle(action, elem)"
-                            :id="tooltipIdFor(i, actionIndex)"
-                            role="tooltip"
+                            aria-hidden="true"
                             class="pointer-events-none absolute bottom-full left-1/2 z-20 mb-2 hidden -translate-x-1/2 whitespace-nowrap rounded-md bg-slate-900 px-2 py-1 text-xs font-medium text-white shadow-lg transition-opacity duration-150 group-hover:block group-focus-within:block dark:bg-slate-100 dark:text-slate-900"
                           >
                             {{ getActionTitle(action, elem) }}
diff --git a/src/components/comp_def.ts b/src/components/comp_def.ts
index 7b1ce384f8..23a9c70c84 100644
--- a/src/components/comp_def.ts
+++ b/src/components/comp_def.ts
@@ -27,7 +27,8 @@ export interface TableAction<T = TableRow> {
   onClick: (item: T) => void
   visible?: (item: T) => boolean
   disabled?: (item: T) => boolean
-  title?: string | ((item: T) => string)
+  /** Accessible name and tooltip of the icon-only button. */
+  title: string | ((item: T) => string)
   testId?: string | ((item: T) => string)
 }
 
diff --git a/src/components/tables/AppTable.vue b/src/components/tables/AppTable.vue
index c8f0950aae..aacc4f67e3 100644
--- a/src/components/tables/AppTable.vue
+++ b/src/components/tables/AppTable.vue
@@ -208,6 +208,7 @@ const columns = ref<TableColumn[]>([
     actions: [
       {
         icon: IconSettings,
+        title: t('settings'),
         onClick: item => openSettings(item),
       },
     ],
diff --git a/src/components/tables/BundleTable.vue b/src/components/tables/BundleTable.vue
index 91f68b8f00..400244fcf6 100644
--- a/src/components/tables/BundleTable.vue
+++ b/src/components/tables/BundleTable.vue
@@ -456,10 +456,12 @@ columns.value = [
     actions: [
       {
         icon: IconSettings,
+        title: t('settings'),
         onClick: (elem: Element) => openOne(elem),
       },
       {
         icon: IconTrash,
+        title: t('delete'),
         visible: () => canDeleteBundle.value,
         onClick: (elem: Element) => deleteOne(elem),
       },
diff --git a/src/components/tables/ChannelTable.vue b/src/components/tables/ChannelTable.vue
index c965e26414..e400abca47 100644
--- a/src/components/tables/ChannelTable.vue
+++ b/src/components/tables/ChannelTable.vue
@@ -395,12 +395,13 @@ columns.value = [
         icon: IconSettings,
         disabled: (elem: Element) => !canReadChannel.value[elem.id],
         title: (elem: Element) => (canReadChannel.value[elem.id]
-          ? ''
+          ? t('settings')
           : t('channel-permission-read-required')),
         onClick: (elem: Element) => openOne(elem),
       },
       {
         icon: IconTrash,
+        title: t('delete'),
         visible: (elem: Element) => !!canDeleteChannel.value[elem.id],
         onClick: (elem: Element) => deleteOne(elem),
       },
diff --git a/src/pages/settings/organization/Members.vue b/src/pages/settings/organization/Members.vue
index 40f0bcff67..74cdec03e2 100644
--- a/src/pages/settings/organization/Members.vue
+++ b/src/pages/settings/organization/Members.vue
@@ -400,6 +400,7 @@ columns.value = [
       },
       {
         icon: IconTrash,
+        title: t('remove'),
         visible: (member: OrganizationMemberRow) => canDelete(member),
         onClick: (member: OrganizationMemberRow) => {
           deleteMember(member)

From 1db19dda3dddb765bbe651310e4e84f1a47d9e37 Mon Sep 17 00:00:00 2001
From: Jordan Lorho <jordan.lorho@gmail.com>
Date: Fri, 30 Oct 2026 13:18:42 +0100
Subject: [PATCH 2/3] test(e2e): scope API key delete confirm to the dialog

Row action buttons now have aria-label="Delete", so the unscoped
getByRole('button', { name: 'Delete' }) matched every row.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 bun.lock                       | 1 -
 playwright/e2e/apikeys.spec.ts | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/bun.lock b/bun.lock
index 4d1dd67f54..13d1357633 100644
--- a/bun.lock
+++ b/bun.lock
@@ -1,6 +1,5 @@
 {
   "lockfileVersion": 1,
-  "configVersion": 0,
   "workspaces": {
     "": {
       "name": "capgo-app",
diff --git a/playwright/e2e/apikeys.spec.ts b/playwright/e2e/apikeys.spec.ts
index 5084830304..eef497ba63 100644
--- a/playwright/e2e/apikeys.spec.ts
+++ b/playwright/e2e/apikeys.spec.ts
@@ -401,7 +401,7 @@ test.describe('API Key Management', () => {
     const keyRow = keyCell.locator('xpath=ancestor::tr[1]')
 
     await keyRow.locator('[data-test^="delete-key-"]').click()
-    await page.getByRole('button', { name: 'Delete' }).click()
+    await page.getByRole('dialog').getByRole('button', { name: 'Delete' }).click()
 
     await expect(page.getByText('API key has been successfully deleted', { exact: true })).toBeVisible()
     await expect(page.getByText(keyName, { exact: true })).toHaveCount(0)

From fff64620ecfea2a441d21e7b8b8ac36002cc8bf5 Mon Sep 17 00:00:00 2001
From: Jordan Lorho <jordan.lorho@gmail.com>
Date: Fri, 30 Oct 2026 15:22:39 +0100
Subject: [PATCH 3/3] fix(a11y): resolve row action titles at render time

Static t() calls ran once when columns were built, so the accessible
name kept the old language after a locale switch.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/components/tables/AppTable.vue          | 2 +-
 src/components/tables/BundleTable.vue       | 4 ++--
 src/components/tables/ChannelTable.vue      | 2 +-
 src/pages/settings/organization/Members.vue | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/tables/AppTable.vue b/src/components/tables/AppTable.vue
index aacc4f67e3..5bb0ba2fd0 100644
--- a/src/components/tables/AppTable.vue
+++ b/src/components/tables/AppTable.vue
@@ -208,7 +208,7 @@ const columns = ref<TableColumn[]>([
     actions: [
       {
         icon: IconSettings,
-        title: t('settings'),
+        title: () => t('settings'),
         onClick: item => openSettings(item),
       },
     ],
diff --git a/src/components/tables/BundleTable.vue b/src/components/tables/BundleTable.vue
index 400244fcf6..c7414ab86a 100644
--- a/src/components/tables/BundleTable.vue
+++ b/src/components/tables/BundleTable.vue
@@ -456,12 +456,12 @@ columns.value = [
     actions: [
       {
         icon: IconSettings,
-        title: t('settings'),
+        title: () => t('settings'),
         onClick: (elem: Element) => openOne(elem),
       },
       {
         icon: IconTrash,
-        title: t('delete'),
+        title: () => t('delete'),
         visible: () => canDeleteBundle.value,
         onClick: (elem: Element) => deleteOne(elem),
       },
diff --git a/src/components/tables/ChannelTable.vue b/src/components/tables/ChannelTable.vue
index e400abca47..47d6804860 100644
--- a/src/components/tables/ChannelTable.vue
+++ b/src/components/tables/ChannelTable.vue
@@ -401,7 +401,7 @@ columns.value = [
       },
       {
         icon: IconTrash,
-        title: t('delete'),
+        title: () => t('delete'),
         visible: (elem: Element) => !!canDeleteChannel.value[elem.id],
         onClick: (elem: Element) => deleteOne(elem),
       },
diff --git a/src/pages/settings/organization/Members.vue b/src/pages/settings/organization/Members.vue
index 74cdec03e2..ecc2fc7a1c 100644
--- a/src/pages/settings/organization/Members.vue
+++ b/src/pages/settings/organization/Members.vue
@@ -400,7 +400,7 @@ columns.value = [
       },
       {
         icon: IconTrash,
-        title: t('remove'),
+        title: () => t('remove'),
         visible: (member: OrganizationMemberRow) => canDelete(member),
         onClick: (member: OrganizationMemberRow) => {
           deleteMember(member)