Update validation states in Initial Submission wizard

[hdrury1]

Accessibility best practices suggest use of colour, informative text and icons to communicate validation errors/success. We should add icons to improve the clarity of our validation states, especially for those with colour blindness.

To do/tickets (added by Chris):

• [ ] Add 'x' to error validation
• [ ] Add stroke to person pod error validation
• [ ] Change "green" validation on subject area picker to "helper text"
• [ ] Introduce ribbon for "maximum selected" feedback in the People Picker
• [ ] Decide if we need to do something less visible in people picker when not scrolled (i.e. perhaps we only need the ribbon when scrolled beyond the area we currently show the feedback)

[chris-huggins]

Validation errors:

For accessibility reasons we should include iconography for validation states to not only rely on colour and text to communicate the meaning.

To avoid being too large or too 'heavy' I suggest a smaller 'x' icon.

Note: We might need to review the vertical space between inputs to ensure the validation doesn't interfere with the label of the input below.

Subject Area(s):

Outside of the people picker we use green for the subject picker to show maximum subject area(s) selected. There is also a green stroke around the input but it appears inconsistently.

I propose we move to using a consistent "helper text" pattern. We will likely need to include some information below inputs throughout xPub as "information". This text is simply informing the user they cannot add any more, which fits the use of information/helper text instead of validation. It also removes the need for the distracting green stroke.

People picker:

In the people picker we use green text to show the maximum selected also. However this is often, if not likely, to be off-screen as users scroll past the text we use to inform them. Also I find the green colour not informative, however compared to the "helper text" for the subject area picker this is harder to spot, nay may require more visual emphasis.

For example we could use a ribbon. That way when selecting the person pod while scrolled (very likely) that reaches the maximum we could show a ribbon, which ensures the "max selected" feedback isn't off screen.

However, this might be overkill when we have a lower maximum e.g. only 1 should be selected when excluding a senior editor (on desktop):

[chris-huggins]

For the people picker errors states I also suggest we add a stroke to the person pod to make them more visible. It looks like users are often missing this feedback

Would also require an icon as shown above