fix(block-link): improve focus style to meet WCAG 2.2 AA

[dancormier]

Resolves STACKS-545

Note
The above linked ticket shows updates as they relate to the s-menu component. The focusable elements shown within the s-menu component are s-block-links, so this PR updates the s-block-link focus style.

[netlify]

✅ Deploy Preview for stacks ready!

Name	Link
🔨 Latest commit	d505762
🔍 Latest deploy log	https://app.netlify.com/sites/stacks/deploys/65b96b150dbf7f000899001d
😎 Deploy Preview	https://deploy-preview-1621--stacks.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[CGuindon]

I'm assuming adding padding here won't do anything overall — devs would need to make sure the element has a container somewhere in the core code?

Is there a better way to show an example of 'no container' that would show at least 2px padding from the text?

[dancormier]

@CGuindon That example is kinda misleading. Each link has markup like this:

<a href="…" class="s-block-link px0">…</a>

Note the px0. That class overrides any left or right padding to be 0px, so a dev would have to specifically apply an atomic class to override the padding in this case. If we ever take a good look at our docs pages, I think this example would be a good one to get rid of.

I found instances of this in two files (1, 2), so I don't think it's too big of a deal and it's probably something that can be resolved pretty easily in Core by finessing the padding a little.

[giamir]

Code changes look good to me. Thanks @dancormier.

I see that there is a small divergence on the focus ring radius between the mockup

and the final result