updates template/css so only the title becomes a link

[markconroy]

Relates to #661

What does this change?

Changes the template for the primary banner paragraph type so that if there is a link for the banner, only the title becomes a link rather than all the content.

I'll create a corresponding PR to update the help text for the field so it doesn't say the whole banner will be linked.
Corresponding PR for LocalGov Paragraphs

How to test

• Create a subsite
• Add a Primary Banner to it
• Give that banner a link
• Give it a title
• Give it a summary
• Check that only the banner title is linked rather than all the content in the banner

Have we considered potential risks?

This might make some changes to existing sites, so we need to communicate that in the release notes.

---

Thanks to Big Blue Door for sponsoring my time to work on this.

[finnlewis]

I'm testing this now. Reading the original post #661 I'd be keen to add some magic (CSS / JS ?)to make the whole area clickable still.

[finnlewis]

Could we do something along these lines? https://wpbeaches.com/fill-a-div-with-a-link-tag/

I guess it might be cleanest with some JavaScript to enhance, re-write the tag, but would this then put us back in the original position of the (I assume) screen reader reading out the whole verbose contents of the link?

[finnlewis]

@stephen-cox thinks he solved the anchor filling the box issue somewhere else recently...

[markconroy]

We can add some simple CSS to make the whole thing clickable, quite easily.

a {
  position: relative;
}
a::after {
  position: absolute;
  inset: 0;

That should be enough CSS, and only the actual link text (i.e. the title) will be read out by screenreaders.

[msayoung]

Why do we want the whole area to be clickable (in this situation)?

I know this sort of thing (whole card clickabe) is wanted sometimes, I suggest we come up with our preferred methodology and then tell people how to apply it when they want it. Perhaps a spin out another issue?

Note: the issue with Mark's suggestion is that it stops the text being selectable.

[stephen-cox]

I solve this with JS recently using:

const cards = document.querySelectorAll('.card');
Array.prototype.forEach.call(cards, card => {
  let down, up, link = card.querySelector('.card__title a');
  card.style.cursor = 'pointer';
  card.onmousedown = () => down = +new Date();
  card.onmouseup = () => {
    up = +new Date();
    if ((up - down) < 200) {
      link.click();
    }
  }
});

[markconroy]

@stephen-cox That looks like pretty nice JS. Certainly worth exploring that a bit more.

@msayoung the original request here was to not have the whole banner text area wrapped in an <a> tag. Do you want to merge this PR so we have at least accomplished that? Then we can figure out our approach to "whole-card-clickable" later?