WS2-2029: Anchor Menu links do not properly highlight the active area

[juanmitriatti]

Description

Description of problem

Anchor Menu links do not properly highlight the active area

Solution

Removed Bootstrap scrollspy from anchor-menu.js and I added a new custom functionality

Links

• JIRA ticket

Checklist

• Design updates match Web Standards and Unity Design System
• Solution is documented on the Jira ticket
• QA steps to verify have been included on the Jira ticket
• No new PHP or JS errors
• No accessibility issues are introduced with this update
• Added/updated README.md files, if relevant
• Confirm that any yaml files included have a matching update hook

Verified in browsers

• Chrome
• Safari
• Firefox
• Edge

Screenshots

Note: Sections that are not applicable for this issue can be removed.

[mlsamuelson]

Created multidev environment pr-435 for webspark-ci.

[mlsamuelson]

I've asked @davidornelas11 to do a first pass on this one since it was fairly recently he helped with switching to scrollspy and then ported that over to UDS. Want to make sure there's not a simpler or different approach that might make sense.

[davidornelas11]

So unfortunately this is a known issue with scrollspy as it targets the element with that id that matches the nav item. I played around with it a bit and got it work a lot better by modifying the threshold of the intersectionObserver config in scrollspy but it still has that "dead space" when there is a long paragraph. Juan Pablo's code targets the text so it always stays on until it hits the next section, and if that's the functionality we want then this would be a valid fix

[mlsamuelson]

I will be creating a ticket for UDS to eventually use this approach.