USWDS - In-Page Navigation: Fix error when clicking link starting with number

[aduth]

Summary

Fix an error when clicking a link starting with a number. Certain links would not scroll as expected when clicked.

Related issue

Fixes #5199

Problem statement

See #5199

Solution

This implements the first of the proposed options outlined at #5199 (comment) .

This has a few advantages, in that it limits the scope of the changes and maintains backwards compatibility. The only downside that I can consider is that these IDs are still technically not valid for use as CSS selectors, in case someone would need to reference it as such. As demonstrated in the included tests, a workaround is to reference the ID as using an attribute selector (e.g. [id="1-installation"]).

Testing and review

1. Run Mocha tests
2. Perhaps this could be incorporated into demo content so it could be observed in the Storybook preview?

[mahoneycm]

This works like a charm!

Tested:

1. Added numbers to the start of headings in the storybook preview
2. Clicked through in-page navigation to confirm it scrolled to the correct heading
3. Confirmed no errors in the console
4. Logged document.getElementById(el.hash.slice(1)) and confirmed the correct element was being selected.
5. Ran gulp test for in-page navigation

[mejiaj]

Thanks for the PR! I think it would be useful to add it to the twig template for Storybook.

Tested:

• Component works as expected in StorybookJS
• No issues in unit test

---

Didn't mean to edit your comment Charlie, sorry!

[amyleadem]

Good improvement. Thank you!
Works as expected when headings have a numeric prefix in Safari, Edge, Chrome, Firefox.

I agree that it would be great to see an example of this reflected in the Storybook twig template.

[thisisdano]

Nice clean solution