fix: add visible focus rings for keyboard navigation

[Sam-61s]

Description

• Fixes a keyboard accessibility issue where interactive elements used focus:outline-none without an alternative focus indicator.
• Adds visible and accessible focus ring styles to ensure clear keyboard navigation feedback.

Video Recording

Screen.Recording.2025-12-26.092652.mp4

Related issue(s)

• Fixes [BUG] Missing Focus Rings on Interactive Elements - Keyboard Navigation Issue #4780

Summary by CodeRabbit

• Style
  • Updated focus ring styling on interactive navigation and explorer elements for improved visibility when navigating with keyboard
  • Refined border radius on buttons and navigation components throughout the interface

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[netlify]

✅ Deploy Preview for asyncapi-website ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	fd2adae
🔍 Latest deploy log	https://app.netlify.com/projects/asyncapi-website/deploys/6954fc9b039cd00008f95185
😎 Deploy Preview	https://deploy-preview-4820--asyncapi-website.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[coderabbitai]

📝 Walkthrough

Walkthrough

Updates interactive elements across navigation components with improved visual focus indicators for keyboard accessibility. Changes include reducing border radius from rounded-md to rounded-sm and adding consistent focus:ring-2 focus:ring-gray-900 styles to buttons and links in the navigation bar, navigation items, and docs layout.

Changes

Cohort / File(s)	Summary
Navigation Focus Ring Updates components/navigation/NavBar.tsx, components/navigation/NavItem.tsx	Adds focus:ring-2 focus:ring-gray-900 focus indicator styling to SearchButton, mobile menu button, and navigation links. Reduces border radius from rounded-md to rounded-sm for consistency.
Docs Layout Button Styling components/layout/DocsLayout.tsx	Updates explorer menu and mobile sidebar toggle buttons with rounded-sm and replaces focus style from focus:ring-0 focus:ring-black to focus:ring-2 focus:ring-gray-900 for improved keyboard navigation visibility.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 Focus rings bright, a journey clear,
Tab through the nav, no need for fear!
Gray-900 glows when fingers roam,
Keyboard friends now find their home. ✨

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'fix: add visible focus rings for keyboard navigation' directly and accurately summarizes the main change in the changeset, which involves adding focus ring styles to interactive elements for keyboard accessibility.
Linked Issues check	✅ Passed	All coding requirements from issue #4780 are met: visible focus rings were added to interactive elements in NavBar.tsx, DocsLayout.tsx, and NavItem.tsx, replacing focus:outline-none with accessible focus:ring-2 focus:ring-gray-900 styles.
Out of Scope Changes check	✅ Passed	All changes are directly related to the linked issue #4780; the modifications exclusively address keyboard accessibility focus rings across the three specified files with no unrelated alterations.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

✨ Finishing touches

• 📝 Generate docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 100.00%. Comparing base (b927d5d) to head (fd2adae).
⚠️ Report is 23 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff            @@
##            master     #4820   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           22        22           
  Lines          799       798    -1     
  Branches       146       146           
=========================================
- Hits           799       798    -1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[asyncapi-bot]

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🔴 Performance	39
🟢 Accessibility	98
🟢 Best practices	92
🟢 SEO	100
🔴 PWA	33

Lighthouse ran on https://deploy-preview-4820--asyncapi-website.netlify.app/

[Sam-61s]

@anshgoyalevil,
I have fixed the keyboard accessibility issue by adding visible focus rings to interactive elements lacking focus indicators.
Could you please review this when you get a chance?
Thanks! 🙌