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:

• The icon button should appear as a circular button with a transparent background by default.

• When the button is focused (for example, with “Tab’’), it should display a thick blue ring (3px solid #2684FF) outside the button, visible on both light and dark backgrounds.

• Remove the default browser outline; only your custom ring should show.

• The focus ring should not overlap the icon or clip at the button edge.

Goal

Ensure that small, icon-only buttons have a clearly visible and accessible focus indicator that doesn’t interfere with the icon’s legibility or appearance.

Constraints

Do not use JavaScript or change HTML structure.

Sample visual output

Here’s what the output would look like:

Good luck trying the problem! If you’re unsure how to proceed, check the Solution.