Remove visible focus indicator from cookie banner

when the element is programmatically focused.

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

Also worth noting that this is different to what we do with the notification banner.
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 this element isn’t normally keyboard operable). As the cookie banner is the first
element on the page and the last thing the user interacted with, we don’t think it necessary to
give it a visible focus indicator as moving focus to it is less likely to confuse or surprise users.

src/govuk/components/cookie-banner/_index.scss

@@ -37,5 +37,19 @@
       display: none;
     }
 
+    &:focus {
+      // Remove the native visible focus indicator when the element is programmatically focused.
+      //
+      // 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: https://github.com/w3c/wcag/issues/1001
+      outline: none;
+    }
   }
 }