It's currently not possible to add a focus effect (like box-shadow) to a link

Description

When I add a _focus style including a shadow to a link, I expect that style to be applied

Link to Reproduction

https://codesandbox.io/s/dazzling-haibt-vnr6u?file=/src/index.tsx

Steps to reproduce

1. Add a link with a shadow
2. Add the shadow to the _focus styles, too
3. Click the link but make sure the link stays on page (this happens a lot in a Next.js app)
4. The shadow disappears, and there is no way to keep it

Chakra UI Version

1.8.3

Browser

No response

Operating System

• macOS
• Windows
• Linux

Additional Information

Add :not(.always-show-focus) or something to the CSS reset and this is fixed immediately! Document the ability to do this, too. Perhaps generally the focus ring should be documented separately? I’m happy to write that if you want.

[tomhicks]

I’m going to create a PR I think - it’s an easy fix and should be perfectly backwards compatible.

[stale[bot]]

Hi! This issue has been automatically marked as stale because lack of recent activity. It will be closed if no further activity occurs within 5 days. Thank you for your contributions.