[Outreachy Task Submission] Keyboard Accessibility: Improve UX of Sidebar (Focus Indicator use of semantic elements) Mobile View.

[MugoBrian]

Describe the bug
While navigating the sidebar mobile view with a keyboard, the focus indicator is not clear and it uses the browser's default focus indicator, thus it's not consistent across browsers.

Where was the bug observed
The issue is focused on the sidebar in mobile view.

To Reproduce
Steps to reproduce the behavior:

1. Go to the Ushahidi client platform.

2. Minimize the browser window to simulate a tablet, or

3. Use the developer tools

   • On Mac:

     1. Open developer tools - Cmd + Shift + I
     2. Enable responsiveness - Cmd + Shift + M

   • On Windows:

     1. Open developer tools - Ctrl + Shift + I
     2. Enable responsiveness - Ctrl + Shift + M

4. Navigate the sidebar using the Tab button to traverse the elements.

Environment

• Browser: Chrome.

This issue is a continuation of this issue