-
Notifications
You must be signed in to change notification settings - Fork 316
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: add a scroll to top btn #1332
Conversation
Ooops just noticed this is waiting for me - I have added it to my backlog @12rambau apologies for the delay |
no problems we all have long dashboards, I'm pretty sure i'm late on many other. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks, @12rambau. Since you already use a button element for this, I think it should already have all the correct ARIA added.
I left a couple of comments - nothing blocking.
Also since I could not see the button in the rendered PR is this meant to be enabled by default or would this require user-configuration?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This looks great to me - once @trallard is happy I'm happy to merge 👍
Co-authored-by: Tania Allard <[email protected]>
Co-authored-by: Tania Allard <[email protected]>
I checked this page and it worked by default as expected. Note that the button only appears if you start scrolling up. |
aha! It took me a while to notice it since it appears right in the middle of the screen and the colour is slightly off the background. So, the current positioning + style is not distinct enough from the surrounding context. (it might need aligning with the new design system - but the issue will, more than likely persist) I think placing this at the bottom of the page with a more noticeable styling would be a better positioning. See, for example, this website https://ashleemboyer.com/blog/accessible-smooth-scroll-to-top-buttons-with-little-code (I know it is a single-column content page), but the style does make it much easier to spot. Another example is the gov.uk design system page where the Tagging @smeragoel in case she has any insights to share with us from a UX perspective |
I'm +1 on putting it on the bottom. I'm assuming most people will use "up to top" on mobile and if that assumption is right, their thumb is easier to reach the bottom than the top |
Absolutely! I completely forgot about the thumb areas on mobile. See for ref https://www.smashingmagazine.com/2016/09/the-thumb-zone-designing-for-mobile-users/ |
I've moved the button in the last 20% of screen so it's closer to where we expect to find it. I kept some margin in case people get an big footer. I also changed its color to primary. @trallard let me know if it's more visible to you. |
I think having it on the bottom is definitely an improvement from having it on top. However, I don't like the fact that the button overlaps existing content, that is always messy from a UX pov. I quite like the gov.uk design system page suggestion made my @trallard. I think we can modify the button to be on the bottom right of the screen, since the right sidebar is pretty much empty towards the bottom. That way the button will be visible, and we avoid any sort of overlapping. This article also outlines some guidelines for |
thanks @smeragoel for your feedback. As this button needs to be available for small devices how can I add it without overlapping the text ? should I hard code an horizontal position or maintain it in the content area for any devices ? |
haha, wrong GitHub tab! |
Some thoughts
Suggestions:
|
Ah good point about colors. In that case I think it's better we merge this and get feedback from people rather than getting things perfect now. I'm +1 to merge as is |
As you like, I'll hold off on merging if you prefer to do that fix here instead of a follow up |
Right let's merge and do a quick follow-up PR to fix the colours. |
@smeragoel do you wish to hold off on merging or are you ok to merge and iterate? |
Let me update the branch with the modification suggested and I'll merge it |
+1 from me as well to merge it now, and then focus on colours and later positioning! |
Thanks all for your comments, I've done the color updates and merged. Let's iterate from it afterward |
Fix #1126
I added a scroll to top btn to the main article page. It's located 2 * header sidebar from the top and centered on the page. Following instrcution from @choldgraf and the bootstrap implementation (https://mdbootstrap.com/snippets/standard/mdbootstrap/2964350#js-tab-view) I manage to get something lightweight and working.
The trigger is simply: "when scolling up and under the header initial bottom". I decided to avoid the hidden pixel and to rely on the header bottom to avoid issue when there is a disclaimer.
let me know what you think. pinging @trallard as you mentioned some a11y issues that I may failed to apply.