Add outline to toolbar buttons

[JeffersonBledsoe]

Fixes #6311

Current progress

[netlify]

✅ Deploy Preview for plone-components canceled.

Name	Link
🔨 Latest commit	8acc150
🔍 Latest deploy log	https://app.netlify.com/sites/plone-components/deploys/66fab09d9e7a6a00082bf851

[JeffersonBledsoe]

@ichim-david Checks all green now. Not sure if this needs design input from anybody else but it's ready for merging from my perspective

[pnicolli]

A behavior that I have recently seen in good component libraries is to only add the outline when navigating with the keyboard, while avoiding it when clicking things, because that's redundant. I haven't looked into how to do that, but I think it would be a nice improvement here.

[ichim-david]

A behavior that I have recently seen in good component libraries is to only add the outline when navigating with the keyboard, while avoiding it when clicking things, because that's redundant. I haven't looked into how to do that, but I think it would be a nice improvement here.

@JeffersonBledsoe this is why we had focus-visible selector instead of simply focus to ensure the outline shows up when using the keyboard navigation. I would set it back as well to avoid outlines when mouse clicking

[JeffersonBledsoe]

Agreed on using focus-visible! I can't remember the reasoning why I removed it initially, but I've added it back. From a quick glance, every browser we support for the editor also has support for focus-visible so no need to provide any fallback for older browsers

[sneridagh]

LGTM if someone promises me no outline will show when clicking 😂