[FE] - Add visual cue to Profile Settings

[marcelluscaio]

In the profile settings, the tabs (Profile, Password, Teams) do not provide visual cues for the focus state, making harder for keyboard navigation. Also, the border is misaligned.

There should be a visual cue when navigating between these interactive elements. It would be best if they follow these guidelines:
https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html
https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html

I don't see an alternative implementation.

[guninwasan]

Hey @marcelluscaio, can I work on this issue?

[marcelluscaio]

Thank you for your interest, @guninwasan ! Yes, you can work on that

[guninwasan]

@marcelluscaio just wanted to get some more clarity on the issue. I tried keyboard navigation on profile both locally and the demo site, and it seems like there are visual cues to show what the tab the user is on

Screen.Recording.2024-11-19.at.21.25.56.mov

[marcelluscaio]

Yeah, of course! So that would be in the page itself, not on the navbar links.
Up here (and when you are the admin, there are two other tabs

[gorkem-bwl]

@guninwasan just wanted to check back the progress here. Thanks!

[guninwasan]

Hey @gorkem-bwl and @marcelluscaio the PR is up for review. Let me know if I need to make any changes to it. Thanks!