Implement RemoveScroll and FocusLock for Improved Accessibility in Modal Component

[47anjan]

This pull request addresses issues with users accidentally scrolling outside the modal or tabbing to elements behind the modal. It implements the use of RemoveScroll and FocusLock within the Modal component to enhance accessibility and improve user experience.

Previous accessibility issues:

1. Accidental Scrolling: When the modal content is larger than the viewport, users could potentially scroll the entire page behind the modal. This disrupts their focus and makes it difficult to interact with the modal itself.
2. Focus Loss: When using the keyboard to navigate the modal, users might accidentally tab past the modal boundaries and interact with elements on the underlying page. This can be confusing and disrupt their intended interaction with the modal.

Improvements:

• RemoveScroll prevents scrolling outside of the modal, ensuring users remain focused within the intended content.
• FocusLock maintains keyboard focus within the modal, preventing users from inadvertently interacting with elements outside of it.

By integrating these features, we adhere to accessibility best practices and provide a smoother and more accessible modal experience for all users.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
keep-react	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 17, 2024 10:43am

[vercel[bot]]

@anjankarmakar10 is attempting to deploy a commit to the StaticMania Team on Vercel.

A member of the Team first needs to authorize it.

[Arifulislam5577]

Hi Dear @anjankarmakar10,

Absolutely fantastic work! 🚀 This feature is exactly what we've been looking for. I'll merge your code right away. Thank you so much for your awesome contribution! Your efforts are greatly appreciated. Please feel free to share any feedback, and we're eagerly anticipating your next contribution. Keep up the amazing work!

Thanks Md Ariful Islam