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
@@ -22,6 +22,7 @@ export default function HistoryModal({ pageId, pageTitle }: Props) {
opened={isModalOpen}
onClose={() => setModalOpen(false)}
fullScreen
aria-label={t("Page history")}
>
<Modal.Overlay />
<Modal.Content style={{ overflow: "hidden" }}>
@@ -49,6 +50,7 @@ export default function HistoryModal({ pageId, pageTitle }: Props) {
size={1400}
opened={isModalOpen}
onClose={() => setModalOpen(false)}
aria-label={t("Page history")}
>
<Modal.Overlay />
<Modal.Content style={{ overflow: "hidden" }}>