Grokking CSS Design Patterns to Ace Interviews/

...

/

Solution: Accessible Focus Indicator Using :focus-visible

Solution: Accessible Focus Indicator Using :focus-visible

Let’s show a custom focus ring on a button only during keyboard navigation.

We'll cover the following...

Problem description

Given an HTML page with a button <button class="keyboard-focus">Accessible Action</button>, write CSS to meet the following requirements:

  • When the ...