fix(search-modal): prevent focus ring from being clipped by scroll container

[low-perry]

Description

Added an explicit :focus-visible rule to components/search-modal/element.css:

​CSS a:focus-visible { outline: 2px solid var(--color-link-normal); outline-offset: -2px; } ​

Motivation

When navigating search results with the keyboard (Tab key), the
focus ring around a result link was visually clipped, cut off at the edges
instead of forming a clean rectangle around the item.

The root cause is a CSS clipping rule: any element with overflow set to a
value other than visible (here overflow: auto on the <ul> results list)
becomes a clipping container. The default browser focus outline renders
outside an element's border box, and because the result <a> links fill
100% of the scroll container's width, that outward outline sits exactly on
the clipping boundary and gets cut.

Additional details

I tested the fix on Windows 11 and Ubuntu 22.04, using Firefox, Chrome, and Edge.

Related issues and pull requests

Fixes #992

[github-actions]

2ac06ec was deployed to: https://fred-pr1410.review.mdn.allizom.net/

[caugner]

The outline looks good, except for the color (should not change) and the left (thicker than top/right/bottom).

Before:

After:

[caugner]

Suggested change

outline: 2px solid var(--color-link-normal);

Instead, we might want to make the border-color of li[data-selected] conditionally on :not(:focus-visible).

[low-perry]

I tried conditioning the selected row border on :not(:focus-visible), but in this component the focused element is the inner a rather than the li, so that did not produce a good result, especially in Firefox on Windows and Ubuntu.

[caugner]

Hm, in that case would :not(:has(:focus-visible)) work?

[low-perry]

There’s a chance I misunderstood your suggestion the first time around. I’ve now updated li[data-selected] to use :has(:focus-visible) so the selected row drops its border color when the inner link is focus-visible, while keeping the link’s focus outline in place.
I also tried removing the outline width, but without it the focus treatment looks a bit off in every browser I tested, so I kept the outline with the offset for now.