Focus guidance and experience update

[alex-page]

Our focus ring is misused and is overstated for the experience we are trying to provide:

We should update our focus design to feel more crafted and not as intense when navigating by keyboard. See examples:

The focus ring is also showing up when user are not using keyboard navigation. We should remove this as it causes confusion on the purpose of the ring and it's usage at scale.

#7585 (comment)

[jesstelford]

Beyond just the focus ring, it looks like we're trying to manually set things into the "focused" state outside of the Browser's normal algorithm. Ie; What is the second example trying to convey as the "focused" item? I can see three different things that appear to have some form of focus:

1. "Animaux et articles pour animaux de compagnie"
2. "Arts et loisirs"
3. "Recherccher des catégories d"

Only one thing can be focused at a time, so I don't understand how it's even possible to have two different focus ring styles, plus what looks like a hover-state style all at the same time 🤔

[alex-page]

Going to close this issue and focus on this deliverable first: #9093

We can create a new issue when we are ready to change the visual style or document guidance around the focus.