search

madrilene / eleventy-excellent

Eleventy starter based on the workflow suggested by Andy Bell's buildexcellentwebsit.es.
https://eleventy-excellent.netlify.app/
Other
384 stars 69 forks source link

Middle-click usability issue with clickable cards #4

Closed wargaluk closed 1 year ago

wargaluk commented 1 year ago

Hi @madrilene! Thanks for your truly amazing and inspiring work on Eleventy Excellent. I'm using a heavily modified and adapted version of it on my website FigCat (you are credited on the About page).

I noticed an issue with Heydon Pickering's "redundant click event" solution for making the whole area of cards clickable (without sacrificing the ability to select text). When a card is middle-clicked (as in to open a new tab in a desktop browser), the link is opened in the current tab instead. I tested this on Firefox and Chromium.

I'm a heavy middle-clicker myself and I found this tremendously frustrating, so on my site I reverted to the pure CSS "pseudo-content trick" (also from Inclusive Components).

Unfortunately, I'm not knowledgeable enough to suggest a JavaScript alternative that would be guaranteed to work in all contexts and remain accessible.

madrilene commented 1 year ago

Wow, that site is awesome! May I add it to the 'built with' section? Also, I'll look into the redundant click matter once all the holiday meetups are over! 😬

wargaluk commented 1 year ago

That's a huge compliment coming from you, but all the awesomeness is really due to the solid base provided by your exceptional starter. Let me just say that discovering it single-handedly convinced me to try my hand at Eleventy and web development in general after about 15 years hiatus (I used to be very enthusiastic about the original web standards movement as a teenager, but then bounced off when the web became frameworks upon frameworks and absurdly nested divs with non-semantic classes). I bought access to Every Layout some time ago but it was too high-level for me to start anything on my own.

I'd be honored if you included my site in the readme, although perhaps it would be best to note that it's quite heavily customized (I wouldn't like to give any newcomers the wrong idea about the features included in your starter).

I'm sure I noticed some other minor kinks when adapting the code, so I might add another issue or two in the near future – but please, don't let it spoil your holiday / New Year season!!

madrilene commented 1 year ago

No worries, just send me everything you find, I'm happy about it!

As for this issue: Heydon's JavaScript solution has this drawback that the context menu no longer works as expected. I haven't found a solution for this yet, and after looking at other possibilities for this trick, it still seems like the best solution so far.

Here are some other possibilities explored, you might be interested in this: codepen.io/fgeierst/full/vYymQVG

madrilene commented 1 year ago

Keeping redundant click solution as is ftm

madrilene commented 1 year ago

Hey @wargaluk, after talking to Nicolas Hoizey on Mastodon I decided to go with Heydon's pseudo-content trick solution, just like you did. Just as an update! :)

wargaluk commented 1 year ago

I'm glad that my raising of this issue was helpful after all! I hope that all the avid right- and middle-clickers of the world will now join me in celebration.