fix(a11y): improve focus outline contrast for keyboard navigation

[JarvisInvestInsight]

Summary

This PR fixes the focus outline contrast issues reported in #647. Keyboard users couldn't see focus indicators due to very low opacity values.

Changes

uno.config.ts

• focus-ring: Changed ring-fg/10 to ring-fg/50 for visible focus rings
• Added ring-offset-bg for consistent offset coloring
• input-base: Changed border-fg/40 to border-fg/50 and ring-fg/10 to ring-fg/30

app/assets/main.css

• Link focus outline: Changed from var(--border) to var(--fg-muted) for better contrast

Testing

Tab through interactive elements in both light/dark mode - focus indicators are now visible.

Fixes #647

---

Found this helpful? ☕ Buy me a coffee

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Feb 2, 2026 0:58am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Feb 2, 2026 0:58am
npmx-lunaria	Ignored		Feb 2, 2026 0:58am

[whitep4nth3r]

This is looking better in terms of colour contrast!

I found some areas that need the same treatment though.

Settings page:

A package page:

There are still some focussed items that don't show the full outline, for example on a package page:

There are some others too on the package page.

The logo on in the header could do with the same treatment also.

[JarvisInvestInsight]

@whitep4nth3r Thanks for the detailed review! I've pushed updates addressing the feedback:

• Settings Toggle - Added focus ring to the switch button
• CollapsibleSection - Added focus styles to the section header anchor links
• Tag shortcut - Added focus-visible styles so interactive tags/badges show proper outlines

Also rebased on latest main. Let me know if there are any other elements that need attention!

[whitep4nth3r]

All focus rings in this top bar do not match the others, some of them are a darker grey and the first item has a blue inner ring.

I'd still love to see some of the items that don't have a complete focus ring addressed, like this one, and a lot of the focused items in the right sidebar.

Also, when some items are focussed in the right sidebar, they are only underlined and do not have a full ring. This would be nice if it was consistent.

The compare page input field also doesn't have the same great focus ring as the input field on the search page.

Keep going!

[thasmo]

Wondering; could the accent color be used as the base color for setting the outline color, possibly mixing it, to make it darker/lighter if needed?

[JarvisInvestInsight]

@whitep4nth3r Good catches! Just pushed a fix for the compare page input field - it was missing the focus ring entirely.

For the top bar inconsistencies, I think you're right that there's some mixing of styles. I'll dig into that - looks like some elements might be using browser defaults or conflicting focus classes.

The partial/clipped focus rings (like on the version selector) are interesting - I suspect it's an overflow issue where the parent container clips the ring. I'll investigate.

Quick question on the sidebar links: would you prefer they all have full focus rings, or is the underline acceptable for inline text links? Happy to make them consistent either way - just want to check if there's a preferred pattern for the project.

[JarvisInvestInsight]

@thasmo That's an interesting idea! Using the accent color could make the focus rings feel more intentional and integrated with the design system.

Currently I'm using ring-fg/50 (foreground color at 50% opacity) which provides good contrast across different themes. Using accent would look great but might need some care to ensure enough contrast in all theme/accent combinations.

Maybe something like ring-accent/70 or mixing accent with a darker shade? What do you think would work best with the existing accent color options?

[whitep4nth3r]

Thanks for looking into everything!

I would go with full focus rings throughout.

[JarvisInvestInsight]

Perfect, full rings it is! I'll work through the remaining elements and push an update.

[JarvisInvestInsight]

Pushed a bigger update that standardizes focus rings across the codebase:

Fixed:

• Header nav links (Compare, Settings) - removed conflicting inline styles, now use link-subtle shortcut properly
• Header search input - consistent ring-fg/50 with offset
• Home page search input - same treatment
• Mobile menu button - uses focus-ring shortcut
• Compare page inputs (search + remove buttons)
• Connector modal inputs
• Translation helper links

The issue was some components were using ring-accent/50 while the focus-ring shortcut uses ring-fg/50 - now they should all match.

Still need to look at the version selector clipping issue, will dig into that next.

[thasmo]

Maybe something like ring-accent/70 or mixing accent with a darker shade? What do you think would work best with the existing accent color options?

@JarvisInvestInsight, I guess it might not be so easy to just use the same opacity/formula for all existing colors, so I don't have an answer for that. 😅 I think you're doing a great job by fixing the focus/outline issues, and maybe we can bring the topic to the a11y channel in Discord. There are already some ideas about font settings as well etc. Maybe also a high-contrast mode would make sense, but I'm no A11Y expert by all means. But maybe we can throw some requirements together and revamp the settings/colors along the way without bloating the scope too much. 🙂

[JarvisInvestInsight]

Agreed, let's keep this PR focused on the focus ring fixes. Happy to jump into the a11y channel on Discord to discuss fonts, high-contrast mode, and other improvements - sounds like a good opportunity to scope out a broader a11y roadmap for the project.

[JarvisInvestInsight]

Pushed another update addressing the clipping issues:

Fixed:

• Changed sidebar container from \overflow-hidden\ to \overflow-clip\ - this preserves content clipping but allows focus rings to extend outside (modern CSS, supported in all major browsers)
• Added full focus rings to section header links: #keywords, #compatibility, #get-started, #readme

The \overflow-clip\ approach is cleaner than adding inset rings or padding, as it keeps the existing layout while just fixing the focus ring clipping.

Still investigating the version selector focus ring clipping - that might need a different approach since it's inside a dropdown.

[whitep4nth3r]

I'm still seeing a lot of clipping on both halves of the layout on the package page.

[thasmo]

@JarvisInvestInsight, be aware of #626. Feel free to align with @jellydeck for the accent focus-color improvements. 👍

[whitep4nth3r]

Closing to focus on #626