Skip to content

fix(material/checkbox): omit empty label element when no label is provided#33231

Closed
EduardF1 wants to merge 1 commit intoangular:mainfrom
EduardF1:fix/checkbox-empty-label
Closed

fix(material/checkbox): omit empty label element when no label is provided#33231
EduardF1 wants to merge 1 commit intoangular:mainfrom
EduardF1:fix/checkbox-empty-label

Conversation

@EduardF1
Copy link
Copy Markdown

@EduardF1 EduardF1 commented May 8, 2026

What is the current behavior?

<mat-checkbox> always renders a <label> element inside mat-internal-form-field, even when no label content is projected. The empty <label> is hidden via display: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 in ngAfterContentInit by inspecting the projected light DOM children of the host element; the result drives an @if in the template via a _hasLabel signal.

The checkbox harness's _label locator is relaxed to locatorForOptional so getLabelText() returns '' when no label exists, instead of throwing.

Tests

Two assertions added to the existing 'without label' describe block in checkbox.spec.ts:

  1. No <label> element is rendered when mat-checkbox has no projected content.
  2. A <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 @googlebot if prompted.

@pullapprove pullapprove Bot requested review from adolgachev and tjshiu May 8, 2026 20:35
@google-cla
Copy link
Copy Markdown

google-cla Bot commented May 8, 2026

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>
@EduardF1 EduardF1 force-pushed the fix/checkbox-empty-label branch from 6e19b6d to c3ac0fb Compare May 8, 2026 23:09
@EduardF1
Copy link
Copy Markdown
Author

EduardF1 commented May 8, 2026

@googlebot I have signed the CLA, please verify.

@crisbeto
Copy link
Copy Markdown
Member

crisbeto commented May 9, 2026

See #33230 (comment)

@crisbeto crisbeto closed this May 9, 2026
@EduardF1
Copy link
Copy Markdown
Author

EduardF1 commented May 9, 2026

Thanks @crisbeto for the pointer to <mat-pseudo-checkbox/> - that's a cleaner fit for this case. Closing out here, appreciate the quick triage.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

bug(checkbox): mat-checkbox renders empty <label> when no label is provided

3 participants