search

my-covid-story / www

We are a group of concerned citizens who could no longer stand by as Ontario is led into a humanitarian crisis. We believe the power of storytelling is an effective means to drive government action.
https://www.mycovidstory.ca
Creative Commons Zero v1.0 Universal
9 stars 5 forks source link

Use browser back on story close to restore scroll position in feed #169

Closed davesteinberg closed 3 years ago

davesteinberg commented 3 years ago

This reverts part of @LuckeeDev's PR #139, which sought to improve accessibility by turning the Close button on the individual story page into a simple link to /.

While well intentioned, that change caused a problem: Going back restores the scroll position on the previous page, but navigating forward does not. So, readers now lose their position in the feed when they use the Close button to return to it. In general, implementing a Back or Close button by invoking the browser back behaviour is a good approach. In addition to the scroll position advantage, it usually reflects the user's intent, which results in a location history that's more useful and makes more sense to them.

As for the accessibility concern, I believe it's misplaced. The back behaviour is valuable to all users, so that's why we're using a button rather than a link. However someone interacts with the site, it appears as a button marked Close, and that's exactly what it is. There are already plain links to / elsewhere on the page, if that's what someone is looking for.

The other change in the PR, which made the story links keyboard accessible was an important improvement, so I'm leaving that part intact -- though I did need to put back the special href with ?back=true that tells the story page that it's safe to go back (as opposed to if someone follows a link directly to a story from an external source).

vercel[bot] commented 3 years ago

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/my-covid-story/www/H6DVpMGi11HejATdx5DLATXzgsGn
✅ Preview: https://www-git-dsstory-back-my-covid-story.vercel.app

silent1mezzo commented 3 years ago

📝Changed routes:

/story/[id]
Screenshot of /story/[id]
(view full size)

Commit cbd9e6e794f9f3e1c87c9d51adb3abba420384d2 (https://www-gq1ett888-my-covid-story.vercel.app).

davesteinberg commented 3 years ago

Oh, one more tricky thing to mention: Restoring scroll position on back doesn't work in the dev server, but it does in the built site. So it would have been very easy not to notice that the change from button to link broke this, since it never appeared to work in the first place if you were only looking at it in the dev server.