CTA cards not fully clickable

[advaith1]

Hovering anywhere in a CTA card triggers a color change, so I would assume that I can click it to go to the link. However, if my cursor happens to be above another text block, it covers the link so the click doesn't work.

I would just fix this myself, but I noticed in #799, this seemed to be an intentional decision by @knowler:

using z-index to keep heading and paragraph text on top so it can be directly selected

It seems unusual to want to have selectable text within a clickable card, and IMO this is very confusing to the user since they can click in some parts of the card but not others. Is there a reason to have this behavior?

chrome_wx3vnOgbQX.mp4

[knowler]

Yes, this was intentional though I will admit it’s not the most pleasant and could be better.

It is possible to improve upon the current experience by setting justify-self: start to the <h3> elements and place-self: start to the <p> elements which will reduce the size of their own clickable “boxes.” That’s how I thought I had it, but perhaps I’m misremembering or something else changed.

I would rather we remove the “clickability” of the cards over totally removing the “selectability” of the text, as I think clickable cards are an antipattern. Text affords selection on the web. Even though links afford clickability, it is possible to select a link’s text by holding down the alt or option key. None of that works as expected if we set the clickable area on top of everything within the card. Yes, presenting the card as being a link and having some parts of it not be clickable also disappoints the affordance of links. The current implementation is a compromise and that’s why clickable cards are an anti-pattern.

---

A bit on how we got here…

Originally, the cards had no inner semantics which wasn’t great for a few reasons:

1. The accessible names of the links were really long and not immediately descriptive of their specific actions (i.e. the action of the link were loaded at the end of their very long accessible names). This caused an unpleasant experience for screen reader users (i.e. they’d have to listen through the entire link text to understand what they were navigating to).
2. What were perceivable as visual headings were not navigable by assistive technology (i.e. navigating by heading is very common amongst those who use screen readers).

It is valid to mark up the card contents with semantic HTML and wrap that with an <a> element, as the latter permits flow content, and elements such as <h3> and <p> both allow any element that permits flow content as their parent. However, that does not solve the first problem and it creates a discoverability problem as a user who navigates to the headings would not subsequently find the link. This is why we needed to make the link only contain the CTA text and to be within the structure.

[knowler]

I think probably the best way that we can apply this “enhancement” is to use JavaScript.

card.addEventListener("click", event => {
	const { altKey, metaKey } = event;
	// Let the link do its thing
	if (event.target.matches(":any-link")) return;
	// User is trying to select the text
	if (altKey && !metaKey) return;
	// There is already selection
	if (getSelection().type === "Range") return;

	event.preventDefault();

	const link = event.currentTarget.querySelector(":any-link");

	// Since these links are `target=_blank` we don’t need to worry 
	// about whether the user is trying to open it in a new tab or not.
	link.click();
});

Then we would just set cursor: pointer on the entire card.

[advaith1]

I would rather we remove the “clickability” of the cards over totally removing the “selectability” of the text, as I think clickable cards are an antipattern. Text affords selection on the web.

hm I disagree with this. Clickable cards are a common UI and I think they are the general user expectation, and I wouldn't expect UI text other than primary content to be selectable. (e.g. you can't select text in buttons unless you start outside of the button.) I don't think there is value in the text in these CTA cards being selectable, and I would much prefer a normal UI where the entire card is clickable.

[knowler]

I do think the JS snippet I shared would be sufficient to meet your expectation while not changing a fundamental expectation for how one of the oldest features of the world wide web works. It presents the whole thing like a link would be presented and allows it to be selectable like a link.

[pauliecodes]

Hi! I would like to try to fix it.

I can implement the approach @knowler suggested above.

Is it okay if I open a PR for this? Would be my first issue, so I thought I would ask first

[knowler]

In #1517 (comment) @pauliecodes wrote

Is it okay if I open a PR for this? Would be my first issue, so I thought I would ask first

Please do! I don’t know Vue well enough to do it myself. I would recommend removing the existing absolute positioning and z-index trickery as it’s not needed with that solution.

Do keep in mind that the team is taking a vacation this week, so there might be no one to review it until Saturday at the earliest, I believe.

[pauliecodes]

Thanks for the quick reply!

Do keep in mind that the team is taking a vacation this week, so there might be no one to review it until Saturday at the earliest, I believe.

Oh yeah I know, thanks! I just saw this issue tagged as a good first issue and thought this was a good chance for me to try making my first contribution, as I am a bit nervous! But I don't have a rush with the review or anything.