diff --git a/src/cdk/a11y/BUILD.bazel b/src/cdk/a11y/BUILD.bazel index 710ea578423d..1075a8b9d957 100644 --- a/src/cdk/a11y/BUILD.bazel +++ b/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", ], diff --git a/src/cdk/a11y/aria-describer/aria-describer.ts b/src/cdk/a11y/aria-describer/aria-describer.ts index a940df4f024a..4302739500d0 100644 --- a/src/cdk/a11y/aria-describer/aria-describer.ts +++ b/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++; } diff --git a/src/cdk/a11y/focus-trap/focus-trap.ts b/src/cdk/a11y/focus-trap/focus-trap.ts index 07a85386a81d..8fa96b1197c9 100644 --- a/src/cdk/a11y/focus-trap/focus-trap.ts +++ b/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. diff --git a/src/cdk/a11y/live-announcer/live-announcer.ts b/src/cdk/a11y/live-announcer/live-announcer.ts index ac059b46b624..7e3fa0fe225d 100644 --- a/src/cdk/a11y/live-announcer/live-announcer.ts +++ b/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) { diff --git a/src/material/badge/badge.ts b/src/material/badge/badge.ts index 806f2146d192..6b9ab22584ca 100644 --- a/src/material/badge/badge.ts +++ b/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; diff --git a/src/material/chips/chip.ts b/src/material/chips/chip.ts index cbe6911e81df..25ab345574b3 100644 --- a/src/material/chips/chip.ts +++ b/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; @@ -247,6 +247,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(); diff --git a/src/material/core/_core.scss b/src/material/core/_core.scss index b524126d808e..2ff68ad8255f 100644 --- a/src/material/core/_core.scss +++ b/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. diff --git a/src/material/core/option/option.ts b/src/material/core/option/option.ts index 1e0461870982..6fa2c1ede511 100644 --- a/src/material/core/option/option.ts +++ b/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 @@ -147,6 +147,7 @@ export class MatOption implements FocusableOption, AfterViewChecked, On constructor(...args: unknown[]); constructor() { inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader); + inject(_CdkPrivateStyleLoader).load(_VisuallyHiddenLoader); this._signalDisableRipple = !!this._parent && isSignal(this._parent.disableRipple); } diff --git a/src/material/datepicker/calendar.ts b/src/material/datepicker/calendar.ts index 03eb93e2d77d..d6bf8b7af590 100644 --- a/src/material/datepicker/calendar.ts +++ b/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 { constructor(...args: unknown[]); constructor() { + inject(_CdkPrivateStyleLoader).load(_VisuallyHiddenLoader); const changeDetectorRef = inject(ChangeDetectorRef); this.calendar.stateChanges.subscribe(() => changeDetectorRef.markForCheck()); } diff --git a/src/material/datepicker/datepicker-base.ts b/src/material/datepicker/datepicker-base.ts index 43bfdbbfa033..0377d247fcfc 100644 --- a/src/material/datepicker/datepicker-base.ts +++ b/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> constructor(...args: unknown[]); constructor() { + inject(_CdkPrivateStyleLoader).load(_VisuallyHiddenLoader); const intl = inject(MatDatepickerIntl); this._closeButtonText = intl.closeCalendarLabel; diff --git a/src/material/datepicker/month-view.ts b/src/material/datepicker/month-view.ts index 51d677158575..b2e3f352a7dd 100644 --- a/src/material/datepicker/month-view.ts +++ b/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 implements AfterContentInit, OnChanges, OnDestroy { constructor(...args: unknown[]); constructor() { + inject(_CdkPrivateStyleLoader).load(_VisuallyHiddenLoader); if (typeof ngDevMode === 'undefined' || ngDevMode) { if (!this._dateAdapter) { throw createMissingDateImplError('DateAdapter'); diff --git a/src/material/stepper/step-header.ts b/src/material/stepper/step-header.ts index db98767de731..73178859d7f9 100644 --- a/src/material/stepper/step-header.ts +++ b/src/material/stepper/step-header.ts @@ -26,7 +26,7 @@ import {CdkStepHeader, StepState} from '@angular/cdk/stepper'; import {_StructuralStylesLoader, MatRipple, ThemePalette} from '@angular/material/core'; import {MatIcon} from '@angular/material/icon'; import {NgTemplateOutlet} from '@angular/common'; -import {_CdkPrivateStyleLoader} from '@angular/cdk/private'; +import {_CdkPrivateStyleLoader, _VisuallyHiddenLoader} from '@angular/cdk/private'; @Component({ selector: 'mat-step-header', @@ -90,6 +90,7 @@ export class MatStepHeader extends CdkStepHeader implements AfterViewInit, OnDes super(); inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader); + inject(_CdkPrivateStyleLoader).load(_VisuallyHiddenLoader); const changeDetectorRef = inject(ChangeDetectorRef); this._intlSubscription = this._intl.changes.subscribe(() => changeDetectorRef.markForCheck()); }