Visual and programmatic label of "Email" field is not same: A11y_ASP.NET_BlazorWebApp_Register_DevTools

[PoojaNamde]

GitHub Tags:

A11yMAS; #A11yTCS; #A11ySev2; #BM_ASP.NET_Web_Jun2024; #.NETCore; #WCAG4.1.2; #DesktopWeb; #Win11; #FTP; #DevTools; #ChromiumEdge;

Environment Details:

App name: ASP.NET Window Version: Win 11 OS Build: 22621.3085

Repro Steps:

1. Download the "BlazorWebApp" zip file and run .exe file.
2. Command prompt will open, TAB to "http://localhost:5000/" link and press CTRL + ENTER key.
3. TAB to "Register" tab and hit ENTER key. TAB to "Email" field.
4. Observe the issue.

Actual Result:

Visual and programmatic label of "Email" field is not same.

Similar issue is observed in "BlazorWebApp" and "BlazorWebAppUnchanged" template for 'Email' field throughout the application.

Expected Result:

Visual and programmatic label of "Email" field should be same.

User Impact:

Here screen reader users will not get correct information about the field.

Attachment:

[mkArtakMSFT]

Looks like the issue here is that the label element refers to an element with id=email but we don't have such defined. We should probably add the id=email attribute to the input field.

[Yash14j]

GithubTags:#Rev:yaja;