refactor(multiple): remove visually hidden styles from core

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;
 
@@ -256,7 +257,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;
 
@@ -158,6 +158,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

@@ -43,6 +43,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, _VisuallyHiddenLoader} from '@angular/cdk/private';
 
 let uid = 0;
 
@@ -244,6 +245,7 @@ export class MatChip implements OnInit, AfterViewInit, AfterContentInit, DoCheck
   constructor(...args: unknown[]);
 
   constructor() {
+    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,10 @@
-@use '@angular/cdk';
 @use './tokens/m2/mat/app' as tokens-mat-app;
 @use './tokens/token-utils';
 @use './style/elevation';
 @use './focus-indicators/private';
 
 // Mixin that renders all of the core styles that are not theme-dependent.
 @mixin core() {
-  @include cdk.a11y-visually-hidden();
   @include private.structural-styling();
 }
 

src/material/core/option/option.ts

@@ -31,6 +31,7 @@ import {MAT_OPTGROUP, MatOptgroup} from './optgroup';
 import {MatOptionParentComponent, MAT_OPTION_PARENT_COMPONENT} from './option-parent';
 import {MatRipple} from '../ripple/ripple';
 import {MatPseudoCheckbox} from '../selection/pseudo-checkbox/pseudo-checkbox';
+import {_CdkPrivateStyleLoader, _VisuallyHiddenLoader} from '@angular/cdk/private';
 
 /**
  * Option IDs need to be unique across components, so this counter exists outside of
@@ -144,6 +145,7 @@ export class MatOption<T = any> implements FocusableOption, AfterViewChecked, On
 
   constructor(...args: unknown[]);
   constructor() {
+    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;
 
@@ -68,6 +69,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;
@@ -202,6 +203,7 @@ export class MatDatepickerContent<S, D = ExtractDateTypeFromSelection<S>>
   constructor(...args: unknown[]);
 
   constructor() {
+    inject(_CdkPrivateStyleLoader).load(_VisuallyHiddenLoader);
     const intl = inject(MatDatepickerIntl);
 
     this._closeButtonText = intl.closeCalendarLabel;

src/material/datepicker/month-view.ts

@@ -51,6 +51,7 @@ import {
   MatDateRangeSelectionStrategy,
   MAT_DATE_RANGE_SELECTION_STRATEGY,
 } from './date-range-selection-strategy';
+import {_CdkPrivateStyleLoader, _VisuallyHiddenLoader} from '@angular/cdk/private';
 
 const DAYS_PER_WEEK = 7;
 
@@ -221,6 +222,7 @@ export class MatMonthView<D> implements AfterContentInit, OnChanges, OnDestroy {
   constructor(...args: unknown[]);
 
   constructor() {
+    inject(_CdkPrivateStyleLoader).load(_VisuallyHiddenLoader);
     if (typeof ngDevMode === 'undefined' || ngDevMode) {
       if (!this._dateAdapter) {
         throw createMissingDateImplError('DateAdapter');

src/material/stepper/step-header.ts

@@ -26,6 +26,7 @@ import {CdkStepHeader, StepState} from '@angular/cdk/stepper';
 import {MatRipple, ThemePalette} from '@angular/material/core';
 import {MatIcon} from '@angular/material/icon';
 import {NgTemplateOutlet} from '@angular/common';
+import {_CdkPrivateStyleLoader, _VisuallyHiddenLoader} from '@angular/cdk/private';
 
 @Component({
   selector: 'mat-step-header',
@@ -88,6 +89,7 @@ export class MatStepHeader extends CdkStepHeader implements AfterViewInit, OnDes
   constructor() {
     super();
 
+    inject(_CdkPrivateStyleLoader).load(_VisuallyHiddenLoader);
     const changeDetectorRef = inject(ChangeDetectorRef);
     this._intlSubscription = this._intl.changes.subscribe(() => changeDetectorRef.markForCheck());
   }