financial well-being wonky no-js

[BrewCityBoy]

Taken from Financial well-being has wonky no JS logic #4504

If you visit https://www.consumerfinance.gov/consumer-tools/financial-well-being/ the "Get my score" button at the bottom is disabled. This disabling is controlled through JavaScript. So, if JavaScript is disabled, that button will be enabled. If you then click it with JS disabled, you end up on https://www.consumerfinance.gov/consumer-tools/financial-well-being/error/

This seems wrong. It doesn't seem like you should allow the user to fill out the form, if they are presented an error when it is submitted. It seems like we should just show a notification when JS is disabled, like is done in OAH and ROUT (see #7557, for an example).

To test:
Disable JS, and reload page to see removal of form and error popup on http://localhost:8000/consumer-tools/financial-well-being/

Disable JS in chrome: https://developer.chrome.com/docs/devtools/javascript/disable/

[anselmbradford]

Doesn't seem like we should show the warning notification on no-js? Or, if we do, we should have padding between the two notifications.

[anselmbradford]

What if we replaced all the content "Here’s how it works" down through the form with the error notification? It doesn't seem to make sense to show any of that heading content if the form is absent?

[anselmbradford]

You might have seen because of the failing Cypress test, but 00d5f7c ends up with a blank content area when JS is turned on.

I think you can have two containers like you were doing—the error notification and the content. But you can use these two existing utility classes for each container and I don't think you would need any additional CSS in this PR.

[anselmbradford]

LGTM! 👍

You might squash down the commits to clean up the history before merging.