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.xAug 25, 2026
65 checks passed
@jasonvarga
jasonvarga deleted the switch-aria branch August 25, 2026 05:53
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant

@jasonvarga