feat(a11y): add escape key listener and active focus rings for keyboard navigation #578

[annukumar123]

#578

Overview

Implemented full keyboard navigation capability inside the Settings Panel to comply with foundational WAI-ARIA accessibility standards, ensuring seamless tab traversal and panel state control without manual pointer interactions.

Key Changes

• Escape Key Intercept: Added a global window event listener tracking system within a dedicated useEffect hook to gracefully close the settings dashboard upon catching an Escape keystroke.
• High-Contrast Focus Outlines: Modified select dropdown inputs and slider ranges to support explicit, sharp focus:ring-2 focus:ring-purple-500 CSS classes for clean structural visibility during sequential Tab traversal.
• Semantic Refactoring: Shifted the main wrapping grid architecture layout from a non-semantic <div> container block into an accessible, aria-labeled <section> landmark panel.
• Vitest Verification: Authored unit test coverage confirming that mocking window keydown sequences triggers the onClose callback context perfectly.

Verification Checklist

• Verified high-contrast purple focus borders activate across all range slider controls on Tab inputs.
• Confirmed the panel vanishes immediately upon pressing Escape from anywhere inside the DOM matrix tree.
• All test specs pass completely under the local execution console window runner.

[vercel]

@annukumar123 is attempting to deploy a commit to the Darshan's projects Team on Vercel.

A member of the Team first needs to authorize it.

[imDarshanGK]

@annukumar123 resolve conflicts