From f77c2f6d661b1aa373402ad31189cbcd0ea34396 Mon Sep 17 00:00:00 2001 From: Hanna Laakso Date: Tue, 2 Feb 2021 14:38:05 +0000 Subject: [PATCH] Remove visible focus indicator from cookie banner MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 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). --- src/govuk/components/cookie-banner/_index.scss | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/src/govuk/components/cookie-banner/_index.scss b/src/govuk/components/cookie-banner/_index.scss index 3c25baa023..f09287e487 100644 --- a/src/govuk/components/cookie-banner/_index.scss +++ b/src/govuk/components/cookie-banner/_index.scss @@ -33,5 +33,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; + } } }