Problem:

Currently the messages are put underneath the field and are styled as the front-end theme.
This makes it likely that the error messages will not always be shown consistently, as the theme developer will be responsible.

This is already apparent in Bartik, and the default experience is now lacking.

Example:

During the UX discussion of 22 november 2016 it was agreed that the user experience of error messages shown while using Quick Edit is lacking, they are in some cases even inaccessible.

This problem was identified in #2828092: Inline Form Errors not compatible with Quick Edit and during the mentioned discussion it was decided to split a possible solution off, as it doesn't concern Inline Form Errors.

Solution:

As mentioned in #2828092-3: Inline Form Errors not compatible with Quick Edit it is proposed to move the error messages inside the dialog/bubble.
It can be styled more specifically than the generic error messages,to prevent the front-end theme from breaking the styling. This approach was the prefered solution as discussed in the mentioned UX discussion.

Comments

dmsmidt created an issue. See original summary.

dmsmidt’s picture

FileSize
902 bytes

-deleted, wrong upload-

yoroy’s picture

Issue tags: +sprint
s.d.sirois’s picture

Re-uploading a solution (as-is from #2828092-4) to put error messages inside the dialog box as asked by @dmsmidt (at #2828092-16)

gvso’s picture

Status: Active » Needs work
FileSize
17.99 KB
20.21 KB

@s.d.sirois does the trick, but I think it has some issues

1) Once the user leaves the required field blank and click on another field, the dialog/bubble makes it difficult to click on the required field again.

2) Additionally, clicking on the required field (leaving it blank) and clicking on another field a few times makes the error message appear more than once

s.d.sirois’s picture

FileSize
865 bytes

@gvso here is an interdiff addressing the second point that you brought up.

@gvso for your first point, I do agree that visual is way to heavy. Two ideas comes to me:

* transforming rendered output to an HTML unordered list of items when multiple items are available
** bonus: would be easy to understand the number of errors in the context of a screen reader usage.
* transforming the styles in order to have something less heavy when the .quickedit-validation-errors element is inside .quickedit ? But I guess we could not transform all templates at once! ;)

I would appreciate your input on this.

dmsmidt’s picture

I agree that the error is a bit heavy this way. We could look at the inline form error styling and re-use it a bit.

Some ideas:

dmsmidt’s picture

FileSize
8.39 KB
s.d.sirois’s picture

@dmsmidt this looks better adjust to the situation in hand.

Would you be so kind as to provide an interdiff giving you that result?

I might just spin on it after in order to propose what I was suggesting in #6 about the error list markup.

dmsmidt’s picture

@s.d.sirois, sorry I can't supply you with the interdiff, I just tried it in the browsers development tools.
Could you first try to recreate it? If you can't figure it out, I'll try to step in again and update the latest patch.

Do you like the red border around the balloon?

s.d.sirois’s picture

@dmsmidt no problem. Should be able to provide an interdiff for next week.

s.d.sirois’s picture

FileSize
4.17 KB

Here is another interdiff implementing suggestion of #7

Still needs work, but looks like an improvement.

Version: 8.3.x-dev » 8.4.x-dev

Drupal 8.3.0-alpha1 will be released the week of January 30, 2017, which means new developments and disruptive changes should now be targeted against the 8.4.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.