diff --git a/packages/react/src/editor/BlockNoteView.browser.test.ts b/packages/react/src/editor/BlockNoteView.browser.test.ts index 39e51a10e0..66d378135e 100644 --- a/packages/react/src/editor/BlockNoteView.browser.test.ts +++ b/packages/react/src/editor/BlockNoteView.browser.test.ts @@ -493,6 +493,24 @@ if (!screenReader) { test.describe("axe", () => { for (const theme of ["light", "dark"] as const) { + test(`placeholder contrast: axe (${theme})`, async ({ annotate }) => { + const placeholder = document.createElement("div"); + placeholder.id = "placeholder-contrast"; + placeholder.className = "bn-root"; + placeholder.dataset.colorScheme = theme; + placeholder.setAttribute("role", "main"); + placeholder.style.backgroundColor = + "var(--bn-colors-editor-background)"; + placeholder.style.color = "var(--bn-colors-side-menu)"; + placeholder.textContent = "Enter text or type '/' for commands"; + document.body.append(placeholder); + try { + await checkAxe(annotate, "#placeholder-contrast"); + } finally { + placeholder.remove(); + } + }); + // Known issues include the unnamed editor, unlabeled checklist checkboxes, // insufficient contrast, and undersized targets. test.skip(`default schema: axe (${theme})`, async ({ annotate }) => { diff --git a/packages/react/src/editor/styles.css b/packages/react/src/editor/styles.css index 5046c97352..c1dcec4cc3 100644 --- a/packages/react/src/editor/styles.css +++ b/packages/react/src/editor/styles.css @@ -27,7 +27,7 @@ --bn-colors-shadow: oklch(85% 0 0); --bn-colors-border: oklch(95% 0 0); - --bn-colors-side-menu: oklch(85% 0 0); + --bn-colors-side-menu: oklch(51.4% 0 0); /* Highlight backgrounds target Display P3; narrower displays gamut-map them. */ --bn-colors-highlights-gray-text: oklch(51.4% 0 0); @@ -80,7 +80,7 @@ --bn-colors-shadow: oklch(17% 0 0); --bn-colors-border: oklch(20% 0 0); - --bn-colors-side-menu: oklch(60% 0 0); + --bn-colors-side-menu: oklch(71.5% 0 0); /* Highlight backgrounds target Display P3; narrower displays gamut-map them. */ --bn-colors-highlights-gray-text: oklch(71.5% 0 0);