add links to accordions (#557)

Author: mmagsa

_includes/accordion.html

@@ -12,6 +12,11 @@
       aria-controls="{{ include.accordion_id }}"
     >
       {{ include.title }}
+      <a href="#{{ include.id }}"
+         class="accordion-link"
+         aria-label="anchor"
+         aria-describedby="{{ include.id }}"
+         >#</a>
     </button>
 </dt>
 <dd id="{{ include.accordion_id }}" class="usa-accordion__content usa-prose">

assets/js/anchor_accordion.js

@@ -1,16 +1,17 @@
 (() => {
-  const onChange = (_event) => {
-    const urlHash = new URL(document.URL).hash;
-    const idFromHash = urlHash.match(/^(#[A-Za-z0-9_-]+)$/);
-    if (idFromHash) {
-      const accordionHeading = document.querySelector(
-        `${idFromHash[1]}.usa-accordion__heading > button`,
+  const jumpToAccordion = (_event) => {
+    const accordionId = new URL(document.URL).hash;
+    if (accordionId) {
+      const accordionButton = document.querySelector(
+        `${accordionId}.usa-accordion__heading > button`,
       );
-      if (accordionHeading) {
-        accordionHeading.click();
+      const accordionBody = document.querySelector(`${accordionId}.usa-accordion__heading + dd`);
+      if (accordionButton && accordionBody.hidden) {
+        accordionButton.click();
       }
     }
   };
-  document.addEventListener('DOMContentLoaded', onChange);
-  window.addEventListener('hashchange', onChange);
+
+  document.addEventListener('DOMContentLoaded', jumpToAccordion);
+  window.addEventListener('hashchange', jumpToAccordion);
 })();

assets/scss/main.css.scss

@@ -165,6 +165,15 @@ button.code-button:hover {
   height: 1.3rem;
 }
 
+.accordion-link {
+  display: none;
+  text-decoration: none;
+}
+
+.usa-accordion__heading:hover .accordion-link {
+  display: inline;
+}
+
 @media (min-width: 1024px) {
   .code-snippet-column {
     background-color: transparent;