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

.changeset/editable-input-label.md

@@ -0,0 +1,5 @@
+---
+"@zag-js/editable": patch
+---
+
+- Fix a rendered label not naming the editable input.

e2e/editable.e2e.ts

@@ -14,6 +14,11 @@ test.describe("editable", () => {
     await I.checkAccessibility()
   })
 
+  test("input should be named by the rendered label", async () => {
+    await I.focusPreview()
+    await I.seeInputHasAccessibleName("Display name")
+  })
+
   test("on focus, input should be visible and focus", async () => {
     await I.focusPreview()
     await I.seeInput()

e2e/models/editable.model.ts

@@ -76,6 +76,10 @@ export class EditableModel extends Model {
     return expect(this.input).toHaveValue(value)
   }
 
+  seeInputHasAccessibleName(name: string) {
+    return expect(this.input).toHaveAccessibleName(name)
+  }
+
   seePreviewHasText(text: string) {
     return expect(this.preview).toHaveText(text)
   }

examples/next-ts/pages/editable/basic.tsx

@@ -21,6 +21,7 @@ export default function Page() {
     <>
       <main className="editable">
         <div {...api.getRootProps()}>
+          <label {...api.getLabelProps()}>Display name</label>
           <div {...api.getAreaProps()}>
             <input data-testid="input" {...api.getInputProps()} />
             <span data-testid="preview" {...api.getPreviewProps()} />

examples/nuxt-ts/app/pages/editable/basic.vue

@@ -19,6 +19,7 @@ const api = computed(() => editable.connect(service, normalizeProps))
 <template>
   <main class="editable">
     <div v-bind="api.getRootProps()">
+      <label v-bind="api.getLabelProps()">Display name</label>
       <div v-bind="api.getAreaProps()">
         <input data-testid="input" v-bind="api.getInputProps()" />
         <span data-testid="preview" v-bind="api.getPreviewProps()" />

examples/preact-ts/src/pages/editable/basic.tsx

@@ -21,6 +21,7 @@ export default function Page() {
     <>
       <main className="editable">
         <div {...api.getRootProps()}>
+          <label {...api.getLabelProps()}>Display name</label>
           <div {...api.getAreaProps()}>
             <input data-testid="input" {...api.getInputProps()} />
             <span data-testid="preview" {...api.getPreviewProps()} />

examples/solid-ts/src/routes/editable/basic.tsx

@@ -23,6 +23,7 @@ export default function Page() {
     <>
       <main class="editable">
         <div {...api().getRootProps()}>
+          <label {...api().getLabelProps()}>Display name</label>
           <div {...api().getAreaProps()}>
             <input data-testid="input" {...api().getInputProps()} />
             <span data-testid="preview" {...api().getPreviewProps()} />

examples/svelte-ts/src/routes/editable/basic/+page.svelte

@@ -20,6 +20,7 @@
 
 <main class="editable">
   <div {...api.getRootProps()}>
+    <label {...api.getLabelProps()}>Display name</label>
     <div {...api.getAreaProps()}>
       <input data-testid="input" {...api.getInputProps()} />
       <span data-testid="preview" {...api.getPreviewProps()}>{api.valueText}</span>

packages/machines/editable/src/editable.connect.ts

@@ -103,6 +103,7 @@ export function connect<T extends PropTypes>(
         ...parts.input.attrs,
         dir: prop("dir"),
         "aria-label": translations?.input,
+        "aria-labelledby": dom.getLabelId(scope),
         name: prop("name"),
         form: prop("form"),
         id: dom.getInputId(scope),

website/data/components/editable.mdx

@@ -208,6 +208,25 @@ const service = useMachine(editable.machine, {
 })
 ```
 
+### Labeling the input
+
+Render the label part to name the input.
+
+```tsx
+<div {...api.getRootProps()}>
+  <label {...api.getLabelProps()}>Display name</label>
+  <div {...api.getAreaProps()}>
+    <input {...api.getInputProps()} />
+    <span {...api.getPreviewProps()} />
+  </div>
+</div>
+```
+
+Without a label, the input uses `translations.input` (default: "editable
+input"), since an `aria-labelledby` pointing to a missing element is
+[ignored](https://www.w3.org/TR/accname-1.2/#computation-steps). Set it to
+describe the value.
+
 ### Customizing accessibility labels
 
 Use `translations` to customize control labels.