Grokking CSS Design Patterns to Ace Interviews/

...

/

Solution: Accessible Icon Button Focus Highlight

Solution: Accessible Icon Button Focus Highlight

Let’s add a clear, accessible focus ring to an icon-only button for keyboard users.

We'll cover the following...

Problem description

Given an HTML page with a button containing only an icon (magnifying glass) and an accessible label using aria-label="Search", but no visible text.

Write CSS to meet the following requirements:

    ...