fix(NcRichContenteditable): add aria-placeholder

[ShGKme]

☑️ Resolves

• Fix [BITV] 9.3.3.2/3.3 - Comment section: The input fields for creating and editing comments lack visual labels. (2) nextcloud/server#37087

The solution in this PR is different from the suggestion in the linked issue.

Using aria-describedby requires a layout update, adding a wrapper element for NcRichContenteditable with the div[contenteditable] itself and a new visually hidden describing element. Though the layout of the element is not a part of its public interface, I think developers expect the component to be a directly contenteditable element and I prefer to keep current simple layout as long as it's possible.

A good and very simple alternative solution IMO is aria-placeholder.

🖼️ Screenshots

🏚️ Before	🏡 After

🚧 Tasks

• Add aria-placeholder

🏁 Checklist

• ⛑️ Tests are included or are not applicable
• 📘 Component documentation has been extended, updated or is not applicable

[AndyScherzinger]

Not an expert in terms of BITV compliance of the solution, else looks good to me.

[Pytal]

Makes sense though I suspect @michaelnissenbaum may not find this acceptable for similar reasons as on MDN

[Pytal]

Will likely have to go with one of the alternative solutions depending on his feedback

[AndyScherzinger]

Can't we just put the text below the input field as suggested my Michael?

@jancborchardt

[michaelnissenbaum]

I don't recommend using placeholders, whether in HTML (placeholder) or through aria-placeholder. Instead, place the hint below the input field.

[jancborchardt]

Yep, we have enough room in the comments interface, there can be a subline in color-text-maxcontrast.

[ShGKme]

I'll make another PR with a new feature to add an always visible description for NcRichContenteditable.

But making the placeholder visible by default as a description will break existing behavior and may not be suitable for any case. I think, in some cases, component users will want to keep using the placeholder as it currently is.

What do you think about merging this first to make the current placeholder accessible and then adding an additional description field?

[susnux]

Using aria-describedby requires a layout update

Isn't there a aria-description now? I remember seeing this for similar purpose.

Edit: Never mind its still a draft 😞

[rakekniven]

Can someone add an image showing how the solution will look like? @susnux

[marcoambrosini]

@jancborchardt this is resulting with a hint implemented on all NcRichContenteditable instances. This is not acceptable, we just cannot have this everywhere. (think of Talk for example)

I don't think the comments instructions on how to use the input field are even needed, but regardless of that, let's treat the comments interface as a the only instance of this problem and solve it there? These NcRichContenteditable are usually in context with headings and other hints around them that are pretty clear and requiring an hint in all of them will mess up the UI in most places.