Modals impair backwards navigation

[p5quared]

Modals appear to be coupled to <Router />, assumedly so you can share links to elements, e.g.: https://stacksorted.com/grids/apple-iphone-14.

However, backwards navigation does not relaunch modals, causing the appearance of broken navigation.

Recreation:

1. Open any /category.
2. Click on some elements and open modals.
3. Press back button a number of times.

Doing this a number of times with different steps, like opening modals, switching category, opening modals, and trying to 'back' repeatedly, yields somewhat unpredictable results. Even try using the site for a little bit, then clicking down the categories one by one, and then pressing back a few times.

This effect is almost certainly affecting accessibility.

Thoughts

• Replacing buttons that have onClick => navigate(abc) with anchors would not only make the page's html more semantically correct, but it would also make things simpler by moving a lot of logic from the site to the browser itself. (I'll post example).
• Moving to Sveltekit's router would probably be able to eliminate 40% of the necessary logic and overhead pertaining to window.location.pathname.
• A possible solution to the modal/shareability is to place the selected modal into a query param (/category?selected=example). That way you can keep modal history (automatically, via browser I might add), and again pass the logic of navigation history out of the application and into the browser.

[p5quared]

See #23

[p5quared]

Here is a demonstration of the backwards navigation issue I encountered. Link

[kalisnetwork]

Yeah! it happened to me once , For an instance we cannot go backwards or get out of site, It just keep on looping and we stuck on site.

Example : Try to get into three sections and repeat once up and down then you stuck forever there.