aria-busy attribute is not being toggled after a Form Submit

[JuannFerrari]

Turbo version: 7.3.0

Description:

After a Form Submit, the progress bar is shown but the aria-busy attribute is not being toggled.

According to the Handbook, this should not happen:

In tandem with the progress bar, Turbo Drive will also toggle the [aria-busy] attribute on the page’s element during page navigations started from Visits or Form Submissions. Turbo Drive will set [aria-busy="true"] when the navigation begins and will remove the [aria-busy] attribute when the navigation completes.

Steps to reproduce: Make a GET form submission (like for filtering records) with Turbo Drive enabled.

Expected Behavior: .turbo-progress-bar element should be appended to the DOM and the aria-busy attribute on the page's element should be set to true

Actual Behavior: .turbo-progress-bar element is being appended but the aria-busy attribute is not being toggled

Proposed Solution: I checked this PR https://github.com/hotwired/turbo/pull/317 about how the progress bar is being handled for FormSubmissions and is different from the form submission method at frame_controller (because the aria-busy attribute is working for turbo frames)

  // Form submission delegate

  formSubmissionStarted({ formElement }: FormSubmission) {
    markAsBusy(formElement, this.findFrameElement(formElement))
  }

Should we call markAsBusy at browser_adapter#formSubmissionStarted to toggle the aria-busy attribute or I'm missing something?

[seanpdoyle]

@JuannFerrari thank you for opening this issue.

In an attempt to to reproduce the behavior you're describing here, I've added some additional coverage to the Form Submission test suite in https://github.com/hotwired/turbo/pull/955.

Unfortunately, the new assertions pass without any implementation-side changes. Are there any other details you could provide that might contribute to the unexpected behavior?

[JuannFerrari]

Hi @seanpdoyle thanks for your answer. I did the same and the assertions pass too... I don't know what's really happening :/. The stack that I'm using is Ruby on Rails 7 + turbo_rails gem and the form for filtering my records is provided by ransack + simpleform.

I have even tried writing a pure HTML form and it is not toggling the attribute either.

While I'm clicking on the form I can see via the browser's inspector how the .turbo-progress-bar is being appended but the aria-busy element is not being toggled, this happens only for forms. However, if the form is inside a turbo-frame the aria-busy toggles correctly.

The aria-busy toggles only if I click on a link. It is not working for my forms (outside a turbo frame)

[seanpdoyle]

@JuannFerrari https://github.com/hotwired/turbo/pull/955 has been merged. Is this behavior still occurring with the latest code on main?