Add visible focus indicators for interactive elements

[moha0993]

Description

Adds visible focus indicators for interactive elements using :focus-visible and high-contrast outlines.

This ensures that keyboard users can clearly identify which element is currently focused, improving accessibility and usability across the application.

Addressed Issue

Closes #1603

Additional Details

The issue was caused by CSS overriding or removing default browser focus indicators (e.g., outline: none), resulting in invisible focus states for certain elements.

The fix introduces explicit :focus-visible styles using a high-contrast 3px outline and outline-offset to ensure consistent and clearly visible indicators across all affected interactive elements, including the navbar toggle, sidebar navigation items, and sidebar minimizer.

The solution was designed to:

• Restore visibility of focus indicators for keyboard navigation
• Avoid impacting mouse interactions by using :focus-visible
• Override any existing styles that suppress default outlines

Verified by:

• Testing keyboard navigation using the Tab key
• Confirming all interactive elements display a clear and consistent focus outline
• Ensuring no visual regressions or layout issues were introduced

-->

Checklist

• I have read and understand the contributing guidelines
• This PR introduces new or alters existing behavior, and I have updated the documentation accordingly

[owasp-dt-bot]

✅ Snyk checks have passed. No issues have been found so far.

Status	Scan Engine	Critical	High	Medium	Low	Total (0)
✅	Open Source Security	0	0	0	0	0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.