Restyle JavaScript / Cookie alert banners to match that of Skip Nav banner

[thekaveman]

Since #1645 merged, we have a new Skip Nav banner style:

This ticket is to update the JavaScript and Cookie banners to have the same style (background color, text color, link colors, spacing, etc.)

E.g. the JavaScript banner currently looks like:

Acceptance Criteria

• Both the JavaScript and Cookie alert banners are styled exactly the same as the Skip Nav banner

[machikoyasuda]

@srhhnry What color should the warning text be? That same blue as the link?

[indexing]

Since we see the need for a new component here, I propose we put this issue through a proper design phase. That will allow us to articulate the problem it solves, explore a couple different solutions to make sure the design teams believes this approach will work, and mockup each state of the component.

Since the errors we're covering are edge cases, we can begin design in the Sept sprint (or possibly implement if the design is complete ahead of the sprint.)

cc// @srhhnry @segacy1 @thekaveman @machikoyasuda

[machikoyasuda]

Agreed @indexing.

The design should cover what it looks like when:

• There's a JS error, and a Cookie error stacked
• When all those errors are stacked and the user tabs for the Skip Nav
• Ensure sufficient color contrast for regular text and links in all modes: regular link color, visited link color, focused and hovered link colors.

[indexing]

@machikoyasuda The "skip nav" is primarily a desktop enhancement, but I assume we need to have mobile states for the bottom two?

[machikoyasuda]

@indexing yes

[indexing]

@thekaveman @machikoyasuda @angela-tran

• Are there any other contexts in the app that currently require a banner?
• Do we currently handle any alerts in the app differently than the banner? (Perhaps failures below the app level such as connectivity?)

[machikoyasuda]

• The debug bar but that only shows up on dev-benefits.calitp.org/, so no other alerts bars with the red background on Production.
• There is also a messages alert bar, that shows up for example if you refresh the site a billion times and trigger the captcha error.

[thekaveman]

There is also a messages alert bar, that shows up for example if you refresh the site a billion times and trigger the captcha error.

A real user should never see this one -- I propose we ignore / don't worry about styling.

[machikoyasuda]

The message bar uses this code from the CA State Web Template v5:

https://legacy.template.webstandards.ca.gov/sample/alert-banner.html

So although a user should never see this, we have the code that creates these in the application:

[machikoyasuda]

Note: Skip Nav that is currently on https://test-benefits.calitp.org/ does not have a sufficient color contrast.

When designing links, keep in mind that links can be either their original color, or, it can be the visited color once the user has clicked it once already - which is purple #562b97. So the contrast has to be sufficient for both. In this case, the purple is sufficient, but the original blue is not.

Here's the full error message from an accessibility test tool. They recommend changing the blue from #045b86 to a darker #005681.

• Error: This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 4.2:1. Recommendation: change text colour to #005681.
├── WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail
├── #skip-to-content > div
└──

Skip to Main Content

cc @indexing @segacy1

[segacy1]

Leaving a note that this design is ready but on pause until further notice @indexing

[machikoyasuda]

Skip nav looks like this now: