Skip to content

Commit

Permalink
Remove visible focus indicator from cookie banner
Browse files Browse the repository at this point in the history
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

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).
  • Loading branch information
hannalaakso committed Feb 2, 2021
1 parent d1f8057 commit f77c2f6
Showing 1 changed file with 14 additions and 0 deletions.
14 changes: 14 additions & 0 deletions src/govuk/components/cookie-banner/_index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
}

0 comments on commit f77c2f6

Please sign in to comment.