various accessibility errors fixed

radzenhq · Dec 6, 2023 · 0c34028 · 0c34028
1 parent e60d681
commit 0c34028
Show file tree

Hide file tree

Showing 42 changed files with 81 additions and 56 deletions.
diff --git a/Radzen.Blazor/RadzenAutoComplete.razor.cs b/Radzen.Blazor/RadzenAutoComplete.razor.cs
@@ -27,6 +27,7 @@ public partial class RadzenAutoComplete : DataBoundFormComponent<string>
         /// Specifies additional custom attributes that will be rendered by the input.
         /// </summary>
         /// <value>The attributes.</value>
+        [Parameter]
         public IReadOnlyDictionary<string, object> InputAttributes { get; set; }
 
         /// <summary>

diff --git a/Radzen.Blazor/RadzenDataGrid.razor b/Radzen.Blazor/RadzenDataGrid.razor
@@ -258,7 +258,7 @@
                                                                                 </div>
                                                                             </div>
 
-                                                                            <RadzenDatePicker TValue="@object" AllowInput=@(AllowFilterDateInput)
+                                                                            <RadzenDatePicker TValue="@object" AllowInput=@(AllowFilterDateInput) InputAttributes="@(new Dictionary<string,object>(){ { "aria-label", "filter value" }})"
                                                                   ShowTime="@column.ShowTimeForDateTimeFilter()" ShowTimeOkButton="false" Inline="true" DateFormat="@getFilterDateFormat(column)"
                                                                   Value="@column.GetFilterValue()" Change="@(args => { column.SetFilterValue(args.Value); SaveSettings(); })" />
 
@@ -278,7 +278,7 @@
                                                             else
                                                             {
                                                                 <RadzenDataGridFilterMenu Grid="@this" Column="@column" />
-                                                                <RadzenDatePicker Disabled=@column.CanSetFilterValue() TValue="@object" Style="width:100%" AllowInput=@(AllowFilterDateInput) AllowClear="true"
+                                                                <RadzenDatePicker Disabled=@column.CanSetFilterValue() TValue="@object" Style="width:100%" AllowInput=@(AllowFilterDateInput) AllowClear="true" InputAttributes="@(new Dictionary<string,object>(){ { "aria-label", "filter value" }})"
                                                       ShowTime="false" ShowTimeOkButton="false" DateFormat="@getFilterDateFormat(column)"
                                                       Value="@column.GetFilterValue()" Change="@(args => { if(!args.HasValue) { InvokeAsync(() => ClearFilter(column, true)); } else {column.SetFilterValue(args.Value); InvokeAsync(() => ApplyFilter(column, true));} })" />
                                                             }
@@ -310,8 +310,7 @@
                                                             {
                                                                 <RadzenDataGridFilterMenu Grid="@this" Column="@column" />
                                                             }
-                                                            <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%;" />
+                                                            <input aria-label="filter" 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>

diff --git a/Radzen.Blazor/RadzenDataGridHeaderCell.razor b/Radzen.Blazor/RadzenDataGridHeaderCell.razor
@@ -87,7 +87,7 @@
                                 }
                                 else if (PropertyAccess.IsDate(Column.FilterPropertyType))
                                 {
-                                    <RadzenDatePicker TValue="@object" ShowTime="@Column.ShowTimeForDateTimeFilter()" ShowTimeOkButton="true" DateFormat="@Grid.getFilterDateFormat(Column)"
+                                    <RadzenDatePicker InputAttributes="@(new Dictionary<string,object>(){ { "aria-label", "filter value" }})" TValue="@object" ShowTime="@Column.ShowTimeForDateTimeFilter()" ShowTimeOkButton="true" DateFormat="@Grid.getFilterDateFormat(Column)"
                                                       Value="@Column.GetFilterValue()" Change="@(args => Column.SetFilterValue(args.Value))" AllowInput=@(Grid.AllowFilterDateInput) />
 
                                 }
@@ -97,8 +97,7 @@
                                 }
                                 else
                                 {
-                                    <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))" />
+                                    <RadzenTextBox id="@($"{getColumnPopupID()}-sf")" aria-label="filter" Value="@($"{Column.GetFilterValue()}")" Change="@(args => Column.SetFilterValue(args))" />
                                 }
 
                                 <RadzenDropDown @onclick:preventDefault="true" TextProperty="Text" ValueProperty="Value" Style="width: 90px"
@@ -121,7 +120,7 @@
                                 }
                                 else if (PropertyAccess.IsDate(Column.FilterPropertyType))
                                 {
-                                    <RadzenDatePicker TValue="@object"
+                                    <RadzenDatePicker TValue="@object" InputAttributes="@(new Dictionary<string,object>(){ { "aria-label", "second filter value" }})"
                                                 ShowTime="@Column.ShowTimeForDateTimeFilter()" ShowTimeOkButton="true" DateFormat="@Grid.getFilterDateFormat(Column)"
                                                       Value="@Column.GetSecondFilterValue()" Change="@(args => Column.SetFilterValue(args.Value, false))" AllowInput=@(Grid.AllowFilterDateInput) />
 
@@ -132,8 +131,7 @@
                                 }
                                 else
                                 {
-                                    <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))" />
+                                    <RadzenTextBox id="@($"{getColumnPopupID()}-sf2")" aria-label="filter" Value="@($"{Column.GetSecondFilterValue()}")" Change="@(args => Column.SetFilterValue(args, false))" />
                                 }
                                 </form>
                             }

diff --git a/Radzen.Blazor/RadzenDatePicker.razor b/Radzen.Blazor/RadzenDatePicker.razor
@@ -103,23 +103,20 @@
                 @if (ShowTime)
                 {
                 <div class="rz-timepicker" @onmousedown:stopPropagation>
-                        <label class="rz-helper-hidden-accessible" style="position:absolute !important" id="@($"{UniqueID}-hl")" for="@($"{UniqueID}-h")">hour</label>
-                        <RadzenNumeric TValue="int" Disabled="@Disabled" Value="@(HourFormat == "12" ? ((CurrentDate.Hour + 11) % 12) + 1 : CurrentDate.Hour)" 
+                        <RadzenNumeric InputAttributes="@(new Dictionary<string,object>(){ { "aria-label", "hour" }})" TValue="int" Disabled="@Disabled" Value="@(HourFormat == "12" ? ((CurrentDate.Hour + 11) % 12) + 1 : CurrentDate.Hour)" 
                            Min="@(HourFormat == "12" ? 1 : -1)" Max="@(HourFormat == "12" ? 12 : 24)" TValue="double" Step="@HoursStep"
                            Change="@UpdateHour" class="rz-hour-picker" @oninput=@OnUpdateHourInput Format="@(PadHours ? "00" : "")" Name="@($"{UniqueID}-h")" />
                         <div class="rz-separator">
                             <span>:</span>
                         </div>
-                        <label class="rz-helper-hidden-accessible" style="position:absolute !important" id="@($"{UniqueID}-ml")" for="@($"{UniqueID}-m")">minutes</label>
-                        <RadzenNumeric TValue="int" Disabled="@Disabled" Value="CurrentDate.Minute" TValue="double" Step="@MinutesStep" Min="0" Max="59"
+                        <RadzenNumeric InputAttributes="@(new Dictionary<string,object>(){ { "aria-label", "minutes" }})" TValue="int" Disabled="@Disabled" Value="CurrentDate.Minute" TValue="double" Step="@MinutesStep" Min="0" Max="59"
                            Change="@UpdateMinutes" class="rz-minute-picker" @oninput=@OnUpdateHourMinutes Format="@(PadMinutes ? "00" : "")" Name="@($"{UniqueID}-m")"/>
                         @if (ShowSeconds)
                         {
                             <div class="rz-separator">
                                 <span>:</span>
                             </div>
-                            <label class="rz-helper-hidden-accessible" style="position:absolute !important" id="@($"{UniqueID}-sl")" for="@($"{UniqueID}-s")">seconds</label>
-                            <RadzenNumeric TValue="int" Disabled="@Disabled" Value="CurrentDate.Second" TValue="double" Step="@SecondsStep" Min="0" Max="59"
+                            <RadzenNumeric InputAttributes="@(new Dictionary<string,object>(){ { "aria-label", "seconds" }})" TValue="int" Disabled="@Disabled" Value="CurrentDate.Second" TValue="double" Step="@SecondsStep" Min="0" Max="59"
                                Change="@UpdateSeconds" class="rz-second-picker" @oninput=@OnUpdateHourSeconds Format="@(PadSeconds ? "00" : "")" Name="@($"{UniqueID}-s")"/>
                         }
                         @if (HourFormat == "12")

diff --git a/Radzen.Blazor/RadzenDatePicker.razor.cs b/Radzen.Blazor/RadzenDatePicker.razor.cs
@@ -48,6 +48,7 @@ public partial class RadzenDatePicker<TValue> : RadzenComponent, IRadzenFormComp
         /// Specifies additional custom attributes that will be rendered by the input.
         /// </summary>
         /// <value>The attributes.</value>
+        [Parameter]
         public IReadOnlyDictionary<string, object> InputAttributes { get; set; }
 
         RadzenDropDown<int> monthDropDown;

diff --git a/Radzen.Blazor/RadzenDropDown.razor b/Radzen.Blazor/RadzenDropDown.razor
@@ -103,8 +103,7 @@
             @if (AllowFiltering && !Multiple)
             {
                 <div class="rz-dropdown-filter-container">
-                    <label class="rz-helper-hidden-accessible" style="position:absolute !important" for="@SearchID">search</label>
-                    <input id="@SearchID" @ref="@search" tabindex="@(Disabled ? "-1" : $"{TabIndex}")" placeholder="@FilterPlaceholder" class="rz-dropdown-filter rz-inputtext   " autocomplete="off" type="text"
+                    <input aria-label="search" id="@SearchID" @ref="@search" tabindex="@(Disabled ? "-1" : $"{TabIndex}")" placeholder="@FilterPlaceholder" class="rz-dropdown-filter rz-inputtext   " autocomplete="off" type="text"
                            @onchange="@((ChangeEventArgs args) => OnFilter(args))" @onkeydown="@((args) => OnFilterKeyPress(args))" value="@searchText"
                             @oninput=@(args => { searchText = $"{args.Value}"; SearchTextChanged.InvokeAsync(searchText);}) />
                     <span class="rz-dropdown-filter-icon rzi rzi-search"></span>
@@ -117,8 +116,7 @@
                     {
                     <div class="rz-chkbox" title="@(!AllowFiltering ? "" : SelectAllText)" @onclick="@SelectAll">
                         <div class="rz-helper-hidden-accessible">
-                            <label class="rz-helper-hidden-accessible" style="position:absolute !important" for="@($"{(Name ?? UniqueID + "sa")}")">selectall</label>
-                            <input readonly="readonly" type="checkbox" id="@($"{(Name ?? UniqueID + "sa")}")">
+                            <input readonly="readonly" type="checkbox" id="@($"{(Name ?? UniqueID + "sa")}")" aria-label="search">
                         </div>
                         <div class="@(IsAllSelected() ? "rz-chkbox-box rz-state-active" : "rz-chkbox-box")">
                             <span class="@(IsAllSelected() ? "rz-chkbox-icon rzi rzi-check" : "rz-chkbox-icon")"></span>
@@ -132,9 +130,8 @@
                     @if (AllowFiltering)
                     {
                         <div class="rz-multiselect-filter-container">
-                            <label class="rz-helper-hidden-accessible" style="position:absolute !important" for="@SearchID">search</label>
                             <input id="@SearchID" tabindex="@(Disabled ? "-1" : $"{TabIndex}")" class="rz-inputtext" role="textbox" type="text"
-                                   onclick="Radzen.preventDefaultAndStopPropagation(event)"
+                                   onclick="Radzen.preventDefaultAndStopPropagation(event)" aria-label="search"
                                    @ref="@search" @oninput=@(args => { searchText = $"{args.Value}"; SearchTextChanged.InvokeAsync(searchText);})
                                    @onchange="@((args) => OnFilter(args))" @onkeydown="@((args) => OnFilterKeyPress(args))" value="@searchText" />
                             <span class="rz-multiselect-filter-icon rzi rzi-search"></span>

diff --git a/Radzen.Blazor/RadzenDropDown.razor.cs b/Radzen.Blazor/RadzenDropDown.razor.cs
@@ -22,6 +22,7 @@ public partial class RadzenDropDown<TValue> : DropDownBase<TValue>
         /// Specifies additional custom attributes that will be rendered by the input.
         /// </summary>
         /// <value>The attributes.</value>
+        [Parameter]
         public IReadOnlyDictionary<string, object> InputAttributes { get; set; }
 
         /// <summary>

diff --git a/Radzen.Blazor/RadzenDropDownDataGrid.razor b/Radzen.Blazor/RadzenDropDownDataGrid.razor
@@ -114,8 +114,7 @@
                 @if (AllowFiltering)
                 {
                     <div class="rz-lookup-search">
-                        <label class="rz-helper-hidden-accessible" style="position:absolute !important" for="@SearchID">search</label>
-                        <input class="rz-lookup-search-input" id="@SearchID" @ref="@search" tabindex="-1" placeholder="@SearchTextPlaceholder"
+                        <input aria-label="search" class="rz-lookup-search-input" id="@SearchID" @ref="@search" tabindex="-1" placeholder="@SearchTextPlaceholder"
                                @onchange="@((args) => OnFilter(args))" @onkeydown="@((args) => OnFilterKeyPress(args))" value="@searchText" style="@(ShowSearch ? "" : "margin-right:0px;")"
                         @oninput=@(args => { searchText = $"{args.Value}"; SearchTextChanged.InvokeAsync(searchText);}) />
                         @if (ShowSearch)

diff --git a/Radzen.Blazor/RadzenDropDownDataGrid.razor.cs b/Radzen.Blazor/RadzenDropDownDataGrid.razor.cs
@@ -25,6 +25,7 @@ public partial class RadzenDropDownDataGrid<TValue> : DropDownBase<TValue>
         /// Specifies additional custom attributes that will be rendered by the input.
         /// </summary>
         /// <value>The attributes.</value>
+        [Parameter]
         public IReadOnlyDictionary<string, object> InputAttributes { get; set; }
 
         /// <summary>

diff --git a/Radzen.Blazor/RadzenFileInput.razor.cs b/Radzen.Blazor/RadzenFileInput.razor.cs
@@ -24,6 +24,7 @@ public partial class RadzenFileInput<TValue> : FormComponent<TValue>
         /// Specifies additional custom attributes that will be rendered by the input.
         /// </summary>
         /// <value>The attributes.</value>
+        [Parameter]
         public IReadOnlyDictionary<string, object> InputAttributes { get; set; }
 
         /// <summary>

diff --git a/Radzen.Blazor/RadzenNumeric.razor.cs b/Radzen.Blazor/RadzenNumeric.razor.cs
@@ -22,6 +22,7 @@ public partial class RadzenNumeric<TValue> : FormComponent<TValue>
         /// Specifies additional custom attributes that will be rendered by the input.
         /// </summary>
         /// <value>The attributes.</value>
+        [Parameter]
         public IReadOnlyDictionary<string, object> InputAttributes { get; set; }
 
         /// <summary>

diff --git a/Radzen.Blazor/RadzenUpload.razor.cs b/Radzen.Blazor/RadzenUpload.razor.cs
@@ -45,6 +45,7 @@ public partial class RadzenUpload : RadzenComponent
         /// Specifies additional custom attributes that will be rendered by the input.
         /// </summary>
         /// <value>The attributes.</value>
+        [Parameter]
         public IReadOnlyDictionary<string, object> InputAttributes { get; set; }
 
         /// <summary>

diff --git a/RadzenBlazorDemos/Pages/DropDownBindValue.razor b/RadzenBlazorDemos/Pages/DropDownBindValue.razor
@@ -1,7 +1,8 @@
 @inherits DbContextPage
 
 <div class="rz-p-sm-12 rz-text-align-center">
-    <RadzenDropDown @bind-Value=@value Data=@companyNames Style="width: 100%; max-width: 400px;" />
+    <RadzenLabel Text="Select Value" Component="DropDownBindValue" Style="margin-right: 8px; vertical-align: middle;" />
+    <RadzenDropDown @bind-Value=@value Data=@companyNames Style="width: 100%; max-width: 400px;" Name="DropDownBindValue" />
 </div>
 
 @code {

diff --git a/RadzenBlazorDemos/Pages/DropDownChangeEvent.razor b/RadzenBlazorDemos/Pages/DropDownChangeEvent.razor
@@ -1,7 +1,8 @@
 @inherits DbContextPage
 
 <div class="rz-p-sm-12 rz-text-align-center">
-    <RadzenDropDown TValue="string" Value=@value Data=@companyNames Change="@(args => value = $"{args}")" Style="width: 100%; max-width: 400px;" />
+    <RadzenLabel Text="Select Value" Component="DropDownChangeEvent" Style="margin-right: 8px; vertical-align: middle;" />
+    <RadzenDropDown TValue="string" Value=@value Data=@companyNames Change="@(args => value = $"{args}")" Style="width: 100%; max-width: 400px;" Name="DropDownChangeEvent" />
 </div>
 
 @code {

diff --git a/RadzenBlazorDemos/Pages/DropDownClear.razor b/RadzenBlazorDemos/Pages/DropDownClear.razor
@@ -3,7 +3,8 @@
 @inherits DbContextPage
 
 <div class="rz-p-sm-12 rz-text-align-center">
-    <RadzenDropDown @bind-Value=@value Data=@products TextProperty="ProductName" ValueProperty="ProductID" AllowClear=true Placeholder="Select product" Style="width: 100%; max-width: 400px;"/>
+    <RadzenLabel Text="Select Value" Component="DropDownClear" Style="margin-right: 8px; vertical-align: middle;" />
+    <RadzenDropDown @bind-Value=@value Data=@products TextProperty="ProductName" ValueProperty="ProductID" AllowClear=true Placeholder="Select product" Style="width: 100%; max-width: 400px;" Name="DropDownClear" />
 </div>
 
 @code {

diff --git a/RadzenBlazorDemos/Pages/DropDownCustomObjects.razor b/RadzenBlazorDemos/Pages/DropDownCustomObjects.razor
@@ -5,8 +5,9 @@
 @using System.ComponentModel.DataAnnotations
 
 <div class="rz-p-sm-12 rz-text-align-center">
+    <RadzenLabel Text="Select Value" Component="DropDownCustomObjects" Style="margin-right: 8px; vertical-align: middle;" />
     <RadzenDropDown Data=@data TValue="MyObject" @bind-Value=@singleValue
-                    AllowClear="true" AllowFiltering="true" Style="width: 100%; max-width: 400px;">
+                    AllowClear="true" AllowFiltering="true" Style="width: 100%; max-width: 400px;" Name="DropDownCustomObjects">
     </RadzenDropDown>
 </div>
 

diff --git a/RadzenBlazorDemos/Pages/DropDownDataGridBindValue.razor b/RadzenBlazorDemos/Pages/DropDownDataGridBindValue.razor
@@ -1,7 +1,8 @@
 @inherits DbContextPage
 
 <div class="rz-p-12 rz-text-align-center">
-    <RadzenDropDownDataGrid @bind-Value=@value Data=@companyNames />
+    <RadzenLabel Text="Select Value" Component="DropDownDataGridBindValue" Style="margin-right: 8px; vertical-align: middle;" />
+    <RadzenDropDownDataGrid @bind-Value=@value Data=@companyNames Name="DropDownDataGridBindValue" />
 </div>
 
 @code {

diff --git a/RadzenBlazorDemos/Pages/DropDownDataGridChangeEvent.razor b/RadzenBlazorDemos/Pages/DropDownDataGridChangeEvent.razor
@@ -1,7 +1,8 @@
 @inherits DbContextPage
 
 <div class="rz-p-12 rz-text-align-center">
-    <RadzenDropDownDataGrid TValue="string" Value=@value Data=@companyNames Change="@(args => value = $"{args}")" />
+    <RadzenLabel Text="Select Value" Component="DropDownDataGridChangeEvent" Style="margin-right: 8px; vertical-align: middle;" />
+    <RadzenDropDownDataGrid TValue="string" Value=@value Data=@companyNames Change="@(args => value = $"{args}")" Name="DropDownDataGridChangeEvent" />
 </div>
 
 @code {