CMD+click does not open a tab

[petarmarj]

Bug Description

Since one of the more recent updates, users can no longer use the established shortcut CMD/CTRL+click to open an article in a new tab.

Expected Behaviour

CMD/CTRL+click opens link in new tab.

Steps to reproduce

CMD/CTRL+click on a teaser on the front. The article opens in the same frame.

Environment

Chrome

Version

Concerns Chrome and Firefox, version-independent, as dependent on implemented Javascript handling.

[manuelmeister]

This is a degradation of accessibility. 🙁

[trm217]

The teasers themselves aren't anchor tags. They used to be, but that implementation caused a bunch of issues and was also invalid HTML, that's why it was removed.

The titles on the teasers, however, are wrapped in an anchor tag, you can click it with CMD + click and get the link to be opened in a new tab as expected.

So simply click the title on the teaser, instead of the whole teaser with CMD+Click to get the desired behavior.

Perhaps we can look into adding a custom click handler on the teasers themselves sometime when we have more time on our hands. (Unfortunately, this isn't quite as trivial as one would think with the current front implementation)

[manuelmeister]

You could just wrap the image in anchor tags (more like a secondary click area).

[petarmarj]

I cannot confirm that CMD+click on the title wrapped in an a-tag in the current state brings the desired effect. Just tested with Firefox 118.0 (64-bit) on MacOS 10.15.7 (19H2026). A quick google tells me that <Link passHref><a>...</a></Link> could fix this - but I have no idea about NextJS. Please don't hit me up if it's wrong.

[trm217]

@manuelmeister

You could just wrap the image in anchor tags (more like a secondary click area).

Unfortunately, it's not so trivial. As mentioned the current implementation sadly doesn't allow us to easily manipulate the rendering-schema, so getting this to work properly won't be as easy as one would think.

@petarmarj
Oh, my assumption that this should work was wrong after all, seems the schema intercepts the regular link click…
About your input regarding passHref, that is already set and seems to have no effect whatsoever.

Either way, we can look into this at some point, but right now we don't have resources to spare.
In the meantime, perhaps you could use the feed.

[manuelmeister]

@trm217 where is the template/schema for the teaser?

[petarmarj]

Well, then I'll see what possibilities I have as a subscriber to create the appropriate resources for you. I'm sure I'll find some say if it doesn't work here via Github.

[jstcki]

I believe we've been relying on a behavior of next.js' Link component that doesn't seem to work anymore (i.e. attaching an onClick handler on any element that's wrapped inside – not just links). There are better (CSS-only) solutions but getting this right is a bit more involved:

• https://inclusive-components.design/cards/
• https://www.sarasoueidan.com/blog/nested-links/