fix(a11y): give DataTable row action buttons an accessible name

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)

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) }}

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)
 }
 

src/components/tables/AppTable.vue

@@ -208,6 +208,7 @@ const columns = ref<TableColumn[]>([
     actions: [
       {
         icon: IconSettings,
+        title: () => t('settings'),
         onClick: item => openSettings(item),
       },
     ],

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),
       },

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),
       },

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)