Skip to content

Commit

Permalink
Missing form label and orphaned label accessibility errors fixed
Browse files Browse the repository at this point in the history
  • Loading branch information
@enchev
enchev committed Dec 5, 2023
1 parent 059a59c commit 1023fd9
Show file tree
Hide file tree
Showing 9 changed files with 43 additions and 38 deletions.
7 changes: 4 additions & 3 deletions Radzen.Blazor/RadzenDataGrid.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,7 @@
}
else
{
<label class="rz-cell-filter-label" style="height:35px; width:100%;" onclick="event.preventDefault()">
<span class="rz-cell-filter-label" style="height:35px; width:100%;" onclick="event.preventDefault()">
@if (PropertyAccess.IsDate(column.FilterPropertyType))
{
if (FilterMode == FilterMode.Simple)
Expand Down Expand Up @@ -310,13 +310,14 @@
{
<RadzenDataGridFilterMenu Grid="@this" Column="@column" />
}
<input disabled=@column.CanSetFilterValue() id="@(getFilterInputId(column))" @onchange="@((args) => OnFilter(args, column))" @onkeydown="@((args) => OnFilterKeyPress(args, column))" value="@column.GetFilterValue()" type="text" placeholder="@column.GetFilterPlaceholder()" class="rz-textbox" style="width: 100%;" />
<label class="rz-helper-hidden-accessible" style="position:absolute !important" id="@($"{getFilterInputId(column)}-sfl")" for="@($"{getFilterInputId(column)}")">filter</label>
<input aria-labelledby="@($"{getFilterInputId(column)}-sfl")" disabled=@column.CanSetFilterValue() id="@(getFilterInputId(column))" @onchange="@((args) => OnFilter(args, column))" @onkeydown="@((args) => OnFilterKeyPress(args, column))" value="@column.GetFilterValue()" type="text" placeholder="@column.GetFilterPlaceholder()" class="rz-textbox" style="width: 100%;" />
@if (column.GetFilterValue() != null && filters.Any(d => d.Property == column.GetFilterProperty()))
{
<i @onclick="@((args) => ClearFilter(column))" class="rzi rz-cell-filter-clear" style="position:absolute;right:10px;">close</i>
}
}
</label>
</span>
}
</div>
</div>
Expand Down
8 changes: 5 additions & 3 deletions Radzen.Blazor/RadzenDataGridHeaderCell.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@
else
{
<form id="@($"{getColumnPopupID()}-form")" @onsubmit="@(args => ApplyFilter())" class="rz-grid-filter">
<RadzenLabel Text="@Grid.FilterText" class="rz-grid-filter-label" />
<span class="rz-grid-filter-label">@Grid.FilterText</span>
<RadzenDropDown @onclick:preventDefault="true" Data="@(Column.GetFilterOperators().Select(t => new { Value = Column.GetFilterOperatorText(t), Key = t }))" TextProperty="Value" ValueProperty="Key" TValue="FilterOperator" Value="@Column.GetFilterOperator()" Change="@(args => Column.SetFilterOperator((FilterOperator)args))" />
@if (Column.FilterValueTemplate != null)
{
Expand Down Expand Up @@ -97,7 +97,8 @@
}
else
{
<RadzenTextBox Value="@($"{Column.GetFilterValue()}")" Change="@(args => Column.SetFilterValue(args))" />
<label class="rz-helper-hidden-accessible" style="position:absolute !important" id="@($"{getColumnPopupID()}-sfl")" for="@($"{getColumnPopupID()}-sf")">filter</label>
<RadzenTextBox id="@($"{getColumnPopupID()}-sf")" aria-labelledby="@($"{getColumnPopupID()}-sfl")" Value="@($"{Column.GetFilterValue()}")" Change="@(args => Column.SetFilterValue(args))" />
}

<RadzenDropDown @onclick:preventDefault="true" TextProperty="Text" ValueProperty="Value" Style="width: 90px"
Expand Down Expand Up @@ -131,7 +132,8 @@
}
else
{
<RadzenTextBox Value="@($"{Column.GetSecondFilterValue()}")" Change="@(args => Column.SetFilterValue(args, false))" />
<label class="rz-helper-hidden-accessible" style="position:absolute !important" id="@($"{getColumnPopupID()}-sfl2")" for="@($"{getColumnPopupID()}-sf2")">filter</label>
<RadzenTextBox id="@($"{getColumnPopupID()}-sf2")" aria-labelledby="@($"{getColumnPopupID()}-sfl2")" Value="@($"{Column.GetSecondFilterValue()}")" Change="@(args => Column.SetFilterValue(args, false))" />
}
</form>
}
Expand Down
3 changes: 2 additions & 1 deletion Radzen.Blazor/RadzenDatePicker.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,10 @@
@if (!Inline)
{
<span class="@($"rz-calendar rz-calendar-w-btn{(Disabled ? " rz-state-disabled" : "")}")" style="width:100%">
<label class="rz-helper-hidden-accessible" style="position:absolute !important" id="@($"{Name}-lbl")" for="@($"{(Name ?? UniqueID + "input")}")">value</label>
<input @ref="@input" @attributes="InputAttributes" disabled="@Disabled" readonly="@IsReadonly" value="@FormattedValue" tabindex="@(Disabled ? "-1" : $"{TabIndex}")"
@onchange="@ParseDate" autocomplete="off" type="text" name="@Name"
class="rz-inputtext @InputClass @(IsReadonly ? "rz-readonly" : "")" id="@Name" placeholder="@Placeholder" onclick="@getOpenPopupForInput()"/>
class="rz-inputtext @InputClass @(IsReadonly ? "rz-readonly" : "")" id="@(Name ?? UniqueID + "input")" placeholder="@Placeholder" onclick="@getOpenPopupForInput()"/>
@if (ShowButton)
{
<button @onmousedown=@OnToggle onclick="@getOpenPopup()" class="@($"rz-datepicker-trigger rz-calendar-button rz-button rz-button-icon-only{(Disabled ? " rz-state-disabled" : "")}")" tabindex="-1" type="button">
Expand Down
28 changes: 14 additions & 14 deletions Radzen.Blazor/RadzenDropDown.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,21 +19,21 @@

@if (ValueTemplate != null && selectedItem != null)
{
<label class="rz-dropdown-label rz-inputtext " style="width:100%;">
<span class="rz-dropdown-label rz-inputtext" style="width:100%;">
@ValueTemplate(selectedItem)
</label>
</span>
}
else if (Template != null && selectedItem != null)
{
<label class="rz-dropdown-label rz-inputtext ">
<span class="rz-dropdown-label rz-inputtext">
@Template(selectedItem)
</label>
</span>
}
else if (selectedItem != null && !Multiple)
{
<label class="rz-dropdown-label rz-inputtext ">
<span class="rz-dropdown-label rz-inputtext">
@GetItemOrValueFromProperty(selectedItem, TextProperty)
</label>
</span>
}
else if (Chips && selectedItems.Count > 0 && selectedItems.Count < MaxSelectedLabels)
{
Expand All @@ -58,7 +58,7 @@
}
else if (selectedItems.Count > 0)
{
<label class="rz-dropdown-label rz-inputtext ">
<span class="rz-dropdown-label rz-inputtext">
@if (selectedItems.Count < MaxSelectedLabels)
{
@if (Template == null)
Expand All @@ -79,22 +79,22 @@
{
@($"{selectedItems.Count} {SelectedItemsText}")
}
</label>
</span>
}
else if (!string.IsNullOrEmpty(Placeholder))
{
<label class="rz-dropdown-label rz-inputtext rz-placeholder">
<span class="rz-dropdown-label rz-inputtext rz-placeholder">
@Placeholder
</label>
</span>
}
else
{
<label class="rz-dropdown-label rz-inputtext ">
<span class="rz-dropdown-label rz-inputtext">
&nbsp;
</label>
</span>
}

<div class="rz-dropdown-trigger rz-corner-right">
<div class="rz-dropdown-trigger rz-corner-right">
<span class="rz-dropdown-trigger-icon rzi rzi-chevron-down"></span>
</div>

Expand All @@ -111,7 +111,7 @@
}
@if (Multiple && (AllowSelectAll || AllowFiltering))
{
<div class=" rz-multiselect-header rz-helper-clearfix" @onclick:preventDefault>
<div class="rz-multiselect-header rz-helper-clearfix" @onclick:preventDefault>
@if(AllowSelectAll)
{
<div class="rz-chkbox" title="@(!AllowFiltering ? "" : SelectAllText)" @onclick="@SelectAll">
Expand Down
26 changes: 13 additions & 13 deletions Radzen.Blazor/RadzenDropDownDataGrid.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,21 +20,21 @@

@if (ValueTemplate != null && selectedItem != null)
{
<label class="rz-dropdown-label rz-inputtext " style="width:100%;">
<span class="rz-dropdown-label rz-inputtext" style="width:100%;">
@ValueTemplate(selectedItem)
</label>
</span>
}
else if (Template != null && selectedItem != null)
{
<label class="rz-dropdown-label rz-inputtext " style="width:100%;">
<span class="rz-dropdown-label rz-inputtext" style="width:100%;">
@Template(selectedItem)
</label>
</span>
}
else if (selectedItem != null && !Multiple)
{
<label class="rz-dropdown-label rz-inputtext " style="width:100%;">
<span class="rz-dropdown-label rz-inputtext" style="width:100%;">
@PropertyAccess.GetItemOrValueFromProperty(selectedItem, TextProperty)
</label>
</span>
}
else if ((selectedItems.Count > 0 || SelectedValue is IEnumerable && !(SelectedValue is string)) && Multiple)
{
Expand Down Expand Up @@ -62,7 +62,7 @@
}
else
{
<label class="rz-dropdown-label rz-inputtext " style="width:100%;">
<label class="rz-dropdown-label rz-inputtext" style="width:100%;">
@if (itemsToUse.Count < MaxSelectedLabels)
{
@if (Template == null)
Expand All @@ -87,21 +87,21 @@
}
else if (SelectedValue != null && !(SelectedValue is IEnumerable && !(SelectedValue is string)))
{
<label class="rz-dropdown-label rz-inputtext rz-corner-all" style="width:100%;">
<span class="rz-dropdown-label rz-inputtext rz-corner-all" style="width:100%;">
@PropertyAccess.GetItemOrValueFromProperty(SelectedValue, TextProperty)
</label>
</span>
}
else if (!string.IsNullOrEmpty(Placeholder))
{
<label class="rz-dropdown-label rz-inputtext rz-placeholder" style="width:100%;">
<span class="rz-dropdown-label rz-inputtext rz-placeholder" style="width:100%;">
@Placeholder
</label>
</span>
}
else
{
<label class="rz-dropdown-label rz-inputtext " style="width:100%">
<span class="rz-dropdown-label rz-inputtext" style="width:100%">
&nbsp;
</label>
</span>
}

<div class="rz-dropdown-trigger rz-corner-right">
Expand Down
3 changes: 2 additions & 1 deletion Radzen.Blazor/RadzenNumeric.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,9 @@
@if (Visible)
{
<span @ref="@Element" style="@Style" @attributes="Attributes" class="@GetCssClass()" id="@GetId()">
<label class="rz-helper-hidden-accessible" style="position:absolute !important" id="@($"{Name}-lbl")" for="@($"{(Name ?? UniqueID + "input")}")">value</label>
<input @ref="@input" @attributes="InputAttributes" type="text" inputmode="decimal" name="@Name" disabled="@Disabled" readonly="@ReadOnly"
class="@GetInputCssClass()" tabindex="@(Disabled ? "-1" : $"{TabIndex}")"
class="@GetInputCssClass()" tabindex="@(Disabled ? "-1" : $"{TabIndex}")" id="@(Name ?? UniqueID + "input")"
placeholder="@CurrentPlaceholder" autocomplete="@AutoCompleteAttribute" value="@FormattedValue" @onchange="@OnChange"
onkeypress="Radzen.numericKeyPress(event, @IsInteger().ToString().ToLower())"
onblur="@getOnInput()" onpaste="@getOnPaste()" />
Expand Down
2 changes: 1 addition & 1 deletion Radzen.Blazor/RadzenPager.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<div @ref="@Element" @attributes="Attributes" class="@GetCssClass()" style="@Style" id="@GetId()">
@if(ShowPagingSummary)
{
<label class="rz-paginator-summary">@((MarkupString)string.Format(PagingSummaryFormat, CurrentPage + 1, numberOfPages, Count))</label>
<span class="rz-paginator-summary">@((MarkupString)string.Format(PagingSummaryFormat, CurrentPage + 1, numberOfPages, Count))</span>
}

<a class="rz-paginator-first rz-paginator-element @((skip > 0) ? "": "rz-state-disabled")" href="javascript:void(0)" tabindex="-1" @onclick:preventDefault="true" @onclick="@(() => FirstPage())" aria-label="@FirstPageAriaLabel" title="@FirstPageTitle">
Expand Down
2 changes: 1 addition & 1 deletion Radzen.Blazor/RadzenRadioButtonList.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
}
else
{
<label class="rz-radiobutton-label">@((MarkupString)item.Text)</label>
<span class="rz-radiobutton-label">@((MarkupString)item.Text)</span>
}
</div>
}
Expand Down
2 changes: 1 addition & 1 deletion Radzen.Blazor/RadzenTreeItem.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
<div class="rz-treenode-label">@Template(this)</div>
} else
{
<label for="@(GetHashCode())" class="rz-treenode-label">@Text</label>
<span for="@(GetHashCode())" class="rz-treenode-label">@Text</span>
}
</div>
@if (ChildContent != null && expanded)
Expand Down

0 comments on commit 1023fd9

Please sign in to comment.