From 1023fd90f1cd0cc59c5bf36974701203a5ab5b2c Mon Sep 17 00:00:00 2001
From: Vladimir Enchev <vladimir.enchev@gmail.com>
Date: Tue, 5 Dec 2023 15:27:41 +0200
Subject: [PATCH] Missing form label and orphaned label accessibility errors
 fixed

---
 Radzen.Blazor/RadzenDataGrid.razor           |  7 ++---
 Radzen.Blazor/RadzenDataGridHeaderCell.razor |  8 +++---
 Radzen.Blazor/RadzenDatePicker.razor         |  3 ++-
 Radzen.Blazor/RadzenDropDown.razor           | 28 ++++++++++----------
 Radzen.Blazor/RadzenDropDownDataGrid.razor   | 26 +++++++++---------
 Radzen.Blazor/RadzenNumeric.razor            |  3 ++-
 Radzen.Blazor/RadzenPager.razor              |  2 +-
 Radzen.Blazor/RadzenRadioButtonList.razor    |  2 +-
 Radzen.Blazor/RadzenTreeItem.razor           |  2 +-
 9 files changed, 43 insertions(+), 38 deletions(-)

diff --git a/Radzen.Blazor/RadzenDataGrid.razor b/Radzen.Blazor/RadzenDataGrid.razor
index 0953a2209e4..ca56f84b0f8 100644
--- a/Radzen.Blazor/RadzenDataGrid.razor
+++ b/Radzen.Blazor/RadzenDataGrid.razor
@@ -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)
@@ -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>
diff --git a/Radzen.Blazor/RadzenDataGridHeaderCell.razor b/Radzen.Blazor/RadzenDataGridHeaderCell.razor
index c1a552c7b82..32ab9be2833 100644
--- a/Radzen.Blazor/RadzenDataGridHeaderCell.razor
+++ b/Radzen.Blazor/RadzenDataGridHeaderCell.razor
@@ -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)
                                 {
@@ -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"
@@ -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>
                             }
diff --git a/Radzen.Blazor/RadzenDatePicker.razor b/Radzen.Blazor/RadzenDatePicker.razor
index 5a4fcff8400..e6add2abcbc 100644
--- a/Radzen.Blazor/RadzenDatePicker.razor
+++ b/Radzen.Blazor/RadzenDatePicker.razor
@@ -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">
diff --git a/Radzen.Blazor/RadzenDropDown.razor b/Radzen.Blazor/RadzenDropDown.razor
index 44af80699d7..c8b908eb64c 100644
--- a/Radzen.Blazor/RadzenDropDown.razor
+++ b/Radzen.Blazor/RadzenDropDown.razor
@@ -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)
         {
@@ -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)
@@ -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>
 
@@ -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">
diff --git a/Radzen.Blazor/RadzenDropDownDataGrid.razor b/Radzen.Blazor/RadzenDropDownDataGrid.razor
index 9832ef42590..df637233c35 100644
--- a/Radzen.Blazor/RadzenDropDownDataGrid.razor
+++ b/Radzen.Blazor/RadzenDropDownDataGrid.razor
@@ -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)
         {
@@ -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)
@@ -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">
diff --git a/Radzen.Blazor/RadzenNumeric.razor b/Radzen.Blazor/RadzenNumeric.razor
index e7b9f6aec6b..76bf80638ae 100644
--- a/Radzen.Blazor/RadzenNumeric.razor
+++ b/Radzen.Blazor/RadzenNumeric.razor
@@ -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()" />
diff --git a/Radzen.Blazor/RadzenPager.razor b/Radzen.Blazor/RadzenPager.razor
index 9ca0d0fed51..e8ef3879909 100644
--- a/Radzen.Blazor/RadzenPager.razor
+++ b/Radzen.Blazor/RadzenPager.razor
@@ -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">
diff --git a/Radzen.Blazor/RadzenRadioButtonList.razor b/Radzen.Blazor/RadzenRadioButtonList.razor
index 46ab4e8c156..3411a1e8efc 100644
--- a/Radzen.Blazor/RadzenRadioButtonList.razor
+++ b/Radzen.Blazor/RadzenRadioButtonList.razor
@@ -34,7 +34,7 @@
                 } 
                 else 
                 {
-                    <label class="rz-radiobutton-label">@((MarkupString)item.Text)</label>
+                    <span class="rz-radiobutton-label">@((MarkupString)item.Text)</span>
                 }
             </div>
         }
diff --git a/Radzen.Blazor/RadzenTreeItem.razor b/Radzen.Blazor/RadzenTreeItem.razor
index 5da9da26ada..bff8fbe4454 100644
--- a/Radzen.Blazor/RadzenTreeItem.razor
+++ b/Radzen.Blazor/RadzenTreeItem.razor
@@ -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)