LG-14754: Avoid focus loss on submit button when submitting form

[aduth]

🎫 Ticket

LG-14754

🛠 Summary of changes

Updates the behavior of submit buttons to avoid disabling the button using disabled attribute, instead using a combination of aria-disabled and event handlers to prevent duplicate submission when the button is already activated.

This fixes an issue where focus loss can occur if the page's submit button is the active element when submitting the form. While this is usually not a problem because it's expected that the user will be navigated away after submitting the form, this can cause issues in some screen readers which announce the loss of focus (e.g. JAWS announcing "Unavailable").

📜 Testing Plan

Verify that focus is maintained when submitting a form, and that you cannot submit twice:

SpinnerButtonComponent:

Apply diff to force a pause in submission and to validate duplicate submission handling, since form submission normally happens quickly:

diff --git a/app/javascript/packages/captcha-submit-button/captcha-submit-button-element.ts b/app/javascript/packages/captcha-submit-button/captcha-submit-button-element.ts
index 45f6e33afe..700789d12c 100644
--- a/app/javascript/packages/captcha-submit-button/captcha-submit-button-element.ts
+++ b/app/javascript/packages/captcha-submit-button/captcha-submit-button-element.ts
@@ -69,5 +69,6 @@ class CaptchaSubmitButtonElement extends HTMLElement {
     if (this.shouldInvokeChallenge()) {
       event.preventDefault();
-      this.invokeChallenge();
+      debugger;
+      // this.invokeChallenge();
     }
   };

1. Go to http://localhost:3000
2. Open browser developer tools
3. Fill in email and password
4. Press Tab to shift focus to "Sign in" button
5. Press Enter
6. Observe that breakpoint is triggered
7. Dismiss breakpoint
8. Observe that the focus highlight remains on the button while submitting
9. Press Enter
10. Observe that breakpoint is not triggered

SubmitButtonComponent:

Apply diff to force a pause in submission and to validate duplicate submission handling, since form submission normally happens quickly:

diff --git a/app/controllers/sign_up/registrations_controller.rb b/app/controllers/sign_up/registrations_controller.rb
index a0dd702f04..db73956e9d 100644
--- a/app/controllers/sign_up/registrations_controller.rb
+++ b/app/controllers/sign_up/registrations_controller.rb
@@ -21,4 +21,5 @@ module SignUp
 
     def create
+      binding.pry
       @register_user_email_form = RegisterUserEmailForm.new(analytics:)

1. Go to http://localhost:3000
2. Click "Create an account"
3. Fill in email address
4. Check Rules of Use checkbox
5. Press Tab to shift focus to "Submit" button
6. Press Enter
7. Observe that the focus highlight remains on the button while submitting
8. Press Enter one or more times, and/or click the submit button
9. Change to terminal process where server is running
10. Observe that breakpoint is triggered
11. Press Ctrl + D to dismiss breakpoint
12. Observe that the breakpoint is not re-triggered, indicating that the server only received one form submission.
13. Observe that you're redirected in the browser to the signup email confirmation page

[aduth]

Taking more advantage of private class members, for clearer separate of public/private interface, and better bundle optimization (related Slack thread).

[aduth]

Without this change, the styles aren't strong enough to override default USWDS as expected, resulting in a grey button.

Before	After

[aduth]

Using node:test mock here instead of sinon because I think it might be possible to eventually move toward dropping Sinon in the future, this making that future work simpler.

Continuing to use Sinon in spinner-button-element.spec.ts for consistency's sake, since it's already used there.

[aduth]

Update to be able to use HTMLElement#ariaDisabled in specs.

jsdom/jsdom#3655

[kevinsmaster5]

LGTM, tested locally.