Skip to content

[6.x] Avoid layout thrashing from Reka's aria-label fallback - #15264

Merged
jasonvarga merged 1 commit into
6.xfrom
switch-aria
Aug 25, 2026
Merged

[6.x] Avoid layout thrashing from Reka's aria-label fallback#15264
jasonvarga merged 1 commit into
6.xfrom
switch-aria

Conversation

@jasonvarga

Copy link
Copy Markdown
Member

Reka UI's SwitchRoot and CheckboxRoot compute a fallback aria-label via document.querySelector('[for="<id>"]').innerText, on mount and again whenever their id changes. innerText forces a full synchronous layout, so on large publish forms this runs once per toggle.

On a 105-set Bard entry that was ~10.5s of the page load, and ~21s when pressing Enter near the top of the Bard field — inserting a node renumbers every following set, which changes every nested field's id.

Reka skips that computed when a truthy aria-label attribute is supplied, so we now pass the real accessible name ourselves:

  • The Toggle fieldtype passes __(config.display), the same text as its <label for>.
  • Checkbox/Item.vue passes label || value when no custom slot is rendered.

Measured on the same entry: Enter-at-start 21s → 1.1s, page-load innerText cost 10.5s → 0.

Radio is intentionally not covered here: Reka's Radio overrides a caller-supplied aria-label, so it needs an upstream fix.

@jasonvarga
jasonvarga merged commit ebbae12 into 6.x Aug 25, 2026
65 checks passed
@jasonvarga
jasonvarga deleted the switch-aria branch August 25, 2026 05:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

1 participant