mirror of
https://github.com/docmost/docmost.git
synced 2026-05-18 07:24:04 +08:00
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:
@@ -92,8 +92,17 @@ export default function StatusView(props: NodeViewProps) {
|
||||
colorClassMap[color],
|
||||
)}
|
||||
onClick={() => isEditable && setOpened(true)}
|
||||
onKeyDown={(e) => {
|
||||
if (isEditable && (e.key === "Enter" || e.key === " ")) {
|
||||
e.preventDefault();
|
||||
setOpened(true);
|
||||
}
|
||||
}}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
aria-label={text || "SET STATUS"}
|
||||
aria-haspopup="dialog"
|
||||
aria-expanded={opened}
|
||||
>
|
||||
{text || "SET STATUS"}
|
||||
</span>
|
||||
@@ -127,6 +136,16 @@ export default function StatusView(props: NodeViewProps) {
|
||||
)}
|
||||
style={{ backgroundColor: bg }}
|
||||
onClick={() => handleColorChange(name)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
e.preventDefault();
|
||||
handleColorChange(name);
|
||||
}
|
||||
}}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
aria-label={name}
|
||||
aria-pressed={color === name}
|
||||
>
|
||||
{color === name && <IconCheck size={14} />}
|
||||
</Box>
|
||||
|
||||
Reference in New Issue
Block a user