Scrolling to error message

[MoritzRS]

PR Type

[x] Feature

What Is the Current Behavior?

On checkout error message doesn't get scrolled to
Issue Number: Closes #848

What Is the New Behavior?

When the checkout has some errors, the browser will scroll to it

Does this PR Introduce a Breaking Change?

[x] No

Other Information

Uses Scrolling Directive developed for #911

AB#71917

[MoritzRS]

This adds automatic scrolling in checkout step 3 (payment). Please comment if it is required elsewhere.

[M-Behr]

This adds automatic scrolling in checkout step 3 (payment). Please comment if it is required elsewhere.

Hi, it works very well.
I think we should add this behavior to the inline error message in general. This ensures consistent behavior no matter where these messages are used. In addition, automatic scrolling is necessary in the shopping cart and at each checkout step, where there is always a lot of content displayed and the "Checkout" button can be seen far below (especially in the phone view) - This makes it very difficult to notice the error message as I mentioned in the ticket.

[MoritzRS]

Alright, the way this current implementation works is by checking the basket error status. I will work on tying it to the inline error message in general so it can be used everywhere.

[MaxKless]

Nice solution but needs some work.

[MoritzRS]

Scrolling is now attached in the basket-validation-results component. It will work for all messages used there but is still not attached on messages in general. Here are some thoughts regarding general attaching to any kind of error messages:

1. Is it really desired to automatically scroll to every error message? Some messages e.g. on form validation show up while user is still filling out forms. Automatically scrolling to those messages will result in an unoptimized user experience.
2. If multiple error messages are shown, all will be scrolled to in order which results in scrolling to the last one. This way the user only notices the last message at first glance. This can be problematic since error messages could as well be triggered by preceeding errors.
3. Depending on where messages are shown it is not desired to scroll them directly but to some point above them since the message will otherwise be hidden on mobile by the navigation bar. The scroll directive supports spacing to leave some space above the element when scrolling but I am not sure if this should be set for all messages in general since some cases might require different spacing or no spacing at all.

Considering the points above I advise to simply scroll to the top when an error occurs (mentioned as alternative solution in #848). This behvior might not be archived on a message component but has to be implemented on the corresponding page. Easiest option would be to scroll automatically to the top after the checkout button gets pressed since even on success, user will land at the top for the next checkout step.

Please reflect on these thoughts and decide how to proceed.

[M-Behr]

Scrolling is now attached in the basket-validation-results component. It will work for all messages used there but is still not attached on messages in general. Here are some thoughts regarding general attaching to any kind of error messages:

1. Is it really desired to automatically scroll to every error message? Some messages e.g. on form validation show up while user is still filling out forms. Automatically scrolling to those messages will result in an unoptimized user experience.
2. If multiple error messages are shown, all will be scrolled to in order which results in scrolling to the last one. This way the user only notices the last message at first glance. This can be problematic since error messages could as well be triggered by preceeding errors.
3. Depending on where messages are shown it is not desired to scroll them directly but to some point above them since the message will otherwise be hidden on mobile by the navigation bar. The scroll directive supports spacing to leave some space above the element when scrolling but I am not sure if this should be set for all messages in general since some cases might require different spacing or no spacing at all.

Considering the points above I advise to simply scroll to the top when an error occurs (mentioned as alternative solution in #848). This behvior might not be archived on a message component but has to be implemented on the corresponding page. Easiest option would be to scroll automatically to the top after the checkout button gets pressed since even on success, user will land at the top for the next checkout step.

Please reflect on these thoughts and decide how to proceed.

Thank you for your feedback. I think we have a little misunderstanding: I would only add this behavior to the inline error messages - the bootstrap error alerts. Only this pattern/component:

Currently we use the inline error messages or error alerts only in the cart and checkout pages. I think it is fine to attach it on the basket-validation-results component. My assumption: If the basket validation fails, then the pattern shown above is always used, isn't it?

1. Form field validation uses another pattern. No auto-scrolling should be used for this.
2. This is rather rarely the case. Even if it were, you could fix one mistake first and then the other. Currently, both errors would be out of view.
3. As I mentioned I would use this for the error inline messages (not all messages in general), which we are only use for cart and checkout now. I have to check how it feels on the cart page, where we have a sticky navigation at the top.

I will check the error behavior in the whole checkout and when something is unclear or feels unnatural, I will come back to you. Is this fine for you? It seems that the demo server is not loading the pwa, yet (504 Gateway time-out). I try it later again.

[MoritzRS]

Thanks for clarifying, I guess I did in fact misunderstood your request.
I would appreciate it if you could review the checkout process once the demo server is back online and inform me about further changes you wish to happen.

[M-Behr]

The auto-scrolling behavior works very well.
I noticed that some checkout messages do not scroll up automatically. Perhaps some error or info messages are not part of the basket validation result component, e.g. have no shipping address assigned or credit card is invalid.
The auto-scrolling behavior should be implemented for error-message and info-message component, if toast = false. I discussed this solution with @SGrueber.

[M-Behr]

Good job 👍