[Bug]: slotted labels not associated with input during hydration in fluent-field

[radium-v]

🐛 Bug Report

When a <fluent-field> is server-rendered and hydrated, its initial slotted label and input are not associated. The label remains without for or id, and the input remains without aria-labelledby.

💻 Repro or Code Sample

Server-render and hydrate this markup:

<fluent-field>
  <label slot="label">Label</label>
  <input id="input" slot="input" />
</fluent-field>

After hydration, inspect the slotted elements or assert:

await expect(label).toHaveAttribute("for", "input");
await expect(label).toHaveAttribute("id", "input--label");
await expect(input).toHaveAttribute("aria-labelledby", "input--label");

The failure reproduces in the chromium-ssr Playwright project.

🤔 Expected Behavior

Initial connection should associate the slotted label and input:

<label slot="label" for="input" id="input--label">Label</label>
<input id="input" slot="input" aria-labelledby="input--label" />

😯 Current Behavior

The association attributes remain unset after hydration:

Error: expect(locator).toHaveAttribute(expected) failed

Locator: locator('fluent-field').locator('label')
Expected: "input"
Received: ""

No component error is thrown, but clicking the label may not focus the input and assistive technology may not receive the label as the input's accessible name.

💁 Possible Solution

setLabelProperties() checks $fastController.isConnected. During hydration, the initial labelSlotChanged and inputChanged callbacks can run before the controller reports that it is connected. The method skips its work, and Field does not call it again after connection.

Remove the connection guard and add an SSR regression test for the generated association attributes. I am willing to contribute the fix and test.

As an alternative, authors can provide definite id and for attributes on their slotted label, and a matching aria-labelledby attribute on the slotted input. We should add tests for both scenarios.

🔦 Context

This affects server-rendered forms using the Fluent Field web component. Client-side rendering works, but hydration leaves the initial label and input without their expected accessibility association.

🌍 Your Environment

• OS & Device: macOS on Mac
• Browser: Chromium through Playwright's chromium-ssr project
• Version: @fluentui/web-components 3.1.2
• FAST Element: @microsoft/fast-element 3.0.2
• Node.js: 24.18.0