data-turbo-stream links should not set aria-busy (#681)

Normally when following a link Turbo sets `[aria-busy="true"]` on the document element. When the visit is complete, that attribute is removed. However, when using `[data-turbo-stream]` to request a stream response to a link, there is no visit to complete. That presented as a bug where `aria-busy` was set at the start of the operation, but never cleared. To solve this, we avoid setting the `aria-busy` attribute for links that have a `data-turbo-stream` attribute.
hotwired · Aug 16, 2022 · 0b606ef · 0b606ef
1 parent 256418f
commit 0b606ef
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 4 deletions.
diff --git a/src/core/session.ts b/src/core/session.ts
@@ -210,13 +210,17 @@ export class Session
   }
 
   visitStarted(visit: Visit) {
+    if (!visit.acceptsStreamResponse) {
+      markAsBusy(document.documentElement)
+    }
     extendURLWithDeprecatedProperties(visit.location)
     if (!visit.silent) {
       this.notifyApplicationAfterVisitingLocation(visit.location, visit.action)
     }
   }
 
   visitCompleted(visit: Visit) {
+    clearBusyState(document.documentElement)
     this.notifyApplicationAfterPageLoad(visit.getTimingMetrics())
   }
 
@@ -346,7 +350,6 @@ export class Session
   }
 
   notifyApplicationAfterVisitingLocation(location: URL, action: Action) {
-    markAsBusy(document.documentElement)
     return dispatch<TurboVisitEvent>("turbo:visit", { detail: { url: location.href, action } })
   }
 
@@ -366,7 +369,6 @@ export class Session
   }
 
   notifyApplicationAfterPageLoad(timing: TimingData = {}) {
-    clearBusyState(document.documentElement)
     return dispatch<TurboLoadEvent>("turbo:load", {
       detail: { url: this.location.href, timing },
     })

diff --git a/src/tests/fixtures/visit.html b/src/tests/fixtures/visit.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html id="html">
   <head>
     <meta charset="utf-8">
     <title>Turbo</title>
@@ -19,7 +19,9 @@ <h1>Visit</h1>
       <hr class="push-below-fold">
       <p><a id="below-the-fold-link" href="/src/tests/fixtures/one.html">one.html</a></p>
       <hr class="push-below-fold">
-      <p><a id="stream-link" href="/src/tests/fixtures/one.html?key=value" data-turbo-stream>Stream link with ?key=value</a></p>
+      <p><a id="stream-link" href="/__turbo/stream-response?content=link&type=stream&key=value" data-turbo-stream>Stream link with ?key=value</a></p>
     </section>
+
+    <div id="messages"></div>
   </body>
 </html>
diff --git a/src/tests/functional/visit_tests.ts b/src/tests/functional/visit_tests.ts
@@ -7,6 +7,7 @@ import {
   isScrolledToTop,
   nextBeat,
   nextEventNamed,
+  noNextAttributeMutationNamed,
   readEventLogs,
   scrollToSelector,
   visitAction,
@@ -187,6 +188,15 @@ test("test visits with data-turbo-stream include MIME type & search params", asy
   assert.equal(getSearchParam(url, "key"), "value")
 })
 
+test("test visits with data-turbo-stream do not set aria-busy", async ({ page }) => {
+  await page.click("#stream-link")
+
+  assert.ok(
+    await noNextAttributeMutationNamed(page, "html", "aria-busy"),
+    "never sets [aria-busy] on the document element"
+  )
+})
+
 test("test cache does not override response after redirect", async ({ page }) => {
   await page.evaluate(() => {
     const cachedElement = document.createElement("some-cached-element")

diff --git a/src/tests/helpers/page.ts b/src/tests/helpers/page.ts
@@ -98,6 +98,15 @@ export async function nextAttributeMutationNamed(
   return attributeValue
 }
 
+export async function noNextAttributeMutationNamed(
+  page: Page,
+  elementId: string,
+  attributeName: string
+): Promise<boolean> {
+  const records = await readMutationLogs(page, 1)
+  return !records.some(([name]) => name == attributeName)
+}
+
 export async function noNextEventNamed(page: Page, eventName: string): Promise<boolean> {
   const records = await readEventLogs(page, 1)
   return !records.some(([name]) => name == eventName)

diff --git a/src/tests/server.ts b/src/tests/server.ts
@@ -86,6 +86,17 @@ router.post("/messages", (request, response) => {
   }
 })
 
+router.get("/stream-response", (request, response) => {
+  const params = { ...request.body, ...request.query }
+  const { content, target, targets } = params
+  if (acceptsStreams(request)) {
+    response.type("text/vnd.turbo-stream.html; charset=utf-8")
+    response.send(targets ? renderMessageForTargets(content, targets) : renderMessage(content, target))
+  } else {
+    response.sendStatus(422)
+  }
+})
+
 router.put("/messages/:id", (request, response) => {
   const { content, type } = request.body
   const { id } = request.params