diff --git a/src/components/NcRichContenteditable/NcRichContenteditable.vue b/src/components/NcRichContenteditable/NcRichContenteditable.vue index 45c79d51f8..46955d0913 100644 --- a/src/components/NcRichContenteditable/NcRichContenteditable.vue +++ b/src/components/NcRichContenteditable/NcRichContenteditable.vue @@ -157,6 +157,7 @@ export default { }" :contenteditable="canEdit" :placeholder="placeholder" + :aria-placeholder="placeholder" aria-multiline="true" class="rich-contenteditable__input" role="textbox" diff --git a/tests/unit/components/NcRichContenteditable/NcRichContenteditable.spec.js b/tests/unit/components/NcRichContenteditable/NcRichContenteditable.spec.js index 78ec12de09..16e49995c8 100644 --- a/tests/unit/components/NcRichContenteditable/NcRichContenteditable.spec.js +++ b/tests/unit/components/NcRichContenteditable/NcRichContenteditable.spec.js @@ -118,4 +118,17 @@ describe('NcRichContenteditable', () => { expect(handlers.paste).toHaveBeenCalledTimes(1) expect(handlers.blur).toHaveBeenCalledTimes(1) }) + + it('should has accessible placeholder from placeholder prop', async () => { + const PLACEHOLDER = 'TEST_PLACEHOLDER' + const { wrapper } = mountNcRichContenteditable({ + propsData: { + placeholder: PLACEHOLDER, + }, + }) + // Accessible placeholder + expect(wrapper.attributes('aria-placeholder')).toBe(PLACEHOLDER) + // Used in CSS for visible placeholder + expect(wrapper.attributes('placeholder')).toBe(PLACEHOLDER) + }) })