🔗 Fixing my biggest SPA pet peeve in Phoenix

Recently, I noticed that a Phoenix app generated with mix phx.new includes one of my biggest complaints as a user of Single Page Apps.

My number one pet peeve is when looks like a link, clicking on it takes you to another page, but it isn’t actually a link.

This bothers me so much because I expect to be able to Ctrl+Click / Cmd+Click on it to open it in a new tab without affecting the tab I’m on. But then I find out the hard way because my current tab navigates to the new page, even though that’s exactly what I was trying to prevent.

Sometimes this is just a little frustrating because I wasn’t expecting it. Other times, it makes accomplishing your original goal more difficult than it needed to be because you can’t quickly open tabs for the five resources you are interested in. And sometimes this even nukes form state, search results, or other work you had in progress.

There are other aspects of this that annoy me, like not being able to right click and copy the URL, not being able to see the URL preview, and so on. This also causes accessibility issues because the user can’t actually tab to this, and even if we add a tabindex attribute, the user still can’t hit Enter to follow the link.

But I’m going to be completely honest and just admit that the Ctrl+Click just annoys me.