CriptoMart/addons-cm
2
0
Fork 0
Code Issues 1 Pull requests Releases Wiki Activity

[FIX] website_sale_aplicoop: restore the floating notifications

Browse source 
Every error and confirmation popup was rendering off-screen. This addon's
CSS partials reach the page through @import, which the spec hoists above
everything else in the bundle, so an equal-specificity Bootstrap rule
always comes later and wins: .alert (0,1,0) beat .eskaera-notification
(0,1,0) on `position`, pinning the notification to `relative` and leaving
it in normal flow at the foot of <body>, below the footer. Qualifying the
selector as .alert.eskaera-notification (0,2,0) settles it without
!important; padding moves onto Bootstrap's own --alert-padding-* custom
properties, as .badge-km and .product-card > .card already do.

Present since the notification moved from a JS inline style to a class
(5de7573) — an inline style outranks any stylesheet rule, so the class
never inherited the specificity the inline style had.

Also fix the announcement while in the same helper: the urgency test read
`type === "error"`, which no caller passes (the type has to name a
Bootstrap variant, so failures arrive as "danger"), so every error was
announced politely instead of assertively.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
GitHub Copilot 2026-08-27 18:53:58 +02:00
parent 96b2e8eedd
commit a029fd9265
2 changed files with 26 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

24
website_sale_aplicoop/static/src/css/components/alerts.css
View file

@ -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 <body>, 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;
}

9
website_sale_aplicoop/static/src/js/website_sale.js
View file

@ -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 +
'<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="' +