Create prototype for accessibility clinic (and later research)

[hannalaakso]

What

As part of #1935, we're going to amend the GaaP assistive research prototype from earlier this year to include different types of notification banners and deploy it to a new herokup app.

We have some ideas for what we'll be testing in the accessibility research later in the quarter so that can form the basis for this: https://docs.google.com/drawings/d/1TN7VgsOsi4rnS7dWZJO3H6hIV369hIiPTR7B6B82f6k/edit (it's the 'Apply for a blue badge, started application' journey)

We probably want to test at least

• one of each banner
• repeated use of the banners over the journey
• an example of blue and green/red banner on the same page (see Notification banner govuk-design-system-backlog#2 (comment) for an example)
• if possible, an example of red and green banner on the same page (it would be really good to understand how two elements with role="alert" might affect screen readers, even if this is a real edge case)

We'll then be able to use the same prototype later (with some modifications/additions) for the accessibility research.

Why

We need some realistic examples of pages and a service flow to take to the accessibility clinic. See #1999.

Who needs to know about this

Designers, developers

Done when

• We've identified how we're going to include notification banners in the prototype (see above examples and there might be other edge cases we want to test)
• We've added those to pages in the prototype
• We've deployed the prototype to a new heroku app

Further detail

Here are the findings from the previous clinics attended:

• First visit: Notification banner govuk-design-system-backlog#2 (comment)
• Second visit: https://docs.google.com/document/d/1me-kE3UzmTdx393xHzoVHWZhXf7BbfEd5QAY8T8VQwU/edit

[vanitabarrett]

Examples we've decided on so far:

• Information banner on the task list page, e.g: "your application may be delayed due to coronavirus"
• Error banner on the first photo uploaded in 'upload photo' form
• Success banner for the upload-photo and contact-preference forms
• Error summaries enabled on both of the above forms
• It's possible to get both a success banner and error summary on the contact preference form if you upload a photo and then try to continue through contact preferences without entering any contact details
• Stacked banner once a photo and contact details have been entered

We haven't been able to think of a realistic example of a success and error banner on the same page, so we may need to artificially create a page with two on just to test how they work together. We also have the example with success + error summary to see how two role="alert" elements play together on the same page.