feat: add a scroll to top btn

[12rambau]

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.

[trallard]

Ooops just noticed this is waiting for me - I have added it to my backlog @12rambau apologies for the delay

[12rambau]

no problems we all have long dashboards, I'm pretty sure i'm late on many other.

[trallard]

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?

[choldgraf]

This looks great to me - once @trallard is happy I'm happy to merge 👍

[12rambau]

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?

I checked this page and it worked by default as expected. Note that the button only appears if you start scrolling up.

[trallard]

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 Back to top component is also at the bottom - on their sidebar, but since there is little clutter there, it is easy to see it

Tagging @smeragoel in case she has any insights to share with us from a UX perspective

[choldgraf]

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

[trallard]

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/

[12rambau]

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.

[smeragoel]

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 scroll to top buttons, and they suggest that the bottom right side of the page is the most intuitive.

[12rambau]

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 ?

[drammock]

I would guess it's related, and it's because those other functions are passing args, not kwargs, and you inserted your new kwarg before n_fft in _mt_spectra. Put your new kwarg at the end.

haha, wrong GitHub tab!

[choldgraf]

This looks great. One question: for me the button has black text on blue background and it's a bit hard to read. Is it WCAG friendly?

[trallard]

Some thoughts

1. I am still not super convinced of the position - but that could be fixed later on also based on feedback
2. The button is in the primary colour, right now there are a lot of components and links with the same colour so that button would be failing contrast requirements when overlapping with the links behind it (they are the same colour so there is a 1:1 contrast)

Suggestions:

• This PR is still using the old colours so it would be best to merge main here to bring in line with the recent changes
• Change the colour to our secondary colour (that way it should have enough contrast against the background when overlapping over links and such)
• ensure the text inside the button meets contrast requirements by using the --pst-color-secondary-text variable that is generated based on WCAG contrast of 4.5:1

See https://pydata-sphinx-theme.readthedocs.io/en/latest/user_guide/web-components.html#badges-and-buttons

[choldgraf]

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

[trallard]

I'd say we should at least fix the text colour inside the button - right now it's using the --pst-color-text-base which is inaccessible on both themes (and makes this button different from all the other buttons now on the theme)

[choldgraf]

As you like, I'll hold off on merging if you prefer to do that fix here instead of a follow up

[trallard]

Right let's merge and do a quick follow-up PR to fix the colours.

[choldgraf]

@smeragoel do you wish to hold off on merging or are you ok to merge and iterate?

[12rambau]

Let me update the branch with the modification suggested and I'll merge it

[smeragoel]

+1 from me as well to merge it now, and then focus on colours and later positioning!

[12rambau]

Thanks all for your comments, I've done the color updates and merged. Let's iterate from it afterward