Merge pull request #4407 from nextcloud-libraries/fix/a11y-for-richco…

…ntenteditable-placeholder fix(NcRichContenteditable): add aria-placeholder
nextcloud-libraries · Aug 16, 2023 · 4c7c12a · 4c7c12a
2 parents 4cd880c + 892b713
commit 4c7c12a
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
@@ -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
@@ -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)
+ })
 })