Create notification banner component

[36degrees]

What

Create the notification banner component in GOV.UK Frontend.

Why

Having reviewed the feedback from the working group, we now need to build the component in Frontend ready for release.

Depends on

• Design Nunjucks API for notification banner component #1933
• Work out what to do with styled links in the notification banner component #1934

Further detail

Some specific bits of feedback worth considering from the working group and accessibility clinic findings:

• it’s recommended we remove aria-labelledby from the markup for the red and the green banners as they’re not landmarks (https://www.w3.org/TR/wai-aria-1.1/#landmark_roles) and therefore the label will never be read out (the same actually applies to our current error summary)
• we should explain the accessibility considerations – for example what the role= does – in comments in the code and/or tests.

Done when…

• Nunjucks template / macro created based on the API agreed in Design Nunjucks API for notification banner component #1933
• Tests for Nunjucks template
• Tech docs reviewed by tech writer
• Add styling for notification banner
• Component auto focuses when using role="alert"
• Tests for component auto focus JS
• Finalise notification banner macro options docs Finalise notification banner macro options documentation #1997
• Cross-browser tested
• Create some realistic example pages to present at the accessibility clinic Present notification banner at the accessibility clinic #1999
• Take finalised version to accessibility clinic for testing Present notification banner at the accessibility clinic #1999
• Test notification banner with assistive technologies Test notification banner with assistive technologies #2010
• Address notification banner accessibility concerns Address notification banner accessibility concerns #2011
• Remove error type banner Remove error notification banner type #2030

[hannalaakso]

I'm thinking that one thing we should highlight at the accessibility clinic is the approach of making the <p> tags look like headings when we have just a single line of content in the banner. We do this as we want to draw attention to the message in the banner and semantically you should haven't a heading tag that doesn't act as a heading for some content below it. However it'd be good to confirm that this isn't a concern as we're making an element look like another element.