Added svg-link icon to headings (#377)

* Added svg-link icon to headings

Updated application.js, styling, and added the SVG to the footer. This update is so the headling links will be accessible to screenreaders.

* Updated heading link styling

The link icon now only changes opacity when the link icon itself is hovered or focused, not the whole heading.

_includes/footer.html

@@ -20,3 +20,9 @@
 </div>
 	{% include components/usa_identifier.html %}
 </footer>
+
+<div style="display: none">
+  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <symbol viewBox="0 0 24 24" id="svg-link" xmlns="http://www.w3.org/2000/svg"><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"></path></symbol>
+  </svg>
+</div>

_sass/_uswds-theme-custom-styles.scss

@@ -148,6 +148,18 @@ pre {
   white-space: pre-wrap;
 }
 
+// Show link icon after headings
+.heading-permalink {
+  text-decoration: none;
+  opacity: 0.2;
+}
+
+a.heading-permalink:hover,
+a.heading-permalink:focus {
+  opacity: 1;
+}
+
+
 // Show Slack icon before Slack Links
 a[href^="https://gsa-tts.slack.com"]::before {
   content: "";

javascripts/application.js

@@ -25,14 +25,16 @@ 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} <span aria-hidden="true"><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></span>`;
   }
 };