[Outreachy Task Submission] Focus Trap added To Onboarding Modal

[MugoBrian]

This PR addresses this issue.

Fix:

1. Implemented the cdkFocusTrap directive to ensure focus trapping functionality within the onboarding modal.
2. Updated the Help&Support text by wrapping it within a button semantic element to make it focusable.
3. Adjusted its color and hover color to improve color contrast for better accessibility.

To Reproduce
Steps to reproduce the behavior:

1. Navigate to the Ushahidi platform.
2. Access the browser's developer tools console and clear or modify the value of "USH_is_onboarding_done" to true in the local storage. Afterward, refresh the page.
3. Utilize the tab key on your keyboard to navigate through the elements on the page.

Screencast
FocusTrap Fix for Onboarding Modal.webm

[MugoBrian]

Hello @Angamanga, @Ifycode , @tuxpiper , this PR is ready for review.

[Chiemezuo]

Great catch, buddy!!
However, it might have been better if you raised a PR to just close the issue, and raised another one to show the other fix. This way, it could be reviewed quicker, without anyone having to bother about whether or not they want to introduce that particular piece of CSS into the codebase.

[MugoBrian]

Great catch, buddy!! However, it might have been better if you raised a PR to just close the issue, and raised another one to show the other fix. This way, it could be reviewed quicker, without anyone having to bother about whether or not they want to introduce that particular piece of CSS into the codebase.

Hello @Chiemezuo, I don't quite get it. That means I will have two PRs address same issue or?

[Chiemezuo]

No, I meant: A PR to address the direct issue, which is the lack of keyboard focus trap.
And then another one to improve the design.

This way, the first can be approved/merged without the second getting in the way.
It was just a suggestion though (for faster review time), but there's nothing wrong whatsoever with your current approach.

[MugoBrian]

No, I meant: A PR to address the direct issue, which is the lack of keyboard focus trap. And then another one to improve the design.

This way, the first can be approved/merged without the second getting in the way. It was just a suggestion though (for faster review time), but there's nothing wrong whatsoever with your current approach.

If I am getting this right, do you mean I need to reference the issue in my PR?

[Chiemezuo]

No, not at all.
I was saying: The third problem you solved in this PR (as written in your description) is good enough as a standalone PR.

[MugoBrian]

No, not at all. I was saying: The third problem you solved in this PR (as written in your description) is good enough as a standalone PR.

Ooh. Haha :) I get you now.

[Chiemezuo]

Cheers
:)