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: 100dvh;
+    --toast-edge: 12px;
-    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) => {
+    '#toast-container .toast': (element) => {
-        element.setAttribute('role', 'alert');
+        element.setAttribute('role', 'status');
     },
 };