Avoiding focus states when not intended

Sometimes, you plan for a focus state – and then that state show up in unexpected ways that aren’t good!

For example, recently – we were building out some ideas for the new PE site and in the header we wanted to have a very tab-friendly focus-state-first type of design. As you tabbed through the menu, each item’s background color lit up. But then when we went to click it with the mouse, that put it in focus which would them trigger the background color before loading the next page or changing routes – and it was jarring and felt like we were stuck with the situation. Luckily – @webstrand reminded us about the newer :focus-visible that appeared in 2022.

You're on a small screen! Some modules like CodePen examples will behave differently here. You'll need to toggle through their tabs to see all the code. For the best experience, consider using a bigger screen.

‘When would you not want to see a focusring?’ I responded something along the lines of, ‘Well you’re on a mobile device, you’ve clicked a button then this weird ring shows up. Tells you nothing, it gives you no useful information. It’s just this weird thing that looks a bug.’ So I think that was what sparked that discussion.

~ Alice Boxhall | The history of :focus-visible and inert

Here’s a great interview that talks about why this was needed and what it takes to get something like this into the system.

(we can note inert too)

CSS selector

:focus-visible

a:focus-visible {

}

See the Pen HTML cheatsheet 1 / display types by perpetual.education (@perpetual-education) on CodePen.

Introduction

:focus-visible