search

bluewave-labs / checkmate

Checkmate is an open-source, self-hosted monitoring tool built with React.js, Node.js, and MongoDB, designed to track server uptime, response times, and incidents in real-time with beautiful visualizations. Get powerful insights and proactive alerts to keep your services running smoothly.
https://uptime-demo.bluewavelabs.ca/
GNU Affero General Public License v3.0
619 stars 69 forks source link

[FE] - Add visual cue to Profile Settings #1121

Open marcelluscaio opened 3 weeks ago

marcelluscaio commented 3 weeks ago

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 commented 3 weeks ago

Hey @marcelluscaio, can I work on this issue?

marcelluscaio commented 3 weeks ago

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

guninwasan commented 1 week ago

@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

https://github.com/user-attachments/assets/ce30c78f-4aa1-41c4-ba6b-5e40ee0e1969

Screenshot 2024-11-19 at 21 20 07
marcelluscaio commented 1 week ago

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 Screenshot 2024-11-20 054004

gorkem-bwl commented 4 days ago

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

guninwasan commented 3 days ago

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