Skip to content

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

Open
@jaxuk

Description

@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.

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions