feat: Add an underline to Repos text in a button

[adiati98]

Describe the bug

After clicking a repo's graph in the "Activity" tab in the Lists Page, I can't go back to the previous graphs. I need to refresh the page to do so.

Screen Recording

Note

I found out through @nickytonline stream that we can go back by clicking the "Repos" word. But I think this would be confusing for users as there is no indication that they should click the "Repos" to go back.

Suggestion

Perhaps having a button with the text "back" or adding/showing an underline (like a link) at "Repos" text to indicate that it's clickable would help.

Steps to reproduce

1. Go to the Lists page.
2. Click any list.
3. Click "Activity" tab.
4. Click one of the repo stats on the right.
5. How to get back to the previous stats with all the repo?

Browsers

Chrome

Additional context (Is this in dev or production?)

No response

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

Contributing Docs

• [X] I agree to follow this project's Contribution Docs

[github-actions[bot]]

Thanks for the issue, our team will look into it as soon as possible! If you would like to work on this issue, please wait for us to decide if it's ready. The issue will be ready to work on once we remove the "needs triage" label.

To claim an issue that does not have the "needs triage" label, please leave a comment that says ".take". If you have any questions, please reach out to us on Discord or follow up on the issue itself.

For full info on how to contribute, please check out our contributors guide.

[OgDev-01]

Hey @adiati98, We have a breadcrum implementation for navigating to the previous chart.

here is a recording on how to go page without refreshing

https://github.com/open-sauced/app/assets/62995161/77d340ff-880a-4aff-843e-3f73b5e545a8

Let me know if this helps 👍

[adiati98]

@OgDev-01 I can't see the video clearly because I'm on my mobile phone. Did you click the "Repos" to go back?

I saw that today at @nickytonline stream that we should click the "Repos" to go back to previous repos.

Perhaps if it's not possible to add a "go back" button, we can show an underline like a link to the "Repos" to indicate that it's clickable so users can at least try to click it?

[OgDev-01]

Did you click the "Repos" to go back?

Yes i did

we can show an underline like a link to the "Repos" to indicate that it's clickable so users can at least try to click it?

+1 on this suggestion, let me know if you want to play around with this in a PR. i'll take off the needs-triage label just incase 👍

Here is the line that contains the button https://github.com/open-sauced/app/blob/e5c028c8cb2ad9b8e4458211a7849630ec422e8c/components/molecules/ContributionsTreemap/contributions-treemap.tsx#L42

[adiati98]

@OgDev-01 it will take me a while to play around with this. But I'd like to try and .take it. If I can't finish it within 2 weeks, I'll unassign myself and let you know! 😊

[adiati98]

@OgDev-01 I'm playing around with this and have a couple of questions:

• At the moment, I'm playing around with the Storybook by adding an underline. Do we want to apply a hover state as below screen recording?
• Should I create a draft PR so you can take a look at the code for Storybook and let me know if I'm on the right track?

TIA! 😊

Screen Recording

[isabensusan]

hey @adiati98 !! thank you for you work on this. I've actually been trying to wrap my head around a way of showcasing the breadcrumbs in this component a bit better because I've noticed a few usability issues like the one you are bringing up in this issue.

I do think an underline would help, but I think in this case we might need a more complex solution. Because you've been working closely with this issue, I would love your opinion on the options I've come up with:

Option A - A more complex breadcrumb component

Option B - A less detailed but equally useful component

We could add the treemap level info (organization / repository) in a tooltip on hover

I would love to know your thoughts!

[adiati98]

Hi @isabensusan, thanks for getting back to me, and happy new year! 😄

After asking around and did some research, as much as I like having hover state for aestethic and simplicity reasons, accessibility-wise, this is not a best practice. It's because hover doesn't work with keyboard accessibility for screenreaders or refreshable braille displays.

We want our app to be as accessible as possible. So, based on this, option A is the best to go. It will also be easier for users to see the description on mobile, and screenreaders will read it as is without hover.