Skip to content

Target a frame by id from outside it and add aria-busy during a swap #252

@vivek7405

Description

@vivek7405

Problem

webjs scopes a swap to a frame only when the trigger is physically nested inside it (closest-only activeFrameId, router-client.js:437-452): no external nav/sidebar link or filter form can drive a content frame by id, and there is no _top token to break a frame-internal link out to a full page. Separately, issues its fetch (router-client.js:1192) with zero busy signal (webjs-frame.js:53-59 is a bare anchor): no aria-busy, no CSS hook, no event, so a slow link leaves the frame stale with nothing assistive tech can announce.

Design / approach

Resolve a native data-webjs-frame attribute (incl. a reserved _top) via document.getElementById so external triggers drive a frame, and toggle the native aria-busy attribute on the frame around the fetch. Standard data-* attribute and ARIA, matching the existing data-prefetch convention.

Web-standards fit: Uses a standard data-* attribute, getElementById, and the native aria-busy attribute; no frame-targeting abstraction is added.

Prior art: Turbo data-turbo-frame (incl. _top) via getElementById; Turbo markAsBusy/clearBusyState and requestStarted/requestFinished aria-busy.

Acceptance criteria

  • A link/form outside a frame can drive it via data-webjs-frame=, and a reserved _top token breaks a frame-internal link out to a full-page nav
  • Targeting resolves via getElementById so the trigger need not be DOM-nested in the frame
  • The frame gets aria-busy (and a CSS hook/event) set during the fetch and cleared on completion
  • Browser/e2e tests cover external targeting, _top breakout, and the aria-busy toggle
  • Tests cover the new behaviour at the applicable layer(s)
  • Docs / AGENTS.md / CONVENTIONS.md updated if the public surface changed

Filed from the production-readiness audit (webjs vs Next.js / Remix / Rails / Turbo / Lit). Theme: frames. Priority: P2. Kept to webjs identity: no-build, progressive enhancement, web-components-first, AI-first, batteries-included, close to web standards.

Metadata

Metadata

Assignees

Labels

enhancementNew feature or request

Type

No type
No fields configured for issues without a type.

Projects

Status
Done

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions