From d81b4576ab618eb6b17e369fb32a8cd653582d76 Mon Sep 17 00:00:00 2001
From: Andrew Borstein <aborstein@wespire.com>
Date: Sat, 1 Aug 2020 14:07:19 -0400
Subject: [PATCH 1/5] Add permalink to checklist item details

Allow website visitors to copy and share a direct link to a specific checklist item.
---
 src/_includes/checklist.njk          | 3 +++
 src/css/components/_c-checklist.scss | 5 +++++
 2 files changed, 8 insertions(+)

diff --git a/src/_includes/checklist.njk b/src/_includes/checklist.njk
index 2c51bd05..f8e7c26c 100755
--- a/src/_includes/checklist.njk
+++ b/src/_includes/checklist.njk
@@ -11,4 +11,7 @@
 	<p class="c-checklist__description">
 		{{ checklist.description | safe }}
 	</p>
+	<p class="c-checklist__permalink">
+		<a aria-describedby="{{ checklist.title | slugify }}" class="c-checklist__link" href="#{{ checklist.title | slugify }}">Permalink</a>
+	</p>
 </details>
diff --git a/src/css/components/_c-checklist.scss b/src/css/components/_c-checklist.scss
index 40cd3e79..fde35190 100644
--- a/src/css/components/_c-checklist.scss
+++ b/src/css/components/_c-checklist.scss
@@ -129,3 +129,8 @@ $_checklist-padding: 1.5rem;
 		@include link-states($color-blue-shade);
 	}
 }
+
+.c-checklist__permalink {
+	padding-bottom: $_checklist-padding;
+	padding-left: $_checklist-inset;
+}
-- 
GitLab


From 8054227ecf52867ea8761ab7e75936b178d489ed Mon Sep 17 00:00:00 2001
From: Andrew Borstein <aborstein@wespire.com>
Date: Sun, 2 Aug 2020 00:11:33 -0400
Subject: [PATCH 2/5] Open checklist item details on permalink navigation

Automatically open the checklist item <details> when its navigated to using the new permalink URL.
---
 src/_includes/checklist.njk |  2 +-
 src/js/main.js              | 19 +++++++++++++++++++
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/_includes/checklist.njk b/src/_includes/checklist.njk
index f8e7c26c..6eb1486e 100755
--- a/src/_includes/checklist.njk
+++ b/src/_includes/checklist.njk
@@ -1,4 +1,4 @@
-<details class="c-checklist">
+<details class="c-checklist" data-checklist-item-id="{{ checklist.title | slugify }}">
 	<summary id="{{ checklist.title | slugify }}" class="c-checklist__summary">
 		<span class="c-checklist__summary-inner">
 			<svg class="c-checklist__icon" aria-hidden="true" focusable="false" height="30" width="30" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><path d="M9.07,29.55l-2.15-2.1L19,15,6.92,2.55,9.07.45,23.23,15Z"/></svg>
diff --git a/src/js/main.js b/src/js/main.js
index b9631e1e..da8715b0 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -49,3 +49,22 @@ if (navigator && navigator.clipboard && navigator.permissions) {
 		};
 	});
 }
+
+// When someone navigates directly to a checklist item using a permalink URL
+// like a11yproject.com/checklist/#validate-your-html, the item with the
+// matching id attribute will be scrolled into view. Then, if JS is enabled,
+// this code will open its associated <details> element. 
+function openLinkedCheckListItem() {			
+	var checklistItems = document.querySelectorAll("[data-checklist-item-id]");
+
+	checklistItems.forEach(function (item) {
+		var permalinkHref = "#" + item.getAttribute("data-checklist-item-id");
+		var isItemLinked = permalinkHref === document.location.hash;
+
+		if (isItemLinked) {
+			item.setAttribute("open", true);
+		}
+	});
+}
+
+openLinkedCheckListItem();
\ No newline at end of file
-- 
GitLab


From 5a8f460b439ec1b028b152f4a936bb41f1e3ce7f Mon Sep 17 00:00:00 2001
From: Andrew Borstein <aborstein@wespire.com>
Date: Sun, 2 Aug 2020 18:11:11 -0400
Subject: [PATCH 3/5] Change "Permalink" to "Share Link"

It's a little less jargony and the URL will also change when the title changes, so it's not actually very permanent.
---
 src/_includes/checklist.njk          | 4 ++--
 src/css/components/_c-checklist.scss | 2 +-
 src/js/main.js                       | 6 +++---
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/_includes/checklist.njk b/src/_includes/checklist.njk
index 6eb1486e..df5a359e 100755
--- a/src/_includes/checklist.njk
+++ b/src/_includes/checklist.njk
@@ -11,7 +11,7 @@
 	<p class="c-checklist__description">
 		{{ checklist.description | safe }}
 	</p>
-	<p class="c-checklist__permalink">
-		<a aria-describedby="{{ checklist.title | slugify }}" class="c-checklist__link" href="#{{ checklist.title | slugify }}">Permalink</a>
+	<p class="c-checklist__share-link">
+		<a aria-describedby="{{ checklist.title | slugify }}" class="c-checklist__link" href="#{{ checklist.title | slugify }}">Share Link</a>
 	</p>
 </details>
diff --git a/src/css/components/_c-checklist.scss b/src/css/components/_c-checklist.scss
index fde35190..dbee90c5 100644
--- a/src/css/components/_c-checklist.scss
+++ b/src/css/components/_c-checklist.scss
@@ -130,7 +130,7 @@ $_checklist-padding: 1.5rem;
 	}
 }
 
-.c-checklist__permalink {
+.c-checklist__share-link {
 	padding-bottom: $_checklist-padding;
 	padding-left: $_checklist-inset;
 }
diff --git a/src/js/main.js b/src/js/main.js
index da8715b0..19782bc4 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -50,7 +50,7 @@ if (navigator && navigator.clipboard && navigator.permissions) {
 	});
 }
 
-// When someone navigates directly to a checklist item using a permalink URL
+// When someone navigates directly to a checklist item using its "Share Link" 
 // like a11yproject.com/checklist/#validate-your-html, the item with the
 // matching id attribute will be scrolled into view. Then, if JS is enabled,
 // this code will open its associated <details> element. 
@@ -58,8 +58,8 @@ function openLinkedCheckListItem() {
 	var checklistItems = document.querySelectorAll("[data-checklist-item-id]");
 
 	checklistItems.forEach(function (item) {
-		var permalinkHref = "#" + item.getAttribute("data-checklist-item-id");
-		var isItemLinked = permalinkHref === document.location.hash;
+		var shareLink = "#" + item.getAttribute("data-checklist-item-id");
+		var isItemLinked = shareLink === document.location.hash;
 
 		if (isItemLinked) {
 			item.setAttribute("open", true);
-- 
GitLab


From d1956ba01e22110ab6711b2b7d13631e30ab0801 Mon Sep 17 00:00:00 2001
From: Andrew Borstein <aborstein@wespire.com>
Date: Sun, 2 Aug 2020 18:12:44 -0400
Subject: [PATCH 4/5] Use visually hidden text instead of aria to provide share
 link context

This is a more reliable technique that also respects the first rule of aria.
---
 src/_includes/checklist.njk | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/_includes/checklist.njk b/src/_includes/checklist.njk
index df5a359e..87232816 100755
--- a/src/_includes/checklist.njk
+++ b/src/_includes/checklist.njk
@@ -12,6 +12,9 @@
 		{{ checklist.description | safe }}
 	</p>
 	<p class="c-checklist__share-link">
-		<a aria-describedby="{{ checklist.title | slugify }}" class="c-checklist__link" href="#{{ checklist.title | slugify }}">Share Link</a>
+		<a class="c-checklist__link" href="#{{ checklist.title | slugify }}">
+			Share Link
+			<span class="u-hide-visually">to checklist item: {{ checklist.title | safe }}</span>
+		</a>
 	</p>
 </details>
-- 
GitLab


From af4e1db0fa899974c8cbe741b02b74173f1ce5f5 Mon Sep 17 00:00:00 2001
From: Andrew Borstein <aborstein@wespire.com>
Date: Sun, 2 Aug 2020 18:14:19 -0400
Subject: [PATCH 5/5] Extract checklist item data to variables

---
 src/_includes/checklist.njk | 20 +++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/_includes/checklist.njk b/src/_includes/checklist.njk
index 87232816..81390691 100755
--- a/src/_includes/checklist.njk
+++ b/src/_includes/checklist.njk
@@ -1,20 +1,26 @@
-<details class="c-checklist" data-checklist-item-id="{{ checklist.title | slugify }}">
-	<summary id="{{ checklist.title | slugify }}" class="c-checklist__summary">
+{% set slugifiedTitle = checklist.title | slugify %}
+{% set description = checklist.description | safe %}
+{% set title = checklist.title | safe %}
+{% set url = checklist.url %}
+{% set wcag = checklist.wcag %}
+
+<details class="c-checklist" data-checklist-item-id="{{ slugifiedTitle }}">
+	<summary id="{{ slugifiedTitle }}" class="c-checklist__summary">
 		<span class="c-checklist__summary-inner">
 			<svg class="c-checklist__icon" aria-hidden="true" focusable="false" height="30" width="30" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><path d="M9.07,29.55l-2.15-2.1L19,15,6.92,2.55,9.07.45,23.23,15Z"/></svg>
-			<span class="c-checklist__title">{{ checklist.title | safe }}</span>
+			<span class="c-checklist__title">{{ title }}</span>
 		</span>
 	</summary>
 	<p class="c-checklist__citation">
-		<a class="c-checklist__link" href="{{ checklist.url }}">{{ checklist.wcag }}</a>
+		<a class="c-checklist__link" href="{{ url }}">{{ wcag }}</a>
 	</p>
 	<p class="c-checklist__description">
-		{{ checklist.description | safe }}
+		{{ description }}
 	</p>
 	<p class="c-checklist__share-link">
-		<a class="c-checklist__link" href="#{{ checklist.title | slugify }}">
+		<a class="c-checklist__link" href="#{{ slugifiedTitle }}">
 			Share Link
-			<span class="u-hide-visually">to checklist item: {{ checklist.title | safe }}</span>
+			<span class="u-hide-visually">to checklist item: {{ title }}</span>
 		</a>
 	</p>
 </details>
-- 
GitLab