Close #1013: Add permalink to checklist items

Created by: andrewborstein

Closes #1013 (closed)

Permalink Example

Visitors on the Checklist page can now

1. Expose the URL to an individual checklist item by pressing its associated "Permalink" anchor element
2. Visit a checklist item permalink URL like /checklist/#validate-your-html, which scrolls the item into view and (when JS is enabled) opens its details

Notes and Questions

• I'm open to other UI suggestions! I wanted to aim for something simple, conventional, and matching existing styles. But I'm unsure if this link could benefit from some other visual distinction, particularly from the checklist item citation link.
• Is "Permalink" too jargony? I also considered copy like "Share Link" or "Shareable URL".
• Does associating the link to its checklist item via aria-describedby sufficiently meet 2.4.4 Link Purpose (In Context)? Including the entire title in the visible link text seemed liked overkill and rendering visually hidden text seemed unnecessary when the text already exists and could be linked using this technique.
• I noticed a bug in Chrome where continually refreshing the page with a permalink URL in place continues scrolling further and further down the page instead of reloading the same scroll position. The issue doesn't occur when visiting the URL in new tabs or windows, or in Firefox or Safari. It might be related to this bug , but doesn't seem like a critical user flow that needs to be supported above and beyond the first page visit always working.
• I wanted to extract checklist.title | slugify to a local variable but couldn't figure out how. I don't have a ton of Nunjucks / 11ty experience, so insight there is appreciated!

src/_includes/checklist.njk

-<details class="c-checklist">
-	<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="#{{ slugifiedTitle }}">
+			Share Link
+			<span class="u-hide-visually">to checklist item: {{ title }}</span>
+		</a>
 	</p>
 </details>

src/css/components/_c-checklist.scss

@@ -129,3 +129,8 @@ $_checklist-padding: 1.5rem;
 		@include link-states($color-blue-shade);
 	}
 }
+
+.c-checklist__share-link {
+	padding-bottom: $_checklist-padding;
+	padding-left: $_checklist-inset;
+}

src/js/main.js

@@ -49,3 +49,22 @@ if (navigator && navigator.clipboard && navigator.permissions) {
 		};
 	});
 }
+
+// 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. 
+function openLinkedCheckListItem() {			
+	var checklistItems = document.querySelectorAll("[data-checklist-item-id]");
+
+	checklistItems.forEach(function (item) {
+		var shareLink = "#" + item.getAttribute("data-checklist-item-id");
+		var isItemLinked = shareLink === document.location.hash;
+
+		if (isItemLinked) {
+			item.setAttribute("open", true);
+		}
+	});
+}
+
+openLinkedCheckListItem();
\ No newline at end of file