search

StackExchange / Stacks

Stack Overflow’s Design System
https://stackoverflow.design
MIT License
607 stars 89 forks source link

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

Closed dancormier closed 6 months ago

dancormier commented 7 months ago

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[bot] commented 7 months ago

Deploy Preview for stacks ready!

Name Link
Latest commit d50576277d2b828590c29e2bee269af784bca625
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...

QR Code

Use your smartphone camera to open QR code link.

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

dancormier commented 6 months ago

@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.