Missing Visible Focus Indicators Reduce Keyboard Accessibility

[Tushar15769]

📌 Description

Interactive components remove browser focus styles without providing accessible replacements.

Current behavior:

Components use focus:outline-none
No visible replacement focus styles exist
Keyboard focus location is difficult to identify
Dark backgrounds further reduce visibility
Focus states are inconsistent across components
Accessibility expectations are not met

Because focus indicators are hidden, keyboard users cannot determine which element currently has focus.

As a result:

Keyboard navigation becomes difficult
Accessibility compliance is impacted
User orientation is reduced
Interactive workflows become confusing
Non-mouse users experience usability issues

🎯 Expected Behavior

Visible focus indicators should be provided
Focus styles should remain accessible on all backgrounds
Keyboard users should easily identify focus location
Focus visibility should be consistent across components
Accessibility standards should be maintained

[anshul23102]

Hi @singhtrivendra, I would like to work on this issue. I have reviewed the codebase and have a targeted fix planned.

assign/

Contribution under GSSoC'26.

[github-actions]

This issue is stale because it has been open 30 days with no activity.