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

Merged
DA
15d ago
+11-11

Summary

Icon-only row action buttons in DataTable had no accessible name. Screen readers announced them as "button":

  • Buttons with a title only linked it via aria-describedby. That is a description, not a name.
  • Several actions had no title at all: app settings, bundle settings and delete, channel delete, and member remove. The channel settings action also returned an empty title when the user could read the channel.

Changes:

  • TableAction.title is now required, so TypeScript flags any action without one.
  • The row action button uses the title as its aria-label. The visual tooltip is kept and marked aria-hidden, so it is not announced twice.
  • I added the missing titles using existing i18n keys (settings, delete, remove), so no new strings.

Test plan

  • bun run typecheck and eslint on the changed files pass.
  • Members page on a local seed (admin@capgo.app): before the fix, 6 visible row action buttons had no accessible name in 3 out of 3 loads. After the fix, 0 out of 3. Checked with a Playwright assertion on main td button.

🤖 Generated with Claude Code


View with [code]smith Autofix with [code]smith
Need help on this PR? Tag @codesmith-bot with what you need.

Summary by CodeRabbit

  • Accessibility
    • Action buttons now provide descriptive accessible names, making their purpose clearer to screen-reader users.
  • Bug Fixes
    • Settings, delete, and remove actions now display translated labels as tooltips where applicable.
    • Channel settings continue to show a permission message when the user cannot read the channel; the delete action now consistently identifies itself as “Delete.”