Global | Replace react-scroll library with browser scroll

[Mottie]

Value Statement

As a developer of VA.gov I want to remove an unnecessary scroll library So that scrolling works as expected

---

Background Context

React-scroll is a library to manage scrolling, but it hasn't been updated in the past 8 months, and it isn't being used properly on VA.gov - passing a query selector or element will result in scrolling not working and a console error message that has been largely ignored.

Removing the library pros and cons:

Pros

• Replacing the scroll functions to allow passing in query selectors and elements would benefit all apps.
• Removing animated scrolling (we'd still have smooth scrolling) benefits users with reduced motion preferences
• One less library dependency

Cons

• Dropping support for older Internet Explorer browsers - only Microsoft Edge v79+ (released Jan 15, 2020) will have support. Unless we add code to support it.
• Removing animated scrolling (design & dev expectations)
• Removing a library specializing in scrolling behavior

Outcome, Success Measure, KPI(S), and Tracking Link

• Add here

Acceptance Criteria

• [ ] Update platform scroll utilities
• [ ] Replace application use of scroller with platform utility
• [ ] All tests passing

Tasks

• [ ] Update and consolidate scroll utilities in platform
• [ ] Update and point application scroll function to platform
• [ ] Add replacement for react-scroll element component
• [ ] Find and replace Button & Link react-scroll components, if needed
• [ ] Update unit tests

Definition of Ready

• [ ] Clear value description
• [ ] Testable acceptance criteria
• [ ] Accessibility added to acceptance criteria
• [ ] Approved designs attached
• [ ] Sample data provided where appropriate
• [ ] Estimated to fit within the sprint
• [ ] Dependencies and blockers linked

Definition of Done

• [ ] Meets acceptance criteria
• [ ] Passed E2E testing (90% coverage)
• [ ] Passed unit testing (90% coverage)
• [ ] Passed integration testing (if applicable)
• [ ] Code reviewed (internal)
• [ ] Submitted to staging
• [ ] Team approved production verification process
• [ ] Reviewed and approved by product and/or design

[comaurice]

Opened a PR to replace elements, needs review.

[comaurice]

Let's break this down a bit further (investigate how many apps it touches).

[dfong-adh]

Robin investigating some unusual behavior with scrolling