Change header links to be accessible

Updated application.js, styling, and added the SVG to the footer. This update is so the heading links will be accessible to screenreaders, instead of reading `#`.

Author: AnitaYCheng

_includes/footer.html

@@ -18,6 +18,13 @@
     Get in touch
 </a>
 
+<!--Add SVG for header links-->
+<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>
+
 <!--<script src="{{site.baseurl}}/assets/js/site.js"/>-->
 <!-- Digital Analytics Program roll-up, see https://analytics.usa.gov for data -->
 <script id="_fed_an_ua_tag"

_sass/footer.scss

@@ -8,3 +8,14 @@
     padding-left: units(3);
   }
 }
+
+// Styling for heading links
+.heading-permalink {
+  text-decoration: none;
+  opacity: 0.2;
+}
+
+a.heading-permalink:hover,
+a.heading-permalink:focus {
+  opacity: 1;
+}

assets/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>`;
   }
 };