cfpb / design-system-react

A React/Storybook implementation of CFPB's Design System
https://cfpb.github.io/design-system-react/
MIT License
6 stars 4 forks source link

fix(skip-link): add focus ring #330

Closed billhimmelsbach closed 7 months ago

billhimmelsbach commented 7 months ago

A very small change to add the focus ring in for skip links like it appears on consumerfinance.gov. There are other styles we could add from there potentially in the future, but the focus ring is the one that matter for accessibility, so I would like to prioritize this small change first.

Changes

How to test this PR

  1. Does this add a focus ring to the skip link?

Screenshots

Before

Screenshot 2024-04-02 at 3 36 59 AM

After

Screenshot 2024-04-02 at 3 35 55 AM

Example from consumerfinance.gov

Screenshot 2024-04-02 at 3 36 19 AM

Notes

netlify[bot] commented 7 months ago

Deploy Preview for cfpb-design-system-react ready!

Name Link
Latest commit 3b84faf96cecab0ae0c1b2df54e0ee6d04b7a8c9
Latest deploy log https://app.netlify.com/sites/cfpb-design-system-react/deploys/660c4bc36f6cb500083c9aba
Deploy Preview https://deploy-preview-330--cfpb-design-system-react.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.