Merge pull request #5200 from aduth/aduth-5199-error-heading-number

USWDS - In-Page Navigation: Fix error when clicking link starting with number
uswds · May 8, 2023 · f0c1d61 · f0c1d61
2 parents e3c7004 + 61f1242
commit f0c1d61
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 1 deletion.
diff --git a/packages/usa-in-page-navigation/src/index.js b/packages/usa-in-page-navigation/src/index.js
@@ -232,7 +232,7 @@ const createInPageNav = (inPageNavEl) => {
  * @param {HTMLElement} el An element within the in-page nav component
  */
 const handleClickFromLink = (el) => {
-  const elementToScrollTo = document.querySelector(el.hash);
+  const elementToScrollTo = document.getElementById(el.hash.slice(1));
   handleScrollToSection(elementToScrollTo);
 };
 

diff --git a/packages/usa-in-page-navigation/src/test/in-page-navigation.spec.js b/packages/usa-in-page-navigation/src/test/in-page-navigation.spec.js
@@ -132,6 +132,7 @@ tests.forEach(({ name, selector: containerSelector }) => {
         "h2 ~ h3 > .usa-anchor#section-1-1",
         "h2 ~ h3 ~ h3 > .usa-anchor#section-1-2-2",
         "h2 ~ h3 ~ h3 ~ h3 > .usa-anchor#section-1-3",
+        "h2 ~ h3 ~ h3 ~ h3 ~ h3 > .usa-anchor[id='1-4-section-1-4']",
       ].every((selector) => document.querySelector(selector));
 
       assert(ok);
@@ -167,6 +168,13 @@ tests.forEach(({ name, selector: containerSelector }) => {
       assert.equal(window.scroll.called, false);
     });
 
+    it("handles headings starting with a number", () => {
+      const firstLink = theNav.querySelector("a[href='#1-4-section-1-4']");
+      firstLink.click();
+
+      assert(window.scroll.calledOnceWith(sinon.match({ top: 880 })));
+    });
+
     context("with initial hash URL", () => {
       before(() => {
         sinon.stub(window, "location").value({ hash: undefined });

diff --git a/packages/usa-in-page-navigation/src/test/template.html b/packages/usa-in-page-navigation/src/test/template.html
@@ -10,6 +10,8 @@ <h3>Section 1.2</h3>
     <p id="section-1-2">Section 1.2 content</p>
     <h3>? Section 1.3.</h3>
     <p>Section 1.3 content</p>
+    <h3>1.4 Section 1.4</h3>
+    <p>Section 1.4 content</p>
   </main>
 
   <aside class="usa-in-page-nav" data-title-text="On this page" data-title-heading-level="h4" data-scroll-offset="20"></aside>