diff --git a/components/backdrop/backdrop-loading.js b/components/backdrop/backdrop-loading.js index db1a95a12ff..3e2786e661c 100644 --- a/components/backdrop/backdrop-loading.js +++ b/components/backdrop/backdrop-loading.js @@ -153,17 +153,26 @@ class LoadingBackdrop extends PropertyRequiredMixin(LocalizeCoreElement(LitEleme render() { const forcedOffscreenSizelessStyles = OffSCREEN_SIZELESS ? {} : { height: '0px', width: '0px' }; - const dirtyStateVisible = this._state !== 'hidden' && this.dataState === 'dirty'; + const backdropVisible = this._state !== 'hidden'; return html` - ${this._state === 'hidden' ? nothing : + ${backdropVisible ? html`
-
` + ` : nothing } -
- ${this.dataState === 'dirty' ? this.#renderDirtyOverlay() : this._ariaContent} +
+ ${backdropVisible ? + html`` : nothing }; +
+
+ ${this._ariaContent}
`; } @@ -257,7 +266,7 @@ class LoadingBackdrop extends PropertyRequiredMixin(LocalizeCoreElement(LitEleme #fade() { let hideImmediately = reduceMotion || this._state === 'showing'; if (this._state === 'shown') { - const currentOpacity = getComputedStyle(this.shadowRoot.querySelector('.backdrop')).opacity; + const currentOpacity = getComputedStyle(this.shadowRoot.querySelector('d2l-backdrop-dirty-overlay')).opacity; hideImmediately ||= (currentOpacity === '0'); } @@ -296,14 +305,6 @@ class LoadingBackdrop extends PropertyRequiredMixin(LocalizeCoreElement(LitEleme if (containingBlock.dataset.initiallyInert !== '1') containingBlock.removeAttribute('inert'); } - #renderDirtyOverlay() { - return html``; - } - #setLiveArea(content, { delay } = {}) { this.announcementTimeout = setTimeout(() => this._ariaContent = content, delay || 0); } diff --git a/components/backdrop/test/golden/backdrop-loading/chromium/dirty.dark.png b/components/backdrop/test/golden/backdrop-loading/chromium/dirty.dark.png index 2ae746f9b2f..95836e95b84 100644 Binary files a/components/backdrop/test/golden/backdrop-loading/chromium/dirty.dark.png and b/components/backdrop/test/golden/backdrop-loading/chromium/dirty.dark.png differ diff --git a/components/backdrop/test/golden/backdrop-loading/chromium/dirty.png b/components/backdrop/test/golden/backdrop-loading/chromium/dirty.png index 7cea1b7a8b1..bec6a6ea6fe 100644 Binary files a/components/backdrop/test/golden/backdrop-loading/chromium/dirty.png and b/components/backdrop/test/golden/backdrop-loading/chromium/dirty.png differ diff --git a/components/backdrop/test/golden/backdrop-loading/chromium/loading.dark.png b/components/backdrop/test/golden/backdrop-loading/chromium/loading.dark.png index 4a08c869651..505e3a97c6b 100644 Binary files a/components/backdrop/test/golden/backdrop-loading/chromium/loading.dark.png and b/components/backdrop/test/golden/backdrop-loading/chromium/loading.dark.png differ diff --git a/components/backdrop/test/golden/backdrop-loading/chromium/loading.png b/components/backdrop/test/golden/backdrop-loading/chromium/loading.png index 00cfe891f95..0a00ce39625 100644 Binary files a/components/backdrop/test/golden/backdrop-loading/chromium/loading.png and b/components/backdrop/test/golden/backdrop-loading/chromium/loading.png differ