Validation: Move error message box to the bottom

[mrosvik]

Description

As a user I want to see why I can´t click "Next", so that I can complete the form.

• The error message box thats shows when you try to hit "Next"/"Send" should be connected with the "Next"/"Send"-button, since the summary explain why the next button is not working.
• The error messages should link to the field where the error is (set focus).
• WCAG: The current error message use H2 and H4 as texts. This is not compliant with WCAG. Remember to think about what header we use on the new component

Design

https://www.figma.com/file/Pvti3aRcOwH0k5Z7DrLznk/Arbeidsomr%C3%A5de%3A-Altinn-Studio-APPS?node-id=2545%3A50628

Development tasks

• Move error box from the top, into the bottom of the form.
• Link the error to the connected field (set focus).

Test

Definition of done

• Documentation (docs.altinn.studio) is updated (if relevant)
  • Technical documentation
  • User documentation
• QA
• Manual test is complete (if relevant)
• Automated test is implemented (if relevant)
• All tasks in this userstory are closed (i.e. remaining tasks are moved to other user stories or marked obsolete)

[SandGrainOne]

@mrosvik This looks very nice, but I'm wondering about soft validation. There is a mechanism to show warnings. Should that be a completely separate thing or should we try to integrate it in this new design.

[olemartinorg]

Innspill fra @FinnurO: Mulig vi bør endre teksten fra "Du må fikse disse feilene før du kan gå videre" til "Du må rette disse feilene før du kan gå videre".

[Febakke]

@olemartinorg Is this the correct place for test feedback

Screen reader test: Ok (VoiceOver on chrome)
Keyboard navigation: Ok

Smaller screens:
On smaller screens the text fall down and the icon remains. It would be better to have the text linebreak and always have the start of the text aligned with the icon.

Contrast
In the Figma sketches it looks the pink color is set to 50% opacity. With a white background this would equal to #FCE4E9. This is probably easy to fix with tokens at a later stage?

In the design process we have overlooked a contrast issue when the green (Submit) button are visible on the last page of a application. The button contrast with the red background is to low and break with 1.4.11 Non-text Contrast I could not find an easy way out if this with the current design. It might be best if I create a new issue to work on how to solve this from our end?

hover
Not specified in the sketches and not a WCAG breach. But I think it is a little off on desktop to not have any hover state on the links in the error summary. Would be easily solved with an underline on hover. We have hover states on all other inputs and buttons so it sticks out.

[mrosvik]

In addition to what @Febakke mention, the hover border should be black, 2px and cover borders of any extra links appearing in the message (so there is no double borders).

(Talked with @olemartinorg about this) :)

The contrast on buttons will be fixed when the latest design tokens are added to the button component.

[olemartinorg]

I looked into doing this in CSS, but it turns out to be a lot more hacky than I'd like. I looked into it, and with the changes in #372 I moved the code to render links in error messages, so after that is merged I can quite easily extend the function to remove rendering of links inside these error messages (only when shown in this bottom error report). That should solve the link issues without any hacks: