starred/radzen-blazor
1
0
Fork 0
mirror of https://github.com/radzenhq/radzen-blazor.git synced 2026-07-08 18:16:08 +00:00
Code Issues 1.3k Packages Projects Releases 28 Wiki Activity

FormField: fix invalid/empty label for association

Browse Source 
RadzenFormField rendered for="@Component" on the wrapping <div> (invalid - <div>
does not take for) and on the label even when Component was unset, producing for=""
which accessibility checkers flag as a label with no association. Removed the div
for and only emit the label for when Component is set. Updated the FormFieldTextBox
demo to give each input an id matching the FormField Component so the label resolves.
This commit is contained in:
Vladimir Enchev
2026-07-02 11:57:46 +03:00
parent 26462e19d8
commit 6d66d0145f
2 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
Radzen.Blazor/RadzenFormField.razor
View File

@@ -3,7 +3,7 @@
@if (Visible) @if (Visible)
{ {
<div @ref="@Element" for="@Component" style="@Style" @attributes="Attributes" class="@GetCssClass()" id="@GetId()"> <div @ref="@Element" style="@Style" @attributes="Attributes" class="@GetCssClass()" id="@GetId()">
<div class="rz-form-field-content"> <div class="rz-form-field-content">
<CascadingValue Value=@context> <CascadingValue Value=@context>
@if (Start != null) @if (Start != null)
@@ -13,7 +13,7 @@
</div> </div>
} }
@ChildContent @ChildContent
<label class="rz-form-field-label rz-text-truncate" for=@Component> @if (TextTemplate is null) {@Text} else {@TextTemplate} </label> <label class="rz-form-field-label rz-text-truncate" for="@(string.IsNullOrEmpty(Component) ? null : Component)"> @if (TextTemplate is null) {@Text} else {@TextTemplate} </label>
@if (End != null) @if (End != null)
{ {
<div class="rz-form-field-end"> <div class="rz-form-field-end">

16
RadzenBlazorDemos/Pages/FormFieldTextBox.razor
View File

@@ -1,22 +1,22 @@
<RadzenRow AlignItems="AlignItems.End" Wrap="FlexWrap.Wrap" Gap="1rem" class="rz-p-sm-12"> <RadzenRow AlignItems="AlignItems.End" Wrap="FlexWrap.Wrap" Gap="1rem" class="rz-p-sm-12">
<RadzenColumn Size="12" SizeMD="6" SizeLG="3"> <RadzenColumn Size="12" SizeMD="6" SizeLG="3">
<RadzenFormField Text="Outlined/Default" Style="width: 100%;"> <RadzenFormField Text="Outlined/Default" Component="FormFieldTextBoxOutlined" Style="width: 100%;">
<RadzenTextBox @bind-Value="@value" /> <RadzenTextBox id="FormFieldTextBoxOutlined" @bind-Value="@value" />
</RadzenFormField> </RadzenFormField>
</RadzenColumn> </RadzenColumn>
<RadzenColumn Size="12" SizeMD="6" SizeLG="3"> <RadzenColumn Size="12" SizeMD="6" SizeLG="3">
<RadzenFormField Text="Text" Variant="Variant.Text" Style="width: 100%;"> <RadzenFormField Text="Text" Variant="Variant.Text" Component="FormFieldTextBoxText" Style="width: 100%;">
<RadzenTextBox @bind-Value="@value" /> <RadzenTextBox id="FormFieldTextBoxText" @bind-Value="@value" />
</RadzenFormField> </RadzenFormField>
</RadzenColumn> </RadzenColumn>
<RadzenColumn Size="12" SizeMD="6" SizeLG="3"> <RadzenColumn Size="12" SizeMD="6" SizeLG="3">
<RadzenFormField Text="Flat" Variant="Variant.Flat" Style="width: 100%;"> <RadzenFormField Text="Flat" Variant="Variant.Flat" Component="FormFieldTextBoxFlat" Style="width: 100%;">
<RadzenTextBox @bind-Value="@value" /> <RadzenTextBox id="FormFieldTextBoxFlat" @bind-Value="@value" />
</RadzenFormField> </RadzenFormField>
</RadzenColumn> </RadzenColumn>
<RadzenColumn Size="12" SizeMD="6" SizeLG="3"> <RadzenColumn Size="12" SizeMD="6" SizeLG="3">
<RadzenFormField Text="Filled" Variant="Variant.Filled" Style="width: 100%;"> <RadzenFormField Text="Filled" Variant="Variant.Filled" Component="FormFieldTextBoxFilled" Style="width: 100%;">
<RadzenTextBox @bind-Value="@value" /> <RadzenTextBox id="FormFieldTextBoxFilled" @bind-Value="@value" />
</RadzenFormField> </RadzenFormField>
</RadzenColumn> </RadzenColumn>
</RadzenRow> </RadzenRow>