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`
- ${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