[dev-v5] FluentTextInput - Add aria-label support using FluentField - #5071
Merged
Denis Voituron (dvoituron) merged 6 commits intoAug 3, 2026
Merged
Conversation
|
✅ All tests passed successfully Details on your Workflow / Core Tests page. |
Summary - Unit Tests Code CoverageSummary
CoverageMicrosoft.FluentUI.AspNetCore.Components - 98.8%
Microsoft.FluentUI.AspNetCore.Components.Charts - 100%
|
Contributor
There was a problem hiding this comment.
Pull request overview
This PR addresses an accessibility gap in v5 input components when wrapped by FluentField: the visible <label> targets the host web component, but the focusable control lives inside the component’s shadow DOM and therefore doesn’t receive an accessible name. The change applies a plain-text aria-label to the shadow .control element via JS interop and adds a unit test assertion for the JS call.
Changes:
- Add
OnAfterRenderAsynclogic inFluentFieldto copy the field label (plus localized “Required” suffix) to the wrapped input’s shadow DOM.controlasaria-label. - Introduce guarded
IJSRuntimeextension methods that swallow disconnection/cancellation/unavailable-runtime exceptions. - Add a bUnit test asserting the
copyToShadow(..., "aria-label", ...)JS interop invocation forFluentTextInput.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| tests/Core/Components/TextInput/FluentTextInputTests.razor | Adds a JSInterop assertion test for copying the accessible name to the internal control. |
| src/Core/Extensions/JSRuntimeExtensions.cs | Adds guarded JSRuntime extension helpers for safe interop calls during lifecycle transitions. |
| src/Core/Components/Field/FluentField.razor.cs | Applies the field label (and required suffix) to wrapped input shadow DOM as aria-label after render. |
…NumberInput for improved accessibility
Denis Voituron (dvoituron)
marked this pull request as ready for review
August 3, 2026 16:04
Denis Voituron (dvoituron)
requested a review
from Vincent Baaij (vnbaaij)
as a code owner
August 3, 2026 16:04
Denis Voituron (dvoituron)
enabled auto-merge (squash)
August 3, 2026 16:33
Vincent Baaij (vnbaaij)
approved these changes
Aug 3, 2026
Denis Voituron (dvoituron)
deleted the
users/dvoituron/dev-v5/update-textinput-arialabel
branch
August 3, 2026 18:30
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
[dev-v5]
FluentTextInput- Add aria-label support using FluentFieldFixes #4980 (TextInput, TextArea, Number).
Input controls wrapped by
FluentFielddid not expose an accessible name because the external label targets the web-component host, while the focusable control lives inside its shadow DOM.I intentionally did not use the web component’s label slot.
FluentFieldprovides additional layout features such as label positioning, width, alignment behavior. Moving the label into the web component would bypass or complicate those features.FluentField..controlelement as anaria-label.LabelTemplateandLabelInfoare not used to generate the accessible name because they cannot reliably be converted to plain text.Before
After
Unit Tests
Updated