diff --git a/website_sale_aplicoop/static/src/css/components/alerts.css b/website_sale_aplicoop/static/src/css/components/alerts.css index bb11925..574bac4 100644 --- a/website_sale_aplicoop/static/src/css/components/alerts.css +++ b/website_sale_aplicoop/static/src/css/components/alerts.css @@ -77,22 +77,36 @@ /* ---------- Floating notification (_showNotification) ---------- */ -/* Was a 200-character inline style written from JS on every call. */ -.eskaera-notification { +/* Was a 200-character inline style written from JS on every call. + * + * The `.alert` qualifier is load-bearing, not decoration. This addon's + * partials reach the page through @import, which the CSS spec hoists above + * every other rule in the bundle — so an equal-specificity Bootstrap rule + * always comes later and wins. `.alert` (0,1,0) therefore beat a bare + * `.eskaera-notification` (0,1,0) on `position`, pinning the toast to + * `relative` and leaving it in normal flow at the foot of , below the + * footer: every error and confirmation rendered off-screen. `.alert + * .eskaera-notification` (0,2,0) settles it without !important. + * + * `.fade` does the same to `transition`, and `.alert` to `padding` — which + * rides on Bootstrap's own custom properties here, as .badge-km and + * .product-card > .card already do. */ +.alert.eskaera-notification { + --alert-padding-x: var(--ac-space-lg); + --alert-padding-y: var(--ac-space-lg); position: fixed; top: 5rem; right: var(--ac-space-md); z-index: var(--ac-z-notification); min-width: 18.75rem; max-width: 31.25rem; - padding: var(--ac-space-lg); font-size: var(--ac-text-md); box-shadow: var(--ac-shadow-lg); transition: opacity var(--ac-transition-normal); } @media (max-width: 576px) { - .eskaera-notification { + .alert.eskaera-notification { left: var(--ac-space-md); right: var(--ac-space-md); min-width: 0; @@ -101,7 +115,7 @@ @media (prefers-reduced-motion: reduce) { .toast-notification, - .eskaera-notification { + .alert.eskaera-notification { transition: none; } diff --git a/website_sale_aplicoop/static/src/js/website_sale.js b/website_sale_aplicoop/static/src/js/website_sale.js index 10eb073..9978fc3 100644 --- a/website_sale_aplicoop/static/src/js/website_sale.js +++ b/website_sale_aplicoop/static/src/js/website_sale.js @@ -738,8 +738,13 @@ "alert alert-" + type + " alert-dismissible fade show eskaera-notification"; // Announce it: errors and warnings are the whole point of this helper, // and without a live role a screen reader never hears them. - notification.setAttribute("role", type === "error" ? "alert" : "status"); - notification.setAttribute("aria-live", type === "error" ? "assertive" : "polite"); + // The test was `type === "error"`, which no caller ever passes — the + // class has to name a Bootstrap variant, so failures come through as + // "danger". Every error was therefore announced politely, i.e. queued + // behind whatever the screen reader was already saying. + var isUrgent = type === "danger" || type === "warning"; + notification.setAttribute("role", isUrgent ? "alert" : "status"); + notification.setAttribute("aria-live", isUrgent ? "assertive" : "polite"); notification.innerHTML = message + '