@justeattakeaway/pie-toast-provider 1.1.7 → 1.2.0

package/dist/index.js

@@ -1,6 +1,6 @@
-import { LitElement as _, unsafeCSS as T, nothing as y, html as u } from "lit";
+import { LitElement as _, unsafeCSS as b, nothing as y, html as u } from "lit";
 import { property as h, state as g } from "lit/decorators.js";
-import { ifDefined as b } from "lit/directives/if-defined.js";
+import { ifDefined as T } from "lit/directives/if-defined.js";
 import { classMap as f } from "lit/directives/class-map.js";
 import { validPropertyValues as P, safeCustomElement as $, dispatchCustomEvent as x } from "@justeattakeaway/pie-webc-core";
 import { defaultProps as m } from "@justeattakeaway/pie-toast";
@@ -9,9 +9,9 @@ const l = class l extends _ {
     this.getAttribute("v") || this.setAttribute("v", l.v);
   }
 };
-l.v = "1.1.7";
+l.v = "1.2.0";
 let d = l;
-const A = "*,*:after,*:before{box-sizing:inherit}:root{--pie-animation-slide-translate-start: -100%}.pie-animation--slide-in{animation:pie-animation-slide-in var(--dt-motion-timing-200) var(--dt-motion-easing-out)}.pie-animation--slide-out{animation:pie-animation-slide-out var(--dt-motion-timing-100) var(--dt-motion-easing-in)}@keyframes pie-animation-slide-in{0%{transform:translate(var(--pie-animation-slide-translate-start))}to{transform:translate(0)}}@keyframes pie-animation-slide-out{0%{transform:translate(0)}to{transform:translate(var(--pie-animation-slide-translate-start))}}:host{--toast-provider-z-index: var(--dt-z-index-toast);--toast-provider-position: fixed;--toast-provider-offset: var(--dt-spacing-d)}@media(min-width:769px){:host{--toast-provider-offset: var(--dt-spacing-e)}}.c-toast-provider{position:var(--toast-provider-position);z-index:var(--toast-provider-z-index)}.c-toast-provider.c-toast-provider--default{inset-inline-start:var(--toast-provider-offset);inset-block-end:var(--toast-provider-offset)}.c-toast-provider.c-toast-provider--default:dir(rtl){--pie-animation-slide-translate-start: 100%}.c-toast-provider.c-toast-provider--bottom-left{--pie-animation-slide-translate-start: -100%;left:var(--toast-provider-offset);bottom:var(--toast-provider-offset)}.c-toast-provider.c-toast-provider--bottom-right{--pie-animation-slide-translate-start: 100%;right:var(--toast-provider-offset);bottom:var(--toast-provider-offset)}.c-toast-provider.c-toast-provider--bottom-center{--pie-animation-slide-translate-start: 0, 100%;left:50%;bottom:var(--toast-provider-offset);transform:translate(-50%)}", w = {
+const w = "*,*:after,*:before{box-sizing:inherit}:root{--pie-animation-slide-translate-start: -100%}.pie-animation--slide-in{animation:pie-animation-slide-in var(--dt-motion-timing-200) var(--dt-motion-easing-out)}.pie-animation--slide-out{animation:pie-animation-slide-out var(--dt-motion-timing-100) var(--dt-motion-easing-in)}@keyframes pie-animation-slide-in{0%{transform:translate(var(--pie-animation-slide-translate-start))}to{transform:translate(0)}}@keyframes pie-animation-slide-out{0%{transform:translate(0)}to{transform:translate(var(--pie-animation-slide-translate-start))}}:host{--toast-provider-z-index: var(--dt-z-index-toast);--toast-provider-position: fixed;--toast-provider-offset: var(--dt-spacing-d)}@media(min-width:769px){:host{--toast-provider-offset: var(--dt-spacing-e)}}.c-toast-provider{position:var(--toast-provider-position);z-index:var(--toast-provider-z-index)}.c-toast-provider-announcer{position:absolute;display:block;height:1px;width:1px;border:0;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;clip:rect(0,0,0,0);clip-path:inset(50%)}.c-toast-provider-announcer *{overflow:hidden}.c-toast-provider.c-toast-provider--default{inset-inline-start:var(--toast-provider-offset);inset-block-end:var(--toast-provider-offset)}.c-toast-provider.c-toast-provider--default:dir(rtl){--pie-animation-slide-translate-start: 100%}.c-toast-provider.c-toast-provider--bottom-left{--pie-animation-slide-translate-start: -100%;left:var(--toast-provider-offset);bottom:var(--toast-provider-offset)}.c-toast-provider.c-toast-provider--bottom-right{--pie-animation-slide-translate-start: 100%;right:var(--toast-provider-offset);bottom:var(--toast-provider-offset)}.c-toast-provider.c-toast-provider--bottom-center{--pie-animation-slide-translate-start: 0, 100%;left:50%;bottom:var(--toast-provider-offset);transform:translate(-50%)}", A = {
   "error-actionable": 1,
   error: 2,
   "warning-actionable": 3,
@@ -35,13 +35,13 @@ const A = "*,*:after,*:before{box-sizing:inherit}:root{--pie-animation-slide-tra
     for (; t; ) {
       const e = t.parentElement;
       if (e) {
-        const s = e.querySelector(":scope > pie-toast-provider");
-        if (s) return s;
+        const i = e.querySelector(":scope > pie-toast-provider");
+        if (i) return i;
       }
       t = e;
     }
-    const i = document.querySelectorAll("pie-toast-provider");
-    return i.length === 0 ? (console.error("No pie-toast-provider found in the DOM. Add a <pie-toast-provider> element to your page or at the root of your application."), null) : i.length > 1 ? (console.error("Multiple pie-toast-provider elements found. Use the `providerId` option to target a specific provider."), null) : i[0];
+    const s = document.querySelectorAll("pie-toast-provider");
+    return s.length === 0 ? (console.error("No pie-toast-provider found in the DOM. Add a <pie-toast-provider> element to your page or at the root of your application."), null) : s.length > 1 ? (console.error("Multiple pie-toast-provider elements found. Use the `providerId` option to target a specific provider."), null) : s[0];
   },
   create(o) {
     const t = this._getToastProvider(o.providerId);
@@ -52,10 +52,10 @@ const A = "*,*:after,*:before{box-sizing:inherit}:root{--pie-animation-slide-tra
     t && t.clearToasts();
   }
 };
-var D = Object.defineProperty, S = Object.getOwnPropertyDescriptor, n = (o, t, i, e) => {
-  for (var s = e > 1 ? void 0 : e ? S(t, i) : t, p = o.length - 1, a; p >= 0; p--)
-    (a = o[p]) && (s = (e ? a(t, i, s) : a(s)) || s);
-  return e && s && D(t, i, s), s;
+var D = Object.defineProperty, S = Object.getOwnPropertyDescriptor, p = (o, t, s, e) => {
+  for (var i = e > 1 ? void 0 : e ? S(t, s) : t, a = o.length - 1, n; a >= 0; a--)
+    (n = o[a]) && (i = (e ? n(t, s, i) : n(i)) || i);
+  return e && i && D(t, s, i), i;
 };
 const C = "pie-toast-provider";
 let r = class extends d {
@@ -79,8 +79,8 @@ let r = class extends d {
    * @returns {number} - The priority based on the variant and action.
    */
   getPriority(o = m.variant, t = !1) {
-    const i = `${o}${t ? "-actionable" : ""}`;
-    return w[i];
+    const s = `${o}${t ? "-actionable" : ""}`;
+    return A[s];
   }
   /**
    * Handles the dismissal of the current toast and displays the next one in the queue (if any).
@@ -107,10 +107,10 @@ let r = class extends d {
    */
   createToast(o) {
     const t = { ...m, ...this.options, ...o };
-    this._toasts = [...this._toasts, t].sort((i, e) => {
-      var a, v;
-      const s = this.getPriority(e.variant, !!((a = e.leadingAction) != null && a.text));
-      return this.getPriority(i.variant, !!((v = i.leadingAction) != null && v.text)) - s;
+    this._toasts = [...this._toasts, t].sort((s, e) => {
+      var n, v;
+      const i = this.getPriority(e.variant, !!((n = e.leadingAction) != null && n.text));
+      return this.getPriority(s.variant, !!((v = s.leadingAction) != null && v.text)) - i;
     }), this._currentToast || this._showNextToast();
   }
   /**
@@ -124,27 +124,35 @@ let r = class extends d {
     const {
       position: o,
       _currentToast: t
-    } = this, i = {
+    } = this, s = {
       "c-toast-provider": !0,
       [`c-toast-provider--${o}`]: !0
     }, e = {
       "pie-animation--slide-in": !!t,
       "pie-animation--slide-out": t === null
-    };
+    }, i = (t == null ? void 0 : t.variant) === "error", a = { ...t == null ? void 0 : t.aria, live: "off" };
     return u`
-        <div 
-            class=${f(i)}
+        <div
+            class=${f(s)}
             data-test-id="pie-toast-provider">
+            <div
+                class="c-toast-provider-announcer is-visuallyHidden"
+                role="${i ? "alert" : "status"}"
+                aria-live="${i ? "assertive" : "polite"}"
+                aria-atomic="true"
+                data-test-id="pie-toast-provider-announcer">
+                ${(t == null ? void 0 : t.message) ?? ""}
+            </div>
             ${t && u`
                 <pie-toast
                     class=${f(e)}
                     message="${t.message}"
-                    variant="${b(t.variant)}"
+                    variant="${T(t.variant)}"
                     ?isStrong="${t.isStrong}"
                     ?isDismissible="${t.isDismissible}"
                     ?isMultiline="${t.isMultiline}"
                     .leadingAction="${t.leadingAction}"
-                    .aria="${t.aria}"
+                    .aria="${a}"
                     .duration="${typeof t.duration > "u" ? y : t.duration}"
                     @pie-toast-close="${this._dismissToast}"
                     @pie-toast-open="${t.onPieToastOpen}"
@@ -155,26 +163,26 @@ let r = class extends d {
         `;
   }
 };
-r.styles = T(A);
-n([
+r.styles = b(w);
+p([
   h({ type: Object })
 ], r.prototype, "options", 2);
-n([
+p([
   h({ type: String }),
   P(C, E, c.position)
 ], r.prototype, "position", 2);
-n([
+p([
   g()
 ], r.prototype, "_toasts", 2);
-n([
+p([
   g()
 ], r.prototype, "_currentToast", 2);
-r = n([
+r = p([
   $("pie-toast-provider")
 ], r);
 export {
   O as ON_TOAST_PROVIDER_QUEUE_UPDATE_EVENT,
-  w as PRIORITY_ORDER,
+  A as PRIORITY_ORDER,
   r as PieToastProvider,
   c as defaultProps,
   E as positions,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-toast-provider",
   "description": "PIE Design System Toast Provider built using Web Components",
-  "version": "1.1.7",
+  "version": "1.2.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/justeattakeaway/pie",
@@ -42,12 +42,12 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@justeattakeaway/pie-components-config": "0.21.3",
-    "@justeattakeaway/pie-css": "1.5.0",
+    "@justeattakeaway/pie-css": "1.6.0",
     "@justeattakeaway/pie-monorepo-utils": "0.9.9"
   },
   "dependencies": {
-    "@justeattakeaway/pie-toast": "1.1.7",
-    "@justeattakeaway/pie-webc-core": "18.1.0"
+    "@justeattakeaway/pie-toast": "1.2.0",
+    "@justeattakeaway/pie-webc-core": "19.0.0"
   },
   "customElements": "custom-elements.json",
   "sideEffects": [

package/src/index.ts

@@ -140,10 +140,24 @@ export class PieToastProvider extends PieElement implements ToastProviderProps {
             'pie-animation--slide-out': _currentToast === null,
         };
 
+        const isError = _currentToast?.variant === 'error';
+
+        // The provider owns the announcement, so the rendered toast's own live region is disabled
+        // (`aria-live: off`) to prevent the message being announced twice.
+        const toastAria = { ..._currentToast?.aria, live: 'off' as const };
+
         return html`
-        <div 
+        <div
             class=${classMap(classes)}
             data-test-id="pie-toast-provider">
+            <div
+                class="c-toast-provider-announcer is-visuallyHidden"
+                role="${isError ? 'alert' : 'status'}"
+                aria-live="${isError ? 'assertive' : 'polite'}"
+                aria-atomic="true"
+                data-test-id="pie-toast-provider-announcer">
+                ${_currentToast?.message ?? ''}
+            </div>
             ${_currentToast &&
             html`
                 <pie-toast
@@ -154,7 +168,7 @@ export class PieToastProvider extends PieElement implements ToastProviderProps {
                     ?isDismissible="${_currentToast.isDismissible}"
                     ?isMultiline="${_currentToast.isMultiline}"
                     .leadingAction="${_currentToast.leadingAction}"
-                    .aria="${_currentToast.aria}"
+                    .aria="${toastAria}"
                     .duration="${typeof _currentToast.duration === 'undefined' ? nothing : _currentToast.duration}"
                     @pie-toast-close="${this._dismissToast}"
                     @pie-toast-open="${_currentToast.onPieToastOpen}"

package/src/toast-provider.scss

@@ -16,6 +16,10 @@
     position: var(--toast-provider-position);
     z-index: var(--toast-provider-z-index);
 
+    &-announcer {
+        @include p.visually-hidden;
+    }
+
     &.c-toast-provider--default {
         inset-inline-start: var(--toast-provider-offset);
         inset-block-end: var(--toast-provider-offset);