Skip to content

Commit

Permalink
Toggle [aria-busy] instead of [busy]
Browse files Browse the repository at this point in the history
Since `<turbo-frame>` elements are custom elements, the framework has
total control over the names of the attributes.

There are existing semantics for what we've introduced as `[busy]`: the
ARIA guidelines suggest toggling [aria-busy="true"][aria-busy] when an
element is loading more content, and `aria-busy="false"` when the
content is loaded.

This provides an "interface" for loading styles through CSS attribute
selectors, and hints to assistive technologies the state of the frame.

As an alternative, we could continue to toggle the `[busy]` attribute,
and encourage consumer applications to monitor mutations to the `[busy]`
attribute (or listen to [`turbo:frame-visit` and `turbo:frame-load`
events][events]) to toggle it themselves.

[aria-busy]: https://www.w3.org/TR/wai-aria-1.1/#aria-busy
[events]: #59
  • Loading branch information
seanpdoyle committed Feb 4, 2021
1 parent 57a118e commit 0c2bd14
Showing 1 changed file with 10 additions and 4 deletions.
14 changes: 10 additions & 4 deletions src/core/frames/frame_controller.ts
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,7 @@ export class FrameController implements AppearanceObserverDelegate, FetchRequest
}

requestStarted(request: FetchRequest) {
this.element.setAttribute("busy", "")
this.element.setAttribute("aria-busy", "true")
}

requestPreventedHandlingResponse(request: FetchRequest, response: FetchResponse) {
Expand All @@ -152,13 +152,16 @@ export class FrameController implements AppearanceObserverDelegate, FetchRequest
}

requestFinished(request: FetchRequest) {
this.element.removeAttribute("busy")
this.element.removeAttribute("aria-busy")
}

// Form submission delegate

formSubmissionStarted(formSubmission: FormSubmission) {

const frame = this.findFrameElement(formSubmission.formElement)
if (frame) {
frame.setAttribute("aria-busy", "")
}
}

formSubmissionSucceededWithResponse(formSubmission: FormSubmission, response: FetchResponse) {
Expand All @@ -175,7 +178,10 @@ export class FrameController implements AppearanceObserverDelegate, FetchRequest
}

formSubmissionFinished(formSubmission: FormSubmission) {

const frame = this.findFrameElement(formSubmission.formElement)
if (frame) {
frame.removeAttribute("aria-busy")
}
}

// View delegate
Expand Down

0 comments on commit 0c2bd14

Please sign in to comment.