feat(client): improve accessibility with ARIA labels and semantics

- Add aria-label to icon-only ActionIcon triggers across tree, comments,
  share, group, breadcrumbs, templates, AI chat, API keys, and spaces
- Give custom clickable divs/spans (color swatches, status swatches,
  load-more, PDF error, comment selection) role="button", tabIndex,
  and keyboard handlers
- Add listbox/combobox semantics (role, aria-selected, aria-activedescendant)
  to slash menu, emoji menu, mention list, and link editor results
- Add aria-haspopup/aria-expanded to bubble-menu triggers (node, text
  align, color) and status badge
- Add aria-label to Modal.Root/Dialog instances that lack a title prop
  (page history, template preview, trash preview, drawio, comment,
  find-and-replace, page verification)
- Add en-US translations for new aria-label strings
This commit is contained in:
Philipinho
2026-04-18 13:07:16 +01:00
parent dba8e315ab
commit fadeeaa59d
32 changed files with 274 additions and 52 deletions
@@ -75,7 +75,7 @@ export default function ShareActionMenu({ share }: Props) {
arrowPosition="center"
>
<Menu.Target>
<ActionIcon variant="subtle" c="gray">
<ActionIcon variant="subtle" c="gray" aria-label={t("More options")}>
<IconDots size={20} stroke={2} />
</ActionIcon>
</Menu.Target>