[UI/UX] Use :focus-visible consistently for keyboard-only focus outlines

[nanaf6203-bit]

Problem Statement

Several buttons and PropertyCards use :focus instead of :focus-visible. Mouse clicks leave behind a focus ring that doesn't help keyboard users.

Acceptance Criteria

• All interactive elements use :focus-visible (not :focus)
• Minimum 2px outline offset
• Custom Tailwind utility focus-visible:outline-ring standardised
• Storybook a11y addon reports 0 critical focus issues

Implementation Notes

Tailwind 4 ships :focus-visible utilities by default; just replace ad-hoc styles.

Files Likely Affected

• All components with focus styles
• src/components/ui/*

Difficulty / Effort

• Difficulty: Easy
• Effort: T-Shirt S

Labels

accessibility, priority:medium, area:ui

[AdaBebe0]

@AdaBebe0 has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Good Day.. I'd be happy to work on this issue. I'll first understand the existing implementation, then submit a maintainable, thoroughly tested solution that follows the project's guidelines

ℹ️ Repo Maintainers: To accept this application, review their application or assign @AdaBebe0 to this issue.

[a-malik-gh]

@a-malik-gh has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Hi! I'm interested in working on this issue.

I've reviewed the requirements and understand the expected scope and acceptance criteria. I'll follow the project's contribution guidelines, keep the implementation aligned with the existing architecture, and ensure the necessary tests are included.

If this issue isn't already assigned, I'd be happy to take it on. Please assign it to me, and I'll provide progress updates as I work through it. Thanks!

ℹ️ Repo Maintainers: To accept this application, review their application or assign @a-malik-gh to this issue.

[drips-wave]

Congratulations, @a-malik-gh! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on July 30, 2026.

🧑‍💻 @a-malik-gh: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊

[drips-wave]

This issue has been completed by @a-malik-gh as part of the Stellar Wave Program's 7th Wave 🥳

😎 @a-malik-gh: You earned 200 Points for completing this issue! After the current Wave ends, you'll be eligible for a percentage of the Wave's reward pool based on the percentage of total points you've earned. Learn more here. You can also Leave a review to share your experience working on this issue.

🧑‍💻 Repo maintainers: How'd the contributor do? Leave a review to share your experience working with them.