Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

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

Đang mở
  • Có gì không ổn?
#36,720 0 bình luận 0 reaction 2 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

@chrisdholt đang làm issue này rồi.

Từ ngày 15/9/2026.

Đánh giá

Issue này chưa được đánh giá.

Mô tả

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
Ngôn ngữ chính
TypeScript
Star
20.3k
Fork
2.9k
Merge trung bình
2 ngày 10 giờ
Pull request đã merge (30 ngày)
72

Chuẩn bị môi trường

Mở trong Codespaces

Khởi chạy dev container của dự án ngay trên trình duyệt, bằng tài khoản GitHub của bạn.

  • Không có Dockerfile hay tệp Docker Compose
  • Có mẫu pull request
  • Không có hướng dẫn đóng góp

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của microsoft/fluentui

Tất cả issue của microsoft/fluentui

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.