sinvo/docmost
1
0
Fork 0
mirror of https://github.com/docmost/docmost.git synced 2026-05-17 06:44:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: A11y fixes (#2148)

Browse Source
This commit is contained in:
Philip Okugbe
2026-05-04 21:21:37 +01:00
committed by GitHub
parent fe18f22dc6
commit dbe6c2d6ba
62 changed files with 587 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/features/editor/components/bubble-menu/color-selector.tsx
+56 -27
View File
@@ -172,6 +172,9 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
fontWeight: 500,
fontSize: rem(16),
}}
aria-label={t("Text color")}
aria-haspopup="dialog"
aria-expanded={isOpen}
>
A
</Button>
@@ -186,20 +189,32 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
{t("Text color")}
</Text>
<SimpleGrid cols={5} spacing="xs">
{TEXT_COLORS.map(({ name, color }, index) => (
{TEXT_COLORS.map(({ name, color }, index) => {
const applyTextColor = () => {
if (name === "Default") {
editor.commands.unsetColor();
} else {
editor
.chain()
.focus()
.setColor(color || "")
.run();
}
setIsOpen(false);
};
return (
<Tooltip key={index} label={t(name)} withArrow>
<Box
onClick={() => {
if (name === "Default") {
editor.commands.unsetColor();
} else {
editor
.chain()
.focus()
.setColor(color || "")
.run();
role="button"
tabIndex={0}
aria-label={t(name)}
aria-pressed={!!editorState[`text_${color}`]}
onClick={applyTextColor}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
applyTextColor();
}
setIsOpen(false);
}}
style={{
width: rem(28),
@@ -221,7 +236,8 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
A
</Box>
</Tooltip>
))}
);
})}
</SimpleGrid>
</Box>
@@ -230,23 +246,35 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
{t("Highlight color")}
</Text>
<SimpleGrid cols={5} spacing="xs">
{HIGHLIGHT_COLORS.map(({ name, color }, index) => (
{HIGHLIGHT_COLORS.map(({ name, color }, index) => {
const applyHighlight = () => {
if (name === "Default") {
editor.commands.unsetHighlight();
} else {
editor
.chain()
.focus()
.toggleMark("highlight", {
color: color || "",
colorName: name.toLowerCase() || "",
})
.run();
}
setIsOpen(false);
};
return (
<Tooltip key={index} label={t(name)} withArrow>
<Box
onClick={() => {
if (name === "Default") {
editor.commands.unsetHighlight();
} else {
editor
.chain()
.focus()
.toggleMark("highlight", {
color: color || "",
colorName: name.toLowerCase() || "",
})
.run();
role="button"
tabIndex={0}
aria-label={t(name)}
aria-pressed={!!editorState[`highlight_${color}`]}
onClick={applyHighlight}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
applyHighlight();
}
setIsOpen(false);
}}
style={{
width: rem(28),
@@ -274,7 +302,8 @@ export const ColorSelector: FC<ColorSelectorProps> = ({
)}
</Box>
</Tooltip>
))}
);
})}
</SimpleGrid>
</Box>
apps/client/src/features/editor/components/bubble-menu/node-selector.tsx
+3
View File
@@ -157,6 +157,9 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
radius="0"
rightSection={<IconChevronDown size={16} />}
onClick={() => setIsOpen(!isOpen)}
aria-label={t("Turn into")}
aria-haspopup="menu"
aria-expanded={isOpen}
>
{t(activeItem?.name)}
</Button>
apps/client/src/features/editor/components/bubble-menu/text-alignment-selector.tsx
+3
View File
@@ -92,6 +92,9 @@ export const TextAlignmentSelector: FC<TextAlignmentProps> = ({
radius="0"
rightSection={<IconChevronDown size={16} />}
onClick={() => setIsOpen(!isOpen)}
aria-label={t("Text align")}
aria-haspopup="menu"
aria-expanded={isOpen}
>
<activeItem.icon style={{ width: rem(16) }} stroke={2} />
</Button>