Update application.js to make heading links accessible

javascripts/application.js

@@ -25,17 +25,39 @@ const addHeadingLinks = () => {
   };
 
   const headings = document.querySelectorAll(
-    "main h1, main h2, main h3, main h4, main h5, main h6"
+    "main h2, main h3, main h4, main h5, main h6"
   );
   for (const heading of headings) {
     if (!heading.id) {
       heading.id = slugify(heading.innerText);
     }
 
-    heading.innerHTML = `${heading.innerText} <a href="#${heading.id}" aria-hidden="true" tabindex="-1" class="usa-link heading-link--symbol">#</a>`;
+    heading.innerHTML = `${heading.innerText} <a href="#${heading.id}" aria-label="Permanent link to ${heading.innerText}" class="usa-link heading-permalink heading-link--symbol"><svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
+          <use xlink:href="#svg-link"></use>
+          </svg></a>`;
   }
 };
 
+const markHeadingLink = () => {
+  const externalLinkIcon = document.createElement("img");
+  externalLinkIcon.setAttribute(
+    "src",
+    `{{ site.baseurl }}/assets/uswds/img/usa-icons/link.svg`
+  );
+  externalLinkIcon.setAttribute("alt", "(external link)");
+  externalLinkIcon.setAttribute("style", "width: 1rem;");
+
+  Array.from(document.querySelectorAll("main a[href]"))
+    .filter((a) => {
+      const href = a.getAttribute("href");
+      return (
+        !href.startsWith(window.location.origin) &&
+        !/^[/#]/.test(a.getAttribute("href"))
+      );
+    })
+    .forEach((a) => a.appendChild(externalLinkIcon.cloneNode()));
+};
+
 const markExternalLinks = () => {
   const externalLinkIcon = document.createElement("img");
   externalLinkIcon.setAttribute(