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

[AndyScherzinger]

see also #37091

The important note "Write message, use "@" to mention someone, use ":" for emoji autocompletion …," is only available as a placeholder element and should ideally be placed as visual text below the field linked to it via aria-describedby attribute.

Details

https://report.bitvtest.de/default-en/d63601ac-cb34-4645-8256-66bec78964a0.html#checkpoint-9f92015c98-v3-n3

• 9.3.3.2/10.3 - https://report.bitvtest.de/default-en/d63601ac-cb34-4645-8256-66bec78964a0.html#checkpoint-9f92015c98-v10-n3

[dregad]

While you're at it maybe you'll consider that the placeholder text is too long, and overflows the comment field, overlapping other text below as shown in the screenshot

[rakekniven]

That is an ugly one. Just upgraded to NC v27.0.1 and checked with german and english. Can confirm the issue @dregad described.

@AndyScherzinger are that two issues or one?

[rakekniven]

[AndyScherzinger]

This issue would resolve what has been commented on this issue... If the placeholder text gets moved below the input field than the issue with the length is automatically solved.

[AndyScherzinger]

@ShGKme maybe a starter issue for you?

[AndyScherzinger]

@jancborchardt what should be used as a placeholder when the text is moved below the field as a description?

[ShGKme]

@michaelnissenbaum

Is that correct that aria-placeholder can be used here instead of aria-describedby for the placeholder?

[ShGKme]

@jancborchardt what should be used as a placeholder when the text is moved below the field as a description?

What about:

1. Make the default placeholder short (see fix(NcRichContenteditable): make the default placeholder short nextcloud-libraries/nextcloud-vue#4408)
2. Hide a long one with an ellipsis (a part will be cut)

[michaelnissenbaum]

@ShGKme aria-placeholder is not a substitute for aria-describedby. They are used for different purposes. In any case, please ensure that placeholders are not used for conveying important information. They often have poor contrast, disappear upon user input, and might not be announced by screen readers. It's recommended to place important additional information, such as field format or input instructions, visibly below the input field and associate them with the field using aria-describedby.

[rakekniven]

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

[ShGKme]

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

@rakekniven see nextcloud-libraries/nextcloud-vue#4482

[marcoambrosini]

I think here we should use the same label that we've added to text fields and cut it short to "Write a comment" for its text.

I would avoid this long suggestion altogether in such small inputs. It uses a lot of space and becomes redundant the moment any given user first learns about the functionality. This belongs in the documentation or in an informative tooltip that pops up the first time you use the feature.

Going forward there will be more and more things that one will be able to do with an input field, just as important or more important than emojis and mentions depending on the context. We cannot write a docs page in there :)

[ShGKme]

I would avoid this long suggestion altogether in such small inputs.

We can make the default description short and initial size of the text field 2 lines. For example, in this case shorter to:

"@" to mention, ":" for emoji

But it still can be too long to be 1-line in some languages and small screens.

or in an informative tooltip that pops up the first time you use the feature

I'd avoid this approach as too complex for that. If we don't want to show the tooltip each time user re-login, we need to store it in the database, grab on each page rendering with initial state...

This belongs in the documentation

Then we need to mention it in the all places with rich contenteditable. Currently there is no documentation about commenting files at all in the user documentation.

I think, UI should be understandable without reading all the documentation, especially speaking about accessibility.

---

As an alternative I may propose adding a small question mark button that opens a tooltip with any descriptions and/or links. But it must be 44px anyway... Still I have no idea where to put it.

Current alternative: nextcloud-libraries/nextcloud-vue#4408

[ShGKme]

Option 1: add visible description block

• ✅ Supports custom content
• ✅ Visible and accessible
• ❌ Large, multiline for long instructions / small layout

PR: nextcloud-libraries/nextcloud-vue#4482

Option 2: remove instructions at all (move to the user documentation)

PR: nextcloud-libraries/nextcloud-vue#4408

• ✅ Simple implementation
• ✅ Clean
• ✅ Fits any layout :D
• ❌ Supposes that users have read documentation or just know about the feature

Option 3: add one-time instruction

• ✅ Clean
• ✅ Fits any layout :D
• ✅ Yet accessible
• ❔ May not fit any layout
• ❌ Complex implementation with backend involved or is shown on every login
• ❌ What to do if a user has forgot the instructions?

// TODO add example

Option 4: add a help button to show instructions

• ✅ Not so large as description
• ✅ Accessible
• ❔ May not fit any layout, and it is at least 44px button
• ❔ Overloads UI ?

(design from paint)