top | item 45926345

(no title)

Merinov | 3 months ago

Thanks for testing! The whole card IS clickable actually, it has two click targets: Click anywhere on the card and it goes to the summary article page on europedigital.cloud (with translations, context, etc.) Click the "source" link and it goes directly to the original article

This way users can choose: read our summary/translations, or jump straight to the source. Tried to make it intuitive without cluttering the UI.

You're right about the sorting/filtering requiring JS though - it's client-side state. Could move that to URL params for better progressive enhancement.

Appreciate the detailed feedback, this kind of testing helps! :)

discuss

order

embedding-shape|3 months ago

> Thanks for testing! The whole card IS clickable actually, it has two click targets: Click anywhere on the card and it goes to the summary article page on europedigital.cloud (with translations, context, etc.) Click the "source" link and it goes directly to the original article

The problem is that you're handling that with JavaScript, instead of adding a <a> with a href, and also missing href for the <img> element.

When you do this, you break the expectations of a typical web user. For example, I cannot ctrl+click or middle-mouse+click on anything of what you've done, because you personally didn't think about how people browse websites. That's not a problem, and not really your fault, lots of courses and tutorials get this wrong, teaching people to use divs then use JS for actually handling the navigation.

If instead you use a.href and img.href, you get all of these expected behavior for free, without doing anything! And as a extra bonus, people who are blind or otherwise need assistance tooling for browsing the web, will now also be able to use your website with their tooling! :)

Merinov|3 months ago

Very good point. I'm using Next.js link components but handling the dual target behavior with JS click handlers, which does indeed break native browser behavior.

You're right that this should be: - Proper <a href> for the card wrapper - Nested <a href> for the source link - Let the browser handle ctrl+click, middle-click, etc.

Will add this to the refactor list right away. Thank you for the detailed breakdown this is exactly the kind of extra eyes and explanation I need!