Set aria-busy on the form element during a form submission

This is useful for styling the form while it is submitting. Before this change, we were only setting aria-busy on frames while they were loading and on the html element while Turbo was processing a visit.
hotwired · Dec 18, 2023 · 5522d55 · 5522d55
1 parent ac00359
commit 5522d55
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 2 deletions.
diff --git a/src/core/drive/form_submission.js b/src/core/drive/form_submission.js
@@ -1,6 +1,6 @@
 import { FetchRequest, FetchMethod, fetchMethodFromString, fetchEnctypeFromString, isSafe } from "../../http/fetch_request"
 import { expandURL } from "../url"
-import { dispatch, getAttribute, getMetaContent, hasAttribute } from "../../util"
+import { clearBusyState, dispatch, getAttribute, getMetaContent, hasAttribute, markAsBusy } from "../../util"
 import { StreamMessage } from "../streams/stream_message"
 
 export const FormSubmissionState = {
@@ -117,6 +117,7 @@ export class FormSubmission {
     this.state = FormSubmissionState.waiting
     this.submitter?.setAttribute("disabled", "")
     this.setSubmitsWith()
+    markAsBusy(this.formElement)
     dispatch("turbo:submit-start", {
       target: this.formElement,
       detail: { formSubmission: this }
@@ -155,6 +156,7 @@ export class FormSubmission {
     this.state = FormSubmissionState.stopped
     this.submitter?.removeAttribute("disabled")
     this.resetSubmitterText()
+    clearBusyState(this.formElement)
     dispatch("turbo:submit-end", {
       target: this.formElement,
       detail: { formSubmission: this, ...this.result }

diff --git a/src/tests/fixtures/form.html b/src/tests/fixtures/form.html
@@ -15,7 +15,7 @@
   <body>
     <h1>Form</h1>
     <div id="standard">
-      <form action="/__turbo/redirect" method="post" class="redirect">
+      <form id="standard-form" action="/__turbo/redirect" method="post" class="redirect">
         <input type="hidden" name="path" value="/src/tests/fixtures/form.html">
         <input type="hidden" name="greeting" value="Hello from a redirect">
         <input id="standard-post-form-submit" type="submit" value="form[method=post]">

diff --git a/src/tests/functional/form_submission_tests.js b/src/tests/functional/form_submission_tests.js
@@ -131,6 +131,31 @@ test("standard POST form submission with redirect response", async ({ page }) =>
   )
 })
 
+
+test("sets aria-busy on the form element during a form submission", async ({ page }) => {
+  await page.click("#standard form.redirect input[type=submit]")
+  await nextBody(page)
+
+  assert.ok(await formSubmitStarted(page))
+  assert.equal(await pathname(page.url()), "/src/tests/fixtures/form.html")
+  assert.equal(await visitAction(page), "advance")
+  assert.equal(getSearchParam(page.url(), "greeting"), "Hello from a redirect")
+
+  await nextEventNamed(page, "turbo:submit-start")
+  assert.equal(
+    await nextAttributeMutationNamed(page, "standard-form", "aria-busy"),
+    "true",
+    "sets [aria-busy] on the form element"
+  )
+
+  await nextEventNamed(page, "turbo:submit-end")
+  assert.equal(
+    await nextAttributeMutationNamed(page, "standard-form", "aria-busy"),
+    null,
+    "removes [aria-busy] from the form element"
+  )
+})
+
 test("standard POST form submission events", async ({ page }) => {
   await page.click("#standard-post-form-submit")