bug(COMPONENT): Angular 19: cdk-visually-hidden does not work automatically anymore

[lasselindqvist]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

18

Description

https://material.angular.io/cdk/a11y/overview#hiding-elements-in-an-accessible-way

describes: If you're using Angular Material, this class is included automatically by Angular Material's theming system. Otherwise, you can include this mixin in a global stylesheet.

In an Angular project we have

  <h2 id="id" class="cdk-visually-hidden">
    text
  </h2>

and this used to be hidden in Angular 18. After automatic upgrade it became visible.

Adding

@use '@angular/cdk';

@include cdk.a11y-visually-hidden();

makes it work again, but the guide says it should work automatically as we use Angular Material.

Reproduction

StackBlitz link: https://stackblitz.com/edit/components-issue-starter-fmwfcfx3?file=src%2Fmain.ts
Steps to reproduce:

1. Just open the main page
2. The text is visible and it should not be. With Angular 18 it was hidden

Expected Behavior

The text should be hidden

Actual Behavior

The text is visible

Environment

• Angular: 19.2.0
• CDK/Material: 19.2.0
• Browser(s): Firefox / Edge / Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[soryboums]

This was present in the core mixin but has been removed there in v19 57d9a2f.

I do agree about the lack of documenting this in the release note