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

未关闭
  • 哪里不对？
#36,720 0 条评论 0 个 reaction 已指派 2 人 在 GitHub 查看

维护者通常 2 天内回复

@chrisdholt 已经在做这个了。

开始于 2026年9月15日。

评估

这个 Issue 还没有评估数据。

描述

Area: Accessibility Area: SSR Component: Field Fluent UI WC (v3) Type: Bug :bug: web-components

🐛 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
主要语言
TypeScript
星标
20.4k
派生
3k
平均合并
3 天 21 小时
30 天内合并 PR
99

环境准备

在 Codespaces 中打开

在浏览器里用你自己的 GitHub 账号启动这个项目的开发容器。

  • 没有 Dockerfile 或 Docker Compose 文件
  • 有 Pull Request 模板
  • 没有贡献指南

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

microsoft/fluentui 的其他 Issue

查看 microsoft/fluentui 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。