Duplicate id in the generated html

Davide_Visentin · May 30, 2024, 8:26pm

By analyzing a page using radzen components using a WCAG checker, I've noticed that some components generate html code with the same id value for multiple tags, which is not compliant with html specification and can cause issues with assistive tools: F77: Failure of Success Criterion 4.1.1 due to duplicate values of type ID | WAI | W3C

enchev · May 31, 2024, 6:43am

You can set Name for such components - it will be used instead the auto-generated id:

github.com

radzenhq/radzen-blazor/blob/master/Radzen.Blazor/RadzenUpload.razor#L53


      
          </div>
          }
          @code {
          #if NET5_0_OR_GREATER
                  RenderFragment RenderInput()
                  {
                      return __builder => {
                          <text>
                              @if(!string.IsNullOrEmpty(Url))
                              {
                                  <input id="@(Name ?? GetId())" @ref="@fileUpload" @attributes="InputAttributes" type="file" multiple="@Multiple" accept="@Accept" disabled="@Disabled" 
                                     onchange="Radzen.uploadInputChange(event, '@Url', @Auto.ToString().ToLower(), @Multiple.ToString().ToLower(), true, '@ParameterName')" tabindex="-1" onkeydown="event.stopPropagation()"/>
                              }
                              else
                              {
                                  <Microsoft.AspNetCore.Components.Forms.InputFile id="@(Name ?? GetId())" @attributes="InputAttributes" multiple="@Multiple" accept="@Accept" disabled="@Disabled" 
                                      tabindex="-1" onkeydown="event.stopPropagation()" OnChange="@OnInputChange" />
                              }
                          </text>
                       };
                  }