Ensure backdrop remains to fadeout after apply is clicked#6971
Ensure backdrop remains to fadeout after apply is clicked#6971duncanuszkay-d2l wants to merge 1 commit into
Conversation
|
Thanks for the PR! 🎉 We've deployed an automatic preview for this PR - you can see your changes here:
Note The build needs to finish before your changes are deployed. |
duncanuszkay-d2l
force-pushed
the
dunk.backdrop-fade-out-fix
branch
from
4285065 to
865fc0a
Compare
| <div aria-live="polite" class="${classMap({ 'd2l-offscreen': true })}" style="${styleMap(forcedOffscreenSizelessStyles)}"> | ||
| ${this._ariaContent} | ||
| </div> |
There was a problem hiding this comment.
This had to be moved into its own offscreen box so that announcement content wouldn't appear on the screen while the backdrop is fading out.
| </div>` | ||
| } | ||
| <div aria-live="polite" class="${classMap({ 'd2l-offscreen': !dirtyStateVisible })}" style="${styleMap(dirtyStateVisible ? {} : forcedOffscreenSizelessStyles)}"> | ||
| ${this.dataState === 'dirty' ? this.#renderDirtyOverlay() : this._ariaContent} |
There was a problem hiding this comment.
This would prevent the dirty state box from rendering the moment that the data state switched over to loading, preventing the fade-in animation from occuring.
Instead, I'm rendering this component whenever the backdrop is visible, even if that just results in it remaining inert offscreen.
duncanuszkay-d2l
force-pushed
the
dunk.backdrop-fade-out-fix
branch
from
865fc0a to
38e47e7
Compare
| 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; |
There was a problem hiding this comment.
This selector was outdated 👀
| style=${styleMap({ top: `${this._dirtyDialogTop}px` })} | ||
| description="${this.dirtyText}" | ||
| action="${this.dirtyButtonText}" | ||
| ?inert=${this.dataState !== 'dirty'} |
There was a problem hiding this comment.
While the backdrop is fading out to the loading state, we want to make sure the button within the dirty overlay is inaccessible, so I'm making this section inert when we're not in the dirty state.
| #renderDirtyOverlay() { | ||
| return html`<d2l-backdrop-dirty-overlay | ||
| style=${styleMap({ top: `${this._dirtyDialogTop}px` })} | ||
| description="${this.dirtyText}" | ||
| action="${this.dirtyButtonText}" | ||
| ></d2l-backdrop-dirty-overlay>`; | ||
| } |
There was a problem hiding this comment.
I inlined this, I felt it was easier to read that way.
duncanuszkay-d2l
force-pushed
the
dunk.backdrop-fade-out-fix
branch
from
38e47e7 to
3adcc93
Compare
1 participant
https://desire2learn.atlassian.net/browse/NTNGL-5471?atlOrigin=eyJpIjoiMWYyNDEzMjUyMWIzNDRjYmJkYWQ2NTg1N2QxYmUyNjAiLCJwIjoiaiJ9
While working on adding the dirty overlay to the list component, I noticed that recent accessibility changes were preventing the backdrop from fading out.
I'll point out what went wrong with inline comments.
This PR resolves the issue, as seen in this before/after:
Before
Recording.2026-05-12.112502.mp4
After
Recording.2026-05-12.112341.mp4