Add focus state styles for the cookie banner

[hannalaakso]

What

Further to #2098, we should add a focus style for the cookie banner. This could be similar to the notification banner focus state.

We could add this in #2126 or separately if we don't want to block merging that PR.

Why

The cookie banner needs to have a focus state as it should be focused after the user accepts or rejects cookies.

Who needs to know about this

Designer, developer

Done when

• We've decided what the focus state should be
• We've added the styles
• The styles have been reviewed by a designer

[CharlotteDowns]

Two ideas for team review:

Offset outline

Background and underline to text

[vanitabarrett]

We have decided to publish the component without a visible focus state to start with.

From @hannalaakso: The focused cookie banner is the first element on the page and the last thing the user
interacted with prior to it gaining focus. We therefore assume that moving focus to it is not going to surprise users, and that giving it a visible focus indicator could be more confusing than helpful, especially as the element is not normally keyboard operable.

We have flagged this in the research section of the guidance as something to monitor.

A related discussion: w3c/wcag#1001

It's also worth noting that this is different to what we do with the notification banner which does have a visible focus indicator. However, the notification banner is further down the page and the user might not have interacted with it prior to it gaining focus so it is helpful to indicate to users that the focus has moved to it (even though the element, like the cookie banner, isn’t normally keyboard operable).