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