Refactor: reduce usage of jQuery

[angela-tran]

Part of #2493

This PR makes it so we only use jQuery for enrollment. This allows us to stop loading jQuery on every page.

Context:

I originally set out to extract inline Javascript as separate files to be loaded in with async or defer. A lot of them would have to be defer since they depend on jQuery being loaded and available.

I tried it out and saw that the performance change was negligible. There was basically no difference.

It seemed then that a more impactful change would be to reduce the need for jQuery. A lot of what we were doing with jQuery can be done with plain Javascript that is well-supported by all modern browsers.

Using https://youmightnotneedjquery.com/ and https://tobiasahlin.com/blog/move-from-jquery-to-vanilla-javascript/#document-ready as reference and testing each change thoroughly, I was able to convert over all inline Javascript except for the ones on core/enrollment/index.html and in_person/enrollment/index.html since the code there involves making AJAX requests and is more difficult to convert over.

This change showed performance improvement, specifically with First Contentful Paint and Largest Contentful Paint times, according to Lighthouse. If we want to optimize further, another PR could extract inline Javascript out to separate files and load them with async now that they don't depend on jQuery.

Before

After

[github-actions]

Coverage report

This PR does not seem to contain any modification to coverable code.

[machikoyasuda]

💯 💯 💯 💯 💯 💯 💯

[lalver1]

This is looking great, and it's so easy to follow the commit history @angela-tran, thanks!

I'm noticing one thing though. The app runs fine but in the browser console I see that in http://localhost:11369/in_person/eligibility/ and http://localhost:11369/in_person/enrollment/, the new ready JS function is not defined. For example, in in_person/eligibility/:

I think this happens because these templates don't extend core/base.html (and this is where ready is defined), they extend admin/agency-base.html, but admin/agency-base.html does not define ready. Maybe we need to put ready somewhere were all the templates can find it?

[angela-tran]

That was a great catch @lalver1, thank you!

I fixed this in e7a2ebe. Let me know if you notice anything else to change.

[angela-tran]

I'm noticing one thing though. The app runs fine but in the browser console I see that in http://localhost:11369/in_person/eligibility/ and http://localhost:11369/in_person/enrollment/, the new ready JS function is not defined.

One consequence of this was that the custom validity messages were not being shown, so definitely glad you brought this up. 💯

[lalver1]

The change in e7a2ebe looks good! I also tested the reCAPTCHA feature (I had overlooked testing it during my first review) and it works fine 👍

[machikoyasuda]

Extensively tested the Benefits application flow on Firefox, Safari and Chrome:

• Going thru the full app with keyboard only
• Opening, closing, navigating thru modals with keyboard only
• Clicking in and out of modals, around modals, outside of modals
• Filling out the agency card form and triggering various validation states
• Spinner
• reCAPTCHA

Really well done on this PR and all the documentation! Making a big improvement on performance and code. 5 stars.