aria-busy state cleared to early from turbo frame, leads to accessibility issues.

[jaxuk]

Hi all,

It appears that the aria-busy="true" is removed from the turbo-frame after the fetch request has been completed. I believe this should be changed and only removed after everything hooked into the event turbo:before-frame-render has also completed. Currently with the frame is being made no longer busy, before code in the turbo:before-frame-render is executed and could lead to accessibility issues.

We ran into this because have been using the aria-busy attribute of turbo-frame elements to conditionally style a turbo frame as "busy".

Very simple example to illustrate:

turbo-frame[aria-busy="true"]{
  opacity: 0.5;
}

We are also hooking into turbo events such as turbo:before-frame-render to perform some custom rendering using selectize.js to render our select boxes correctly. We started to notice on frames with a lot of select elements and select > option elements that the styling of the "busy" frame would disappear before our selects where styled correctly or indeed accessible.

I am aware of the complete attribute but purposefully avoided usage of this attribute as we wanted to follow accessibility standards and style the UI accordingly.

[syphax-bouazzouni]

I confirm this behavior. Below is a video showing the delay between the busy attribute being removed and the actual end of the rendering. is there any workaround to this?

Screencast.from.2024-09-04.12-00-30.webm