fix(material/checkbox): omit empty label element when no label is provided#33231
Closed
EduardF1 wants to merge 1 commit intoangular:mainfrom
Closed
fix(material/checkbox): omit empty label element when no label is provided#33231EduardF1 wants to merge 1 commit intoangular:mainfrom
EduardF1 wants to merge 1 commit intoangular:mainfrom
Conversation
|
Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA). View this failed invocation of the CLA check for more information. For the most up to date status, view the checks section at the bottom of the pull request. |
…vided The `<label>` element inside `mat-checkbox` was always rendered even when no content was projected, leaving an empty `<label>` in the DOM hidden via `display:none`. Accessibility tooling (e.g. Arc Toolkit) flags the empty label as an a11y violation. Detect projected content in `ngAfterContentInit` and conditionally render the `<label>` element so the DOM no longer contains an empty label when no label is provided. Also relax the checkbox harness to handle the absent label. Fixes angular#33230 Signed-off-by: Eduard Fischer-Szava <fischer_eduard@yahoo.com>
6e19b6d to
c3ac0fb
Compare
Author
|
@googlebot I have signed the CLA, please verify. |
Member
|
See #33230 (comment) |
Author
|
Thanks @crisbeto for the pointer to |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What is the current behavior?
<mat-checkbox>always renders a<label>element insidemat-internal-form-field, even when no label content is projected. The empty<label>is hidden viadisplay:none, but accessibility tooling such as Arc Toolkit still flags it as a violation. This is a regression vs. Material 14.What is the new behavior?
The
<label>element is now omitted from the DOM entirely when no label content has been projected. Detection happens inngAfterContentInitby inspecting the projected light DOM children of the host element; the result drives an@ifin the template via a_hasLabelsignal.The checkbox harness's
_labellocator is relaxed tolocatorForOptionalsogetLabelText()returns''when no label exists, instead of throwing.Tests
Two assertions added to the existing
'without label'describe block incheckbox.spec.ts:<label>element is rendered whenmat-checkboxhas no projected content.<label>element with the expected text is rendered when content is projected.I have not run the full Angular Components test suite locally (initial install + Bazel test would exceed my available time budget). CI should validate.
Does this PR introduce a breaking change?
No. The
<label>is only removed when previously empty, and the[for]/click bubble paths gracefully handle its absence.Fixes #33230
DCO: commit is signed off (
Signed-off-by: Eduard Fischer-Szava <fischer_eduard@yahoo.com>).CLA: I have read the CLA Document and I hereby sign the CLA — will respond to
@googlebotif prompted.