fix(a11y): give DataTable row action buttons an accessible name
Merged
DA
15d ago+11+11+01234567890123456789-11-11-01234567890123456789
Summary
Icon-only row action buttons in DataTable had no accessible name. Screen readers announced them as "button":
- Buttons with a
titleonly linked it viaaria-describedby. That is a description, not a name. - Several actions had no
titleat 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.titleis 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 markedaria-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 typecheckand 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](https://pr-comments-assets.blacksmith.sh/codesmith/view-with-codesmith-dark-v3-3x.png)
![Autofix with [code]smith](https://pr-comments-assets.blacksmith.sh/codesmith/autofix-with-codesmith-dark-3x.png)
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.”