From d4601d20ce66624c6eb3ef30af1f900af85baecf Mon Sep 17 00:00:00 2001
From: Stephen Marsh <stephenhmarsh@users.noreply.github.com>
Date: Thu, 23 Dec 2021 13:13:56 -0500
Subject: [PATCH] add solution for double link problem to Tiles [DIGAUD-4518]

---
 src/components/tile/tile.scss       |  2 +
 src/components/tile/tile.stories.js | 58 ++++++++++++++---------------
 src/global/accessibility.scss       | 14 +++++++
 3 files changed, 44 insertions(+), 30 deletions(-)

diff --git a/src/components/tile/tile.scss b/src/components/tile/tile.scss
index 6ee791eb..ef2c7736 100644
--- a/src/components/tile/tile.scss
+++ b/src/components/tile/tile.scss
@@ -13,6 +13,8 @@
 }
 
 .tile__image {
+	position: relative; // for invisible link
+
 	.tile--hero & {
 		margin: 0 0 $spacing-xxs 0;
 	}
diff --git a/src/components/tile/tile.stories.js b/src/components/tile/tile.stories.js
index a39d8d2f..de1111aa 100644
--- a/src/components/tile/tile.stories.js
+++ b/src/components/tile/tile.stories.js
@@ -1,62 +1,60 @@
 import html from "../../../.storybook/helpers/html";
 import repeat from "../../../.storybook/helpers/repeat";
-import { withKnobs, text, boolean, number } from "@storybook/addon-knobs";
 import { sizesTemplate } from "../image-container/image-container.stories";
 import greekHall from "../../../.storybook/assets/images/greek-hall";
 
-export default { title: "Tiles", decorators: [withKnobs] };
-
 const { image16x9 } = greekHall;
 
-const heading = (groupName="Tile") => {
-	const link = boolean("Link?", true, groupName);
-	const title = text("Title", "The Medici: Portraits and Politicis, 1512-1570", groupName);
-	return link ? html`<a href="#">${title}</a>` : title;
+export default {
+	title: "Tiles",
+	args: {
+		heading: "The Medici: Portraits and Politicis, 1512-1570",
+		link: "/#",
+		subheading: "Through October 11",
+		body: "The Met Fifth Avenue",
+		image16x9
+	}
 };
 
-const Tile = () => html`
+const Tile = (args) => html`
 	<div class="tile">
 		<div class="tile__image image-container">
-			<img class="image-container__image" alt="${image16x9.alt}" width="${image16x9.width}" height="${image16x9.height}"
+			${args.link ? html`<a class="invisible-redundant-link" aria-hidden="true" tabindex="-1" href="${args.link}"></a>` : ""}
+			<img class="image-container__image" alt="${args.image16x9.alt}" width="${args.image16x9.width}" height="${args.image16x9.height}"
 				src="${image16x9.srcSet.fallback}" srcset="${sizesTemplate(image16x9.srcSet)}" sizes="(orientation: landscape) 21vw, 50vw" />
 		</div>
 		<div>
-			<h4 class="tile__heading">${heading()}</h4>
-			<div class="tile__subheading">${text("Subheading", "Through October 11", "Tile")}</div>
-			<div class="tile__body">${text("Body", "The Met Fifth Avenue", "Tile")}</div>
+			<h4 class="tile__heading">${args.link ? html`<a href="${args.link}">${args.heading}</a>` : args.heading}</h4>
+			<div class="tile__subheading">${args.subheading}</div>
+			<div class="tile__body">${args.body}</div>
 		</div>
 	</div>`;
 
-const HeroTile = () => html`
+const HeroTile = (args) => html`
 	<div class="tile tile--hero">
 		<div class="tile__image image-container">
+			${args.link ? html`<a class="invisible-redundant-link" aria-hidden="true" tabindex="-1" href="${args.link}"></a>` : ""}
 			<img class="image-container__image" alt="${image16x9.alt}" width="${image16x9.width}" height="${image16x9.height}"
 				src="${image16x9.srcSet.fallback}" srcset="${sizesTemplate(image16x9.srcSet)}" sizes="(orientation: landscape) 42.5vw, 85vw" />
 		</div>
 		<div>
-			<h3 class="tile__heading">${heading("Hero Tile")}</h3>
-			<div class="tile__subheading">${text("Subheading", "Through October 11", "Hero Tile")}</div>
-			<div class="tile__body">${text("Body", "The Met Fifth Avenue", "Hero Tile")}</div>
+			<h3 class="tile__heading">${args.link ? html`<a href="${args.link}">${args.heading}</a>` : args.heading}</h3>
+			<div class="tile__subheading">${args.subheading}</div>
+			<div class="tile__body">${args.body}</div>
 		</div>
 	</div>`;
 
-const TileGroup = () => {
-	const options = {
-		range: true,
-		min: 1,
-		max: 36,
-		step: 1,
-	};
-
-	const numberOfTiles = number("Number of Tiles",5, options, "Tile Group");
-
-	return html`
+const TileGroup = (args) => html`
 	<div class="tile-group">
-		${HeroTile()}
+		${HeroTile(args)}
 		<ul class="tile-group__list">
-			${repeat(numberOfTiles, html`<li class="tile-group__tile">${Tile()}</li>`)}
+			${repeat(args.numberOfTiles, html`<li class="tile-group__tile">${Tile(args)}</li>`)}
 		</ul>
-	</div>`;};
+	</div>`;
+
+TileGroup.args = {
+	numberOfTiles: 5,
+};
 
 TileGroup.parameters = {
 	chromatic: { viewports: [320, 1280] }
diff --git a/src/global/accessibility.scss b/src/global/accessibility.scss
index e500d559..22cc4caa 100644
--- a/src/global/accessibility.scss
+++ b/src/global/accessibility.scss
@@ -7,3 +7,17 @@
 	white-space: nowrap;
 	width: 1px;
 }
+
+.invisible-redundant-link {
+	// e.g. to solve for double link problem on cards
+	height: 100%;
+	left: 0;
+	position: absolute;
+	top: 0;
+	width: 100%;
+
+	&:not([aria-hidden="true"][tabindex="-1"]) {
+		// bad implementation!
+		border: 2px solid red;
+	};
+};
\ No newline at end of file