fix(NcRichContenteditable): add aria-placeholder

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
nextcloud-libraries · Sep 14, 2023 · b2540f3 · b2540f3
1 parent 9619518
commit b2540f3
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 0 deletions.
diff --git a/src/components/NcRichContenteditable/NcRichContenteditable.vue b/src/components/NcRichContenteditable/NcRichContenteditable.vue
@@ -224,6 +224,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
@@ -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)
+	})
 })