Fix toast positioning inside popups to align with the "Notifications" positioning option (#4506) * fix: adjust toast container positioning in popups to match core toastr behavior Fixes #4490 * Fix misplaced element role * Hide toast container while opening animation is running * fix: update toast role from alert to status --------- Co-authored-by: Cohee <18619528+Cohee1207@users.noreply.github.com>

f62eeb76a67517f49f0e545c16072b1a6b605233

Wolfsblvt <wolfsblvt@gmail.com>

Signed

public/css/popup.css+25 -8 Viewed

     /* Fix weird animation issue with font-scaling during popup open */
     backface-visibility: hidden;
 -    transform: translateZ(0);
     -webkit-font-smoothing: subpixel-antialiased;
     /* Variables setup */

     animation: fade-in var(--popup-animation-speed) ease-in-out;
+}
 +/* Fix toast container snapping into the backdrop while the animation is running */
 +.popup[opening] #toast-container {
 +    visibility: hidden;
 +}
++
 /* Open state of the dialog */
 .popup[open] {
     color: var(--SmartThemeBodyColor);

     animation: fade-out var(--popup-animation-speed) ease-in-out;
+}
 -.popup #toast-container {
 +/* Edge inset to match Toastr default spacing */
 -    /* Fix toastr in dialogs by actually placing it at the top of the screen via transform */
 +:root {
     height--toast-edge: 100dvh12px;
 -    top: calc(50% + var(--topBarBlockSize));
 +}
 -    left: 50%;
 -    transform: translate(-50%, -50%);
 -    /* Fix text align, popups are centered by default. toasts should not. */
 +.popup #toast-container {
 +    /* Popups are centered by default; toasts should not be */
     text-align: left;
+}
 +/* Per-position position adjustments caused by the top bar, inside the popup */
 +.popup #toast-container.toast-top-left {
 +    top: calc(var(--toast-edge) + var(--topBarBlockSize));
 +}
++
 +.popup #toast-container.toast-top-center {
 +    /* toastr in core does not have a top offset on center, so we don't do that either in popups */
 +    top: var(--topBarBlockSize);
 +}
++
 +.popup #toast-container.toast-top-right {
 +    top: calc(var(--toast-edge) + var(--topBarBlockSize));
 +}
++
 .popup-crop-wrap {
     margin: 10px auto;
     max-height: 75vh;

public/scripts/a11y.js+2 -2 Viewed

     [toolbarSelectors]: (element) => {
         element.setAttribute('role', 'toolbar');
     },
     '#toast-container .toast-message': (element) => {
         element.setAttribute('role', 'alertstatus');
     },
 };