refactor(multiple): remove visually hidden styles from core (#29812)

Author: wagnermaciel

src/cdk/a11y/BUILD.bazel

@@ -24,6 +24,7 @@ ng_module(
         "//src/cdk/layout",
         "//src/cdk/observers",
         "//src/cdk/platform",
+        "//src/cdk/private",
         "@npm//@angular/core",
         "@npm//rxjs",
     ],

src/cdk/a11y/aria-describer/aria-describer.ts

@@ -10,6 +10,7 @@ import {DOCUMENT} from '@angular/common';
 import {Injectable, OnDestroy, APP_ID, inject} from '@angular/core';
 import {Platform} from '@angular/cdk/platform';
 import {addAriaReferencedId, getAriaReferenceIds, removeAriaReferencedId} from './aria-reference';
+import {_CdkPrivateStyleLoader, _VisuallyHiddenLoader} from '@angular/cdk/private';
 
 /**
  * Interface used to register message elements and keep a count of how many registrations have
@@ -69,6 +70,7 @@ export class AriaDescriber implements OnDestroy {
   constructor(...args: unknown[]);
 
   constructor() {
+    inject(_CdkPrivateStyleLoader).load(_VisuallyHiddenLoader);
     this._id = inject(APP_ID) + '-' + nextId++;
   }
 

src/cdk/a11y/focus-trap/focus-trap.ts

@@ -25,6 +25,7 @@ import {
   inject,
 } from '@angular/core';
 import {InteractivityChecker} from '../interactivity-checker/interactivity-checker';
+import {_CdkPrivateStyleLoader, _VisuallyHiddenLoader} from '@angular/cdk/private';
 
 /**
  * Class that allows for trapping focus within a DOM element.
@@ -378,7 +379,9 @@ export class FocusTrapFactory {
   private _injector = inject(Injector);
 
   constructor(...args: unknown[]);
-  constructor() {}
+  constructor() {
+    inject(_CdkPrivateStyleLoader).load(_VisuallyHiddenLoader);
+  }
 
   /**
    * Creates a focus-trapped region around the given element.

src/cdk/a11y/live-announcer/live-announcer.ts

@@ -16,6 +16,7 @@ import {
   LIVE_ANNOUNCER_ELEMENT_TOKEN,
   LIVE_ANNOUNCER_DEFAULT_OPTIONS,
 } from './live-announcer-tokens';
+import {_CdkPrivateStyleLoader, _VisuallyHiddenLoader} from '@angular/cdk/private';
 
 let uniqueIds = 0;
 
@@ -255,7 +256,9 @@ export class CdkAriaLive implements OnDestroy {
 
   constructor(...args: unknown[]);
 
-  constructor() {}
+  constructor() {
+    inject(_CdkPrivateStyleLoader).load(_VisuallyHiddenLoader);
+  }
 
   ngOnDestroy() {
     if (this._subscription) {

src/material/badge/badge.ts

@@ -24,7 +24,7 @@ import {
   ANIMATION_MODULE_TYPE,
 } from '@angular/core';
 import {ThemePalette} from '@angular/material/core';
-import {_CdkPrivateStyleLoader} from '@angular/cdk/private';
+import {_CdkPrivateStyleLoader, _VisuallyHiddenLoader} from '@angular/cdk/private';
 
 let nextId = 0;
 
@@ -156,6 +156,7 @@ export class MatBadge implements OnInit, OnDestroy {
 
   constructor() {
     inject(_CdkPrivateStyleLoader).load(_MatBadgeStyleLoader);
+    inject(_CdkPrivateStyleLoader).load(_VisuallyHiddenLoader);
 
     if (typeof ngDevMode === 'undefined' || ngDevMode) {
       const nativeElement = this._elementRef.nativeElement;

src/material/chips/chip.ts

@@ -44,7 +44,7 @@ import {Subject, Subscription, merge} from 'rxjs';
 import {MatChipAction} from './chip-action';
 import {MatChipAvatar, MatChipRemove, MatChipTrailingIcon} from './chip-icons';
 import {MAT_CHIP, MAT_CHIP_AVATAR, MAT_CHIP_REMOVE, MAT_CHIP_TRAILING_ICON} from './tokens';
-import {_CdkPrivateStyleLoader} from '@angular/cdk/private';
+import {_CdkPrivateStyleLoader, _VisuallyHiddenLoader} from '@angular/cdk/private';
 
 let uid = 0;
 
@@ -246,6 +246,7 @@ export class MatChip implements OnInit, AfterViewInit, AfterContentInit, DoCheck
 
   constructor() {
     inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader);
+    inject(_CdkPrivateStyleLoader).load(_VisuallyHiddenLoader);
     const animationMode = inject(ANIMATION_MODULE_TYPE, {optional: true});
     this._animationsDisabled = animationMode === 'NoopAnimations';
     this._monitorFocus();

src/material/core/_core.scss

@@ -1,12 +1,9 @@
-@use '@angular/cdk';
 @use './tokens/m2/mat/app' as tokens-mat-app;
 @use './tokens/token-utils';
 @use './style/elevation';
 
 // Mixin that renders all of the core styles that are not theme-dependent.
-@mixin core() {
-  @include cdk.a11y-visually-hidden();
-}
+@mixin core() {}
 
 // Emits the mat-app-background CSS class. This predefined class sets the
 // background color and text color of an element.

src/material/core/option/option.ts

@@ -32,7 +32,7 @@ import {MatOptionParentComponent, MAT_OPTION_PARENT_COMPONENT} from './option-pa
 import {MatRipple} from '../ripple/ripple';
 import {MatPseudoCheckbox} from '../selection/pseudo-checkbox/pseudo-checkbox';
 import {_StructuralStylesLoader} from '../focus-indicators/structural-styles';
-import {_CdkPrivateStyleLoader} from '@angular/cdk/private';
+import {_CdkPrivateStyleLoader, _VisuallyHiddenLoader} from '@angular/cdk/private';
 
 /**
  * Option IDs need to be unique across components, so this counter exists outside of
@@ -146,6 +146,7 @@ export class MatOption<T = any> implements FocusableOption, AfterViewChecked, On
   constructor(...args: unknown[]);
   constructor() {
     inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader);
+    inject(_CdkPrivateStyleLoader).load(_VisuallyHiddenLoader);
     this._signalDisableRipple = !!this._parent && isSignal(this._parent.disableRipple);
   }
 

src/material/datepicker/calendar.ts

@@ -40,6 +40,7 @@ import {MatYearView} from './year-view';
 import {MAT_SINGLE_DATE_SELECTION_MODEL_PROVIDER, DateRange} from './date-selection-model';
 import {MatIconButton, MatButton} from '@angular/material/button';
 import {CdkMonitorFocus} from '@angular/cdk/a11y';
+import {_CdkPrivateStyleLoader, _VisuallyHiddenLoader} from '@angular/cdk/private';
 
 let calendarHeaderId = 1;
 
@@ -67,6 +68,7 @@ export class MatCalendarHeader<D> {
   constructor(...args: unknown[]);
 
   constructor() {
+    inject(_CdkPrivateStyleLoader).load(_VisuallyHiddenLoader);
     const changeDetectorRef = inject(ChangeDetectorRef);
     this.calendar.stateChanges.subscribe(() => changeDetectorRef.markForCheck());
   }

src/material/datepicker/datepicker-base.ts

@@ -74,6 +74,7 @@ import {matDatepickerAnimations} from './datepicker-animations';
 import {createMissingDateImplError} from './datepicker-errors';
 import {DateFilterFn} from './datepicker-input-base';
 import {MatDatepickerIntl} from './datepicker-intl';
+import {_CdkPrivateStyleLoader, _VisuallyHiddenLoader} from '@angular/cdk/private';
 
 /** Used to generate a unique ID for each datepicker instance. */
 let datepickerUid = 0;
@@ -201,6 +202,7 @@ export class MatDatepickerContent<S, D = ExtractDateTypeFromSelection<S>>
   constructor(...args: unknown[]);
 
   constructor() {
+    inject(_CdkPrivateStyleLoader).load(_VisuallyHiddenLoader);
     const intl = inject(MatDatepickerIntl);
 
     this._closeButtonText = intl.closeCalendarLabel;