Skip to content

fix: Add outline focus-visible styles for buttons, links #1092

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 1 commit into from
Jan 14, 2025
Merged

fix: Add outline focus-visible styles for buttons, links #1092

merged 1 commit into from
Jan 14, 2025

Conversation

@trillium
Copy link
Contributor

@trillium trillium commented Jan 13, 2025 •
edited
Loading

Issue

When tabbing through links, focus ring for header nav links doesn't display a complete ring and has poor contrast.

Changes

tailwind.config.js

  • Add base styles to button link in focus-visible state
    • Add outline style
    • Outline color set as primary color from tailwind config

components/Header.tsx

  • Add pr-2 to container, m-1 to links to ensure the outline has enough roomt to display completely.

View deployed changes

Before image
After image

Tested in (macOS):

  • Chrome
  • Firefox
  • Safari

Notes

I had to push these changes with --no-verify due to husky failing pre-commit checks that are unrelated to the PR:

image 
⚠ Running tasks for staged files...
  ❯ package.json — 2 files
    ❯ *.+(js|jsx|ts|tsx) — 1 file
      ✖ eslint --fix [KILLED]
    ❯ *.+(js|jsx|ts|tsx|json|css|md|mdx) — 1 file
      ✖ prettier --write [FAILED]
↓ Skipped because of errors from tasks.
↓ Skipped because of errors from tasks.
✔ Reverting to original state because of errors...
✔ Cleaning up temporary files...

✖ prettier --write:
[error] require() of ES Module /Users/trilliumsmith/code/trilliumsmith.com/fork/tailwind-nextjs-starter-blog/node_modules/prettier-plugin-tailwindcss/dist/index.mjs not supported.
[error] Instead change the require of /Users/trilliumsmith/code/trilliumsmith.com/fork/tailwind-nextjs-starter-blog/node_modules/prettier-plugin-tailwindcss/dist/index.mjs to a dynamic import() which is available in all CommonJS modules.

✖ eslint --fix failed without output (KILLED).
husky - pre-commit script failed (code 1)

@vercel
Copy link

vercel bot commented Jan 13, 2025

@trillium is attempting to deploy a commit to the timlrx's projects Team on Vercel.

A member of the Team first needs to authorize it.

@vercel
Copy link

vercel bot commented Jan 14, 2025 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
tailwind-nextjs-starter-blog ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jan 14, 2025 3:42pm

@timlrx
Copy link
Owner

timlrx commented Jan 14, 2025

Looks good to me, thanks for the fix!

@timlrx timlrx merged commit 21635a6 into timlrx:main Jan 14, 2025
2 checks passed
@trillium trillium deleted the ts.add_outline_styles_for_links_buttons branch January 14, 2025 17:50
bhiwagade-rahul pushed a commit to bhiwagade-rahul/tailwind-nextjs-starter-blog that referenced this pull request Sep 22, 2025
@timlrx
Merge pull request timlrx#1092 from trillium/ts.add_outline_styles_fo…
b04d41f 
…r_links_buttons

fix: Add outline focus-visible styles for buttons, links
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@trillium @timlrx