dotnet / aspnetcore

ASP.NET Core is a cross-platform .NET framework for building modern cloud-based web applications on Windows, Mac, or Linux.
https://asp.net
MIT License
35.21k stars 9.95k forks source link

Blazor Identity components don't specify `id` for labels #53266

Open guardrex opened 8 months ago

guardrex commented 8 months ago

Is there an existing issue for this?

Describe the bug

The <label> spec (4.10.4) calls for explicitly-labeled elements to have an id that matches the <label>'s for attribute. The Identity components don't have id set.

For example, the InputText component of the Login component doesn't set id="email" to match the <label>'s for attribute ...

<div class="form-floating mb-3">
    <InputText @bind-Value="Input.Email" class="form-control" autocomplete="username" aria-required="true" placeholder="name@example.com" />
    <label for="email" class="form-label">Email</label>
    <ValidationMessage For="() => Input.Email" class="text-danger" />
</div>

Rendered ...

<div class="form-floating mb-3">
    <input autocomplete="off" aria-required="true" placeholder="name@example.com" name="Input.Email" class="form-control valid" value="" style="background-image: url(&quot;moz-extension://dcb55c96-de40-4f2c-913f-d37cccad5aae/images/web_access/vault-input-disabled.svg&quot;) !important; background-repeat: no-repeat !important; background-position: calc(100% - 3px) center !important; background-size: 14px !important; cursor: text;">
    <label for="email" class="form-label">Email</label>
</div>

Therefore, the control and form properties are null ...

image

When the InputText element is provided with id="email", the form and control properties are set ...

image

Expected Behavior

InputText elements (and any other labeled elements) have an id matching the for attribute of label elements.

Steps To Reproduce

None ... it's a template thing.

Exceptions (if any)

None ... the labels just no-op.

.NET Version

8.0.100

Anything else?

No response

javiercn commented 8 months ago

@guardrex thanks for filing the issue.

We only set the name based on the @bind attribute. We could if we want to set the id too, but that's up to the developer, not something that the component needs to necessarily take care on behalf-of.

Note that labels can also wrap the inputs and in that scenario they don't need to use for="<<id>>"

ghost commented 8 months ago

Thanks for contacting us.

We're moving this issue to the .NET 9 Planning milestone for future evaluation / consideration. We would like to keep this around to collect more feedback, which can help us with prioritizing this work. We will re-evaluate this issue, during our next planning meeting(s). If we later determine, that the issue has no community involvement, or it's very rare and low-impact issue, we will close it - so that the team can focus on more important and high impact issues. To learn more about what to expect next and how this issue will be handled you can read more about our triage process here.

guardrex commented 8 months ago

up to the developer

Sorry ... I should've been more specific. This issue refers to the Identity components in the project template. Therefore, this is a project template bug. Here's the ref source for the example that I show above ...

https://github.com/dotnet/aspnetcore/blob/main/src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/BlazorWeb-CSharp/Components/Account/Pages/Login.razor#L26

mkArtakMSFT commented 8 months ago

We will prioritize generating id s for Blazor Identity components, so that the generated template code is correct.

ghost commented 7 months ago

Thanks for contacting us.

We're moving this issue to the .NET 9 Planning milestone for future evaluation / consideration. We would like to keep this around to collect more feedback, which can help us with prioritizing this work. We will re-evaluate this issue, during our next planning meeting(s). If we later determine, that the issue has no community involvement, or it's very rare and low-impact issue, we will close it - so that the team can focus on more important and high impact issues. To learn more about what to expect next and how this issue will be handled you can read more about our triage process here.