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
GZolla
left a comment
GZolla
left a comment
There was a problem hiding this comment.
Nice! Transitions are much smoother, dirty to loading is specially satisfying
| <div aria-live="polite" class="${classMap({ 'd2l-offscreen': !backdropVisible })}" style="${styleMap(backdropVisible ? {} : forcedOffscreenSizelessStyles)}"> | ||
| ${backdropVisible ? | ||
| html`<d2l-backdrop-dirty-overlay | ||
| style=${styleMap({ top: `${this._dirtyDialogTop}px` })} |
There was a problem hiding this comment.
After testing a bit it seems that you could get rid of the offscreen styling on the aria-live region and just set a display on the dirty overlay:
| style=${styleMap({ top: `${this._dirtyDialogTop}px` })} | |
| style=${styleMap({ top: `${this._dirtyDialogTop}px`, display: backdropVisible ? undefined : 'none' })} |
This seems cleaner and would also allow the _ariaContent div to be moved back in and have a single aria-live region.
There was a problem hiding this comment.
Hm, were you testing with a screen reader? The reason that this is displayed offscreen is to avoid the issue wherein a newly displayed aria-live region isn't read
| ?inert=${this.dataState !== 'dirty'} | ||
| ></d2l-backdrop-dirty-overlay>` : nothing } | ||
| </div> | ||
| <div aria-live="polite" class="${classMap({ 'd2l-offscreen': true })}" style="${styleMap(forcedOffscreenSizelessStyles)}"> |
There was a problem hiding this comment.
Apart from the move mentioned above, this can also use <d2l-offscreen> directly. This means forcedOffscreenSizelessStyles are not needed anywhere so it and the flag can be cleaned.
2 participants
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