Skip to content

fix(editable): let a rendered label name the input - #3498

Merged
segunadebayo merged 6 commits into
chakra-ui:mainfrom
jsabutis:fix/editable-input-label
Oct 21, 2026
Merged

segunadebayo merged 6 commits into
chakra-ui:mainfrom
jsabutis:fix/editable-input-label

Conversation

@jsabutis

Copy link
Copy Markdown
Contributor

Closes #3495

Description

The editable input always set aria-label from the translations, which default to "editable input". aria-label beats a native <label> in accessible name computation, so a rendered Label part never named the input.

Current behavior

With a Label rendered, the input is announced as "editable input".

New behavior

  • The machine checks once after mount whether the label is rendered, like dialog does for its title.
  • The default aria-label only applies when no label is rendered. An explicit translations.input still wins.
  • The basic examples now render a label, and a new e2e test checks the input is named by it. It fails before the fix and passes after.
  • Added a patch changeset for @zag-js/editable.

Is this a breaking change (Yes/No):

No

Additional Information

Editable e2e tests pass on React (12 of 12). Editable typecheck and lint pass.

The input always set aria-label from the translations, which default to
"editable input". aria-label takes precedence over a native label in
accessible name computation, so a rendered Label part was ignored and
the input was announced as "editable input".

Track whether the label is rendered and only fall back to the default
aria-label when it is not. An explicit translations.input still wins.

Fixes chakra-ui#3495

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@changeset-bot

changeset-bot Bot commented Oct 19, 2026 •

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: f487cbb

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 85 packages
Name Type
@zag-js/editable Patch
@zag-js/anatomy-icons Patch
@zag-js/anatomy Patch
@zag-js/core Patch
@zag-js/docs Patch
@zag-js/preact Patch
@zag-js/react Patch
@zag-js/solid Patch
@zag-js/svelte Patch
@zag-js/vanilla Patch
@zag-js/vue Patch
@zag-js/accordion Patch
@zag-js/angle-slider Patch
@zag-js/async-list Patch
@zag-js/avatar Patch
@zag-js/carousel Patch
@zag-js/cascade-select Patch
@zag-js/checkbox Patch
@zag-js/clipboard Patch
@zag-js/collapsible Patch
@zag-js/color-picker Patch
@zag-js/combobox Patch
@zag-js/date-input Patch
@zag-js/date-picker Patch
@zag-js/dialog Patch
@zag-js/drawer Patch
@zag-js/file-upload Patch
@zag-js/floating-panel Patch
@zag-js/hover-card Patch
@zag-js/image-cropper Patch
@zag-js/listbox Patch
@zag-js/marquee Patch
@zag-js/menu Patch
@zag-js/navigation-menu Patch
@zag-js/number-input Patch
@zag-js/pagination Patch
@zag-js/password-input Patch
@zag-js/pin-input Patch
@zag-js/popover Patch
@zag-js/presence Patch
@zag-js/progress Patch
@zag-js/qr-code Patch
@zag-js/radio-group Patch
@zag-js/rating-group Patch
@zag-js/scroll-area Patch
@zag-js/select Patch
@zag-js/signature-pad Patch
@zag-js/slider Patch
@zag-js/splitter Patch
@zag-js/steps Patch
@zag-js/switch Patch
@zag-js/tabs Patch
@zag-js/tags-input Patch
@zag-js/timer Patch
@zag-js/toast Patch
@zag-js/toc Patch
@zag-js/toggle-group Patch
@zag-js/toggle Patch
@zag-js/tooltip Patch
@zag-js/tour Patch
@zag-js/tree-view Patch
@zag-js/store Patch
@zag-js/types Patch
@zag-js/aria-hidden Patch
@zag-js/auto-resize Patch
@zag-js/collection Patch
@zag-js/color-utils Patch
@zag-js/utils Patch
@zag-js/date-utils Patch
@zag-js/dismissable Patch
@zag-js/dom-query Patch
@zag-js/file-utils Patch
@zag-js/focus-trap Patch
@zag-js/focus-visible Patch
@zag-js/highlight-word Patch
@zag-js/hotkeys Patch
@zag-js/i18n-utils Patch
@zag-js/interact-outside Patch
@zag-js/json-tree-utils Patch
@zag-js/live-region Patch
@zag-js/popper Patch
@zag-js/rect-utils Patch
@zag-js/remove-scroll Patch
@zag-js/scroll-snap Patch
@zag-js/stringify-state Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@vercel

vercel Bot commented Oct 19, 2026 •

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
zag-nextjs Ready Ready Preview Oct 21, 2026 1:29pm UTC
zag-solid Ready Ready Preview Oct 21, 2026 1:29pm UTC
zag-svelte Ready Ready Preview Oct 21, 2026 1:29pm UTC
zag-vue Ready Ready Preview Oct 21, 2026 1:29pm UTC
zag-website Ready Ready Preview Oct 21, 2026 1:29pm UTC

Request Review

This branch was successfully deployed

5 active deployments
Preview – zag-solid — f487cbb7 Deployed Oct 21, 2026 by vercel[bot]
Preview – zag-website — f487cbb7 Deployed Oct 21, 2026 by vercel[bot]
Preview – zag-svelte — f487cbb7 Deployed Oct 21, 2026 by vercel[bot]
Preview – zag-vue — f487cbb7 Deployed Oct 21, 2026 by vercel[bot]
Preview – zag-nextjs — f487cbb7 Deployed Oct 21, 2026 by vercel[bot]
Sign up for free to 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.

Editable: the input is named "editable input" instead of its rendered label

2 participants