Fix LoginWith2fa remember-machine checkbox label association - #68844
Conversation
There was a problem hiding this comment.
Pull request overview
This PR fixes an accessibility issue in the Blazor Web App (Individual auth) project template by ensuring the “Remember this machine” checkbox label is correctly associated with the checkbox (via implicit wrapping <label> association rather than an invalid for attribute).
Changes:
- Removed the invalid
for="remember-machine"attribute from theLoginWith2fa.razorlabel in the Blazor Web (C#) template. - Added a regression test that verifies the template no longer contains
for="remember-machine"and still containsInput.RememberMachine.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| src/ProjectTemplates/Web.ProjectTemplates/content/BlazorWeb-CSharp/BlazorWebCSharp.1/Components/Account/Pages/LoginWith2fa.razor | Removes invalid for attribute to restore correct implicit label association for the checkbox. |
| src/ProjectTemplates/test/Templates.Blazor.Tests/BlazorWebTemplateTest.cs | Adds regression coverage ensuring the template output does not contain the invalid for="remember-machine" string. |
💡 Add a code-review agent skill for context-aware, tailored reviews. Learn more in the docs.
791af9f to
b98aa92
Compare
3421fab to
e0ea890
Compare
|
Hi @snemeckayova. Please make sure you've updated the PR description to use the Shiproom Template. Also, make sure this PR is not marked as a draft and is ready-to-merge. To learn more about how to prepare a servicing PR click here. |
artl93
left a comment
There was a problem hiding this comment.
Accessibility. Approved.
@snemeckayova / @javiercn - Since this is not flagged as a regression, how long has the issue been in the code? How did we find this? Do we need to make a wider accessibility pass?
|
@artl93 I apologize, I had this marked incorrectly, it is a regression. #51134 removed id="remember-machine" from the InputCheckbox but left for="remember-machine" on the label. Updated the description accordingly. As for the other two questions, I'm not sure honestly. Hopefully @javiercn can give more insight. |
* Fix validation summary list semantics (#68913) * Fix LoginWith2fa remember-machine checkbox label association (#68844) * Remove LoginWith2fa remember-machine checkbox label association * Formatting fix * Remove test * Fix installer background for bundles (#68931) --------- Co-authored-by: Soňa Nemečkayová <109719150+snemeckayova@users.noreply.github.com> Co-authored-by: William Godbe <wigodbe@microsoft.com> Co-authored-by: Youssef Fahmy <youssefvictor00@gmail.com>
Description
This PR fixes an accessibility issue in the Blazor Web App (Individual auth) template where the "Remember this machine" checkbox label used
for="remember-machine"without a matching element id.Changes
forattribute so the checkbox uses implicit association via the wrapping<label>src/ProjectTemplates/test/Templates.Blazor.Tests/BlazorWebTemplateTest.cschecking whether:"Input.RememberMachine"is present"for=\"remember-machine\""is not presentFixes #67669
Customer Impact
Because the label declares a
forthat matches no element, the browser does not fall back to the implicit wrapping association, so the checkbox ends up with no associated label: screen readers announce an unlabeled checkbox and clicking the visible text does not toggle it.Regression?
Introduced in #51134, which removed
id="remember-machine"from theInputCheckboxbut leftfor="remember-machine"on the label. The markup was correct when originally added in #50722.Risk
Verification
Packaging changes reviewed?