Full-width banners UX

[rtwell]

Problem

We need a design component specifically for messaging regarding system maintenance. Our current solution which involves appropriating the promo banner is not sufficient.

WIP requirements/governance reference: https://github.com/department-of-veterans-affairs/va.gov-team/blob/master/products/content/banners/banner-alerts.md

Here we can see the banners colliding on mobile:

Solution

I propose and recommend a new component used specifically for system alerts. In addition, I also recommend updating the full-width alert component.

Full-width alert (Emergency alert)

This alert is reserved specifically for critical messaging, like a hurricane, government shutdown, Coronavirus, etc. In it's current form, it works ok on desktop, but on mobile gets problematic, particularly with a lot of text:

Proposed solution:

Design notes:

1. The icon runs inline with the type to help utilize space
2. no more header type treatment, simply bold type, separated by an em dash
3. On mobile, the yellow banner is half the height it is on desktop
4. It is persistent (non-dismissible)
5. It pushes all content below it downward on the page (it does not overlay)

Desktop

Mobile

Full-width informational alert (now System maintenance banner)

We will appropriate the full-width informational alert. It follows suit with the new Emergency alert proposal, but adds show/hide functionality.

Design notes:

1. The icon runs inline with the type to help utilize space
2. No more header type treatment, simply bold type, separated by an em dash
3. On mobile, the blue banner is half the height it is on desktop
4. It is persistent (non-dismissible)
5. It can expand/collapse
6. The default state on page load is expanded
7. It pushes all content below it downward on the page (it does not overlay)

Mobile

Desktop

When they are both on the home page

Desktop

Mobile

[stephorkandatx]

I'm going to turn this into an Epic so we can start to figure out the various tasks.

@jenniferlee-dsva I had to leave before we reached consensus - did we decide if the system maintenance banner would live in Drupal, or GH? A discussion to pick back up?

[jenniferlee-dsva]

@stephorkandatx - yes, a couple of things need to happen for grooming.

1/ Share design and desired ux, logic, and governance with Drupal and FE engineers.

2/ Capture a couple of additions/clarifications to the designs and scenarios above, per convo w/Ryan.

I've put a placeholder write up here, so it's easier to keep track outside of ticket: https://github.com/department-of-veterans-affairs/va.gov-team/blob/master/products/content/banners/banner-alerts.md

@rtwell ^ could you take a gander and edit as needed in a branch?

@peggygannon ^ could you add links to your standardized sitewide maintenance message text versions here, per your convos with Ryan?

[1Copenut]

@rtwell I've got a few specific points for accessibility. LMK if I need to move these to an attached ticket and I'll get them moved tomorrow early.

1. The banners should both be landmark regions. These are secondary ways for screen reader users to navigate, but they're useful for folks that use them. Something like this:

   
   <div aria-label="Emergency alert notification" role="region">
   <h3>Coronovirus</h3>
   <p>Alert: VA beneficiaries with dependents who didn’t file a tax return in 2018
   or 2019 must act by May 5 to quickly receive their full Economic Impact Payment...</p>
   ...
   </div>

System Maintenance

Show more ...

2. We'll want to keep an eye on clear space at mobile size for the expand/collapse button on the system maintenance notification and any links at the bottom of the emergency alert. It looks alright, but I'm glancing. Pulling some quick data from [Smashing Magazine](https://www.smashingmagazine.com/2012/02/finger-friendly-design-ideal-mobile-touchscreen-target-sizes/):
> Apple’s [iPhone Human Interface Guidelines](http://developer.apple.com/iphone/library/documentation/UserExperience/Conceptual/MobileHIG/DesigningNativeApp/DesigningNativeApp.html#//apple_ref/doc/uid/TP40006556-CH4-SW1) recommends a minimum target size of 44 pixels wide 44 pixels tall. Microsoft’s Windows Phone UI Design and Interaction Guide suggests a touch target size of 34px with a minimum touch target size of 26px. Nokia’s developer guidelines suggest that the target size should be no smaller than 1cm x 1cm square or 28 x 28 pixels.
3. Even though we're removing headings visually, it might be worth including headings for screen readers or marking up the bold notification text as headings, maybe H3 or H4. I'm really torn on this point, because they're in front of the `<h1>` in the source order, but the notifications do feel like they need a heading. Some food for thought:
    - [TPG - Heading off confusion: where do headings fail WCAG?](https://developer.paciellogroup.com/blog/2020/03/heading-off-confusion-when-do-headings-fail-wcag/)

[jenniferlee-dsva]

@stephorkandatx @rtwell - I edited the Epic name because the issue/thread here actually covers more than system mantenance banners and more generally UX and governance for the 3 type of full-width banners: Emergency; Sitewide system maintenanc; Veteran action needed.

[ncksllvn]

I think we can close this?

[jenniferlee-dsva]

Removing assignments. I'd like to keep this open however bc we're including this -- banners in the CMS -- for 2021 planning.

product rubric started here, as referenced above in original desc: https://github.com/department-of-veterans-affairs/va.gov-team/blob/master/products/content/banners/banner-alerts.md