@justeattakeaway/pie-notification 0.6.1 → 0.8.0

package/custom-elements.json

@@ -217,7 +217,7 @@
               "kind": "field",
               "name": "heading",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
               "privacy": "public",
               "attribute": "heading"
@@ -261,6 +261,15 @@
               "privacy": "public",
               "attribute": "hasStackedActions"
             },
+            {
+              "kind": "field",
+              "name": "aria",
+              "type": {
+                "text": "NotificationProps['aria']"
+              },
+              "privacy": "public",
+              "attribute": "aria"
+            },
             {
               "kind": "field",
               "name": "_iconSlot",
@@ -536,7 +545,7 @@
             {
               "name": "heading",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
               "fieldName": "heading"
             },
@@ -568,6 +577,13 @@
             {
               "name": "hasStackedActions",
               "fieldName": "hasStackedActions"
+            },
+            {
+              "name": "aria",
+              "type": {
+                "text": "NotificationProps['aria']"
+              },
+              "fieldName": "aria"
             }
           ],
           "superclass": {

package/dist/index.d.ts

@@ -16,6 +16,11 @@ export declare type ActionProps = {
     ariaLabel?: string;
 };
 
+export declare type AriaProps = {
+    close?: string;
+    label?: string;
+};
+
 export declare const componentClass = "c-notification";
 
 export declare const componentSelector = "pie-notification";
@@ -28,11 +33,11 @@ export declare const headingLevels: readonly ["h2", "h3", "h4", "h5", "h6"];
 
 export declare interface NotificationProps {
     /**
-     * Set the variant of the notification.
+     * Sets the variant of the notification.
      */
     variant?: typeof variants[number];
     /**
-     * The position of the notification defining proper styles if the component appear within the content or at the top of the interface.
+     * Defines the proper styles, whether the component appears within the content or at the top of the interface
      */
     position?: typeof positions[number];
     /**
@@ -40,7 +45,7 @@ export declare interface NotificationProps {
      */
     isDismissible?: boolean;
     /**
-     * When true, the footer aligns to the header and icons which makes the component compact.
+     * When true, aligns the footer with the header and icons, making the component compact.
      */
     isCompact?: boolean;
     /**
@@ -52,7 +57,7 @@ export declare interface NotificationProps {
      */
     headingLevel?: typeof headingLevels[number];
     /**
-     * Option to hide the icon regardless its variant or if user provided an icon.
+     * When true, the icon will be hidden.
      */
     hideIcon?: boolean;
     /**
@@ -68,9 +73,14 @@ export declare interface NotificationProps {
      */
     supportingAction?: ActionProps;
     /**
-     * When true, the notification will stack the action buttons on narrow screens.
+     * When true, action buttons will stack on narrow screens.
      */
     hasStackedActions?: boolean;
+    /**
+     * The ARIA labels used for various parts of the notification.
+     * Only pass label if there is no heading to ensure the region is announced with a title
+     */
+    aria?: AriaProps;
 }
 
 /**
@@ -114,12 +124,13 @@ export declare class PieNotification extends LitElement implements NotificationP
     position: NonNullable<NotificationProps['position']>;
     isDismissible: boolean;
     isCompact: boolean;
-    heading: string;
+    heading?: string;
     headingLevel: NonNullable<NotificationProps['headingLevel']>;
     hideIcon: boolean;
     leadingAction: NotificationProps['leadingAction'];
     supportingAction: NotificationProps['supportingAction'];
     hasStackedActions: boolean;
+    aria: NotificationProps['aria'];
     _iconSlot: Array<HTMLElement>;
     protected _hasExternalIcon: boolean;
     protected _hasIconClass: boolean;
@@ -132,7 +143,6 @@ export declare class PieNotification extends LitElement implements NotificationP
     /**
      * Lifecycle method executed when component is updated.
      * It dispatches an event if notification is opened.
-     * It applies a gutter if there's no heading content in order to avoid the close button overlap the content.
      */
     protected updated(_changedProperties: PropertyValues<this>): void;
     /**

package/dist/index.js

@@ -1,7 +1,8 @@
-import { unsafeCSS as O, LitElement as x, nothing as c } from "lit";
-import { html as d, unsafeStatic as E } from "lit/static-html.js";
-import { validPropertyValues as v, defineCustomElement as k, dispatchCustomEvent as g } from "@justeattakeaway/pie-webc-core";
-import { property as l, queryAssignedElements as w, state as $ } from "lit/decorators.js";
+import { unsafeCSS as E, LitElement as k, nothing as c } from "lit";
+import { html as d, unsafeStatic as w } from "lit/static-html.js";
+import { validPropertyValues as m, defineCustomElement as A, dispatchCustomEvent as v } from "@justeattakeaway/pie-webc-core";
+import { property as r, queryAssignedElements as z, state as C } from "lit/decorators.js";
+import { ifDefined as I } from "lit/directives/if-defined.js";
 import "@justeattakeaway/pie-button";
 import "@justeattakeaway/pie-icon-button";
 import "@justeattakeaway/pie-icons-webc/dist/IconAlertCircle.js";
@@ -9,7 +10,7 @@ import "@justeattakeaway/pie-icons-webc/dist/IconAlertTriangle.js";
 import "@justeattakeaway/pie-icons-webc/dist/IconCheckCircle.js";
 import "@justeattakeaway/pie-icons-webc/dist/IconClose.js";
 import "@justeattakeaway/pie-icons-webc/dist/IconInfoCircle.js";
-const A = ["neutral", "neutral-alternative", "info", "success", "warning", "error"], z = ["h2", "h3", "h4", "h5", "h6"], S = ["inline-content", "full-width"], o = "pie-notification", h = "c-notification", D = `${o}-close`, V = `${o}-open`, T = `${o}-leading-action-click`, B = `${o}-supporting-action-click`, r = {
+const S = ["neutral", "neutral-alternative", "info", "success", "warning", "error"], D = ["h2", "h3", "h4", "h5", "h6"], V = ["inline-content", "full-width"], t = "pie-notification", h = "c-notification", T = `${t}-close`, B = `${t}-open`, L = `${t}-leading-action-click`, P = `${t}-supporting-action-click`, l = {
   isOpen: !0,
   variant: "neutral",
   position: "inline-content",
@@ -18,16 +19,16 @@ const A = ["neutral", "neutral-alternative", "info", "success", "warning", "erro
   headingLevel: "h2",
   hideIcon: !1,
   hasStackedActions: !1
-}, L = `*,*:after,*:before{box-sizing:inherit}.c-notification{--notification-border-radius: var(--dt-radius-rounded-c);--notification-background-color: var(--dt-color-container-subtle);--notification-direction: column;--notification-heading-font-size: calc(var(--dt-font-heading-s-size--narrow) * 1px);--notification-heading-line-height: calc(var(--dt-font-heading-s-line-height--narrow) * 1px);--notification-font-size: calc(var(--dt-font-body-l-size) * 1px);--notification-line-height: calc(var(--dt-font-body-l-line-height) * 1px);--notification-icon-fill: var(--dt-color-content-default);--notification-close-icon-offset: var(--dt-spacing-b);--notification-heading-icon-offset: 2px;padding:var(--dt-spacing-d);border-radius:var(--notification-border-radius);background-color:var(--notification-background-color);position:relative;display:flex;flex-direction:var(--notification-direction);gap:var(--dt-spacing-d);font-size:var(--notification-font-size);line-height:var(--notification-line-height)}.c-notification[isCompact]{--notification-direction: row}.c-notification[position=full-width]{--notification-border-radius: var(--dt-radius-rounded-none)}.c-notification[variant=neutral-alternative]{--notification-background-color: var(--dt-color-container-default)}.c-notification[variant=info]{--notification-background-color: var(--dt-color-support-info-02);--notification-icon-fill: var(--dt-color-blue)}.c-notification[variant=success]{--notification-background-color: var(--dt-color-support-positive-02)}.c-notification[variant=warning]{--notification-background-color: var(--dt-color-support-warning-02)}.c-notification[variant=error]{--notification-background-color: var(--dt-color-support-error-02);--notification-icon-fill: var(--dt-color-red)}.c-notification-heading{margin:0;margin-block-end:var(--dt-spacing-a);font-size:var(--notification-heading-font-size);line-height:var(--notification-heading-line-height)}@media (min-width: 768px){.c-notification-heading{--notification-heading-font-size: calc(var(--dt-font-heading-s-size--wide) * 1px);--notification-heading-line-height: calc(var(--dt-font-heading-s-line-height--wide) * 1px)}}.c-notification-content-section{display:flex;flex-direction:row}.c-notification-content-section .has-icon{display:block ruby;margin-inline-end:var(--dt-spacing-c)}.c-notification-content-section[isDismissible]{max-width:calc(100% - var(--notification-close-icon-offset) - 40px)}.c-notification-heading-icon{padding-block-start:var(--notification-heading-icon-offset);color:var(--notification-icon-fill)}.c-notification-icon-close{position:absolute;inset-block-start:var(--notification-close-icon-offset);inset-inline-end:var(--notification-close-icon-offset)}.c-notification-footer{display:flex;flex-direction:row;justify-content:flex-end;gap:var(--dt-spacing-d)}.c-notification-footer[isCompact]{align-self:flex-end}@media (max-width: 768px){.c-notification-footer[isStacked]{flex-direction:column-reverse}}
+}, F = `*,*:after,*:before{box-sizing:inherit}.c-notification{--notification-border-radius: var(--dt-radius-rounded-c);--notification-background-color: var(--dt-color-container-subtle);--notification-direction: column;--notification-heading-font-size: calc(var(--dt-font-heading-s-size--narrow) * 1px);--notification-heading-line-height: calc(var(--dt-font-heading-s-line-height--narrow) * 1px);--notification-font-size: calc(var(--dt-font-body-l-size) * 1px);--notification-line-height: calc(var(--dt-font-body-l-line-height) * 1px);--notification-icon-fill: var(--dt-color-content-default);--notification-close-icon-offset: var(--dt-spacing-b);--notification-heading-icon-offset: 2px;padding:var(--dt-spacing-d);border-radius:var(--notification-border-radius);background-color:var(--notification-background-color);position:relative;display:flex;flex-direction:var(--notification-direction);gap:var(--dt-spacing-d);font-size:var(--notification-font-size);line-height:var(--notification-line-height)}.c-notification[isCompact]{--notification-direction: row}.c-notification[position=full-width]{--notification-border-radius: var(--dt-radius-rounded-none)}.c-notification[variant=neutral-alternative]{--notification-background-color: var(--dt-color-container-default)}.c-notification[variant=info]{--notification-background-color: var(--dt-color-support-info-02);--notification-icon-fill: var(--dt-color-blue)}.c-notification[variant=success]{--notification-background-color: var(--dt-color-support-positive-02)}.c-notification[variant=warning]{--notification-background-color: var(--dt-color-support-warning-02)}.c-notification[variant=error]{--notification-background-color: var(--dt-color-support-error-02);--notification-icon-fill: var(--dt-color-red)}.c-notification-heading{margin:0;margin-block-end:var(--dt-spacing-a);font-size:var(--notification-heading-font-size);line-height:var(--notification-heading-line-height)}@media (min-width: 768px){.c-notification-heading{--notification-heading-font-size: calc(var(--dt-font-heading-s-size--wide) * 1px);--notification-heading-line-height: calc(var(--dt-font-heading-s-line-height--wide) * 1px)}}.c-notification-content-section{display:flex;flex-direction:row}.c-notification-content-section .has-icon{display:block ruby;margin-inline-end:var(--dt-spacing-c)}.c-notification-content-section[isDismissible]{max-width:calc(100% - var(--notification-close-icon-offset) - 40px)}.c-notification-heading-icon{padding-block-start:var(--notification-heading-icon-offset);color:var(--notification-icon-fill)}.c-notification-icon-close{position:absolute;inset-block-start:var(--notification-close-icon-offset);inset-inline-end:var(--notification-close-icon-offset)}.c-notification-footer{display:flex;flex-direction:row;justify-content:flex-end;gap:var(--dt-spacing-d)}.c-notification-footer[isCompact]{align-self:flex-end}@media (max-width: 768px){.c-notification-footer[isStacked]{flex-direction:column-reverse}}
 `;
-var P = Object.defineProperty, F = Object.getOwnPropertyDescriptor, e = (u, i, t, a) => {
-  for (var s = a > 1 ? void 0 : a ? F(i, t) : i, f = u.length - 1, p; f >= 0; f--)
-    (p = u[f]) && (s = (a ? p(i, t, s) : p(s)) || s);
-  return a && s && P(i, t, s), s;
+var j = Object.defineProperty, H = Object.getOwnPropertyDescriptor, e = (u, i, o, a) => {
+  for (var s = a > 1 ? void 0 : a ? H(i, o) : i, f = u.length - 1, p; f >= 0; f--)
+    (p = u[f]) && (s = (a ? p(i, o, s) : p(s)) || s);
+  return a && s && j(i, o, s), s;
 };
-class n extends x {
+class n extends k {
   constructor() {
-    super(...arguments), this.isOpen = r.isOpen, this.variant = r.variant, this.position = r.position, this.isDismissible = r.isDismissible, this.isCompact = r.isCompact, this.headingLevel = r.headingLevel, this.hideIcon = r.hideIcon, this.hasStackedActions = r.hasStackedActions, this._hasExternalIcon = !1, this._hasIconClass = !1;
+    super(...arguments), this.isOpen = l.isOpen, this.variant = l.variant, this.position = l.position, this.isDismissible = l.isDismissible, this.isCompact = l.isCompact, this.headingLevel = l.headingLevel, this.hideIcon = l.hideIcon, this.hasStackedActions = l.hasStackedActions, this._hasExternalIcon = !1, this._hasIconClass = !1;
   }
   /**
    * Lifecycle method executed when component is about to update.
@@ -39,10 +40,9 @@ class n extends x {
   /**
    * Lifecycle method executed when component is updated.
    * It dispatches an event if notification is opened.
-   * It applies a gutter if there's no heading content in order to avoid the close button overlap the content.
    */
   updated(i) {
-    i.has("isOpen") && this.isOpen && g(this, V, { targetNotification: this });
+    i.has("isOpen") && this.isOpen && v(this, B, { targetNotification: this });
   }
   /**
    * Method responsible to check if an external icon has been provided.
@@ -59,10 +59,10 @@ class n extends x {
    *
    * @private
    */
-  renderFooter(i, t) {
+  renderFooter(i, o) {
     return d`
-            <footer class="${h}-footer" data-test-id="${o}-footer" ?isCompact="${this.isCompact}" ?isStacked="${this.hasStackedActions && !this.isCompact}">
-                ${t ? this.renderActionButton(t, "supporting") : c}
+            <footer class="${h}-footer" data-test-id="${t}-footer" ?isCompact="${this.isCompact}" ?isStacked="${this.hasStackedActions && !this.isCompact}">
+                ${o ? this.renderActionButton(o, "supporting") : c}
                 ${i ? this.renderActionButton(i, "leading") : c}
             </footer>
         `;
@@ -76,8 +76,13 @@ class n extends x {
    *
    * @private
    */
-  renderNotificationHeading(i, t) {
-    return d`<${t} class="${h}-heading" data-test-id="${o}-heading">${i}</${t}>`;
+  renderNotificationHeading(i, o) {
+    return d`<${o}
+                        id="${t}-heading"
+                        class="${h}-heading"
+                        data-test-id="${t}-heading">
+                            ${i}
+                    </${o}>`;
   }
   /**
    * Util method that returns a boolean if variant has a default icon.
@@ -99,13 +104,13 @@ class n extends x {
   getDefaultVariantIcon(i) {
     switch (i) {
       case "info":
-        return d`<icon-info-circle size="m" data-test-id="${o}-heading-icon-info"></icon-info-circle>`;
+        return d`<icon-info-circle size="m" data-test-id="${t}-heading-icon-info"></icon-info-circle>`;
       case "success":
-        return d`<icon-check-circle size="m" data-test-id="${o}-heading-icon-success"></icon-check-circle>`;
+        return d`<icon-check-circle size="m" data-test-id="${t}-heading-icon-success"></icon-check-circle>`;
       case "warning":
-        return d`<icon-alert-triangle size="m" data-test-id="${o}-heading-icon-warning"></icon-alert-triangle>`;
+        return d`<icon-alert-triangle size="m" data-test-id="${t}-heading-icon-warning"></icon-alert-triangle>`;
       case "error":
-        return d`<icon-alert-circle size="m" data-test-id="${o}-heading-icon-error"></icon-alert-circle>`;
+        return d`<icon-alert-circle size="m" data-test-id="${t}-heading-icon-error"></icon-alert-circle>`;
       default:
         return c;
     }
@@ -131,10 +136,10 @@ class n extends x {
    *
    * @private
    */
-  renderIcon(i, t, a) {
+  renderIcon(i, o, a) {
     return d`
-            <div data-test-id="${o}-icon-area" class="${a ? "has-icon " : ""}${h}-heading-icon">
-                ${t ? c : this.renderIconVariant(i)}
+            <div data-test-id="${t}-icon-area" class="${a ? "has-icon " : ""}${h}-heading-icon">
+                ${o ? c : this.renderIconVariant(i)}
                 <slot name="icon"></slot>
             </div>
         `;
@@ -146,13 +151,15 @@ class n extends x {
    * @private
    */
   renderCloseButton() {
+    var i;
     return d`
             <pie-icon-button
                 variant="ghost-secondary"
                 size="small"
                 class="${h}-icon-close"
-                data-test-id="${o}-icon-close"
+                data-test-id="${t}-icon-close"
                 @click="${this.handleCloseButton}"
+                aria-label="${I((i = this.aria) == null ? void 0 : i.close)}"
                 >
                 <icon-close></icon-close>
             </pie-icon-button>`;
@@ -164,7 +171,7 @@ class n extends x {
    * @private
    */
   handleCloseButton() {
-    this.closeNotificationComponent(), g(this, D, { targetNotification: this });
+    this.closeNotificationComponent(), v(this, T, { targetNotification: this });
   }
   /**
    * Util method responsible to close the component.
@@ -183,7 +190,7 @@ class n extends x {
    * @private
    */
   handleActionClick(i) {
-    g(this, i === "leading" ? T : B, { targetNotification: this });
+    v(this, i === "leading" ? L : P, { targetNotification: this });
   }
   /**
    * Render the action button depending on action type and its action.
@@ -194,15 +201,15 @@ class n extends x {
    * @returns {TemplateResult | typeof nothing} - The rendered action button or nothing if the action text is not defined.
    * @private
    */
-  renderActionButton(i, t) {
+  renderActionButton(i, o) {
     const { text: a, ariaLabel: s } = i;
     return a ? d`
             <pie-button
-                variant="${t === "leading" ? "primary" : "ghost"}"
+                variant="${o === "leading" ? "primary" : "ghost"}"
                 size="small-productive"
                 aria-label="${s || c}"
-                @click="${() => this.handleActionClick(t)}"
-                data-test-id="${o}-${t}-action"
+                @click="${() => this.handleActionClick(o)}"
+                data-test-id="${t}-${o}-action"
                 ?isFullWidth="${this.hasStackedActions}"
                 type="button">
                 ${a}
@@ -212,99 +219,107 @@ class n extends x {
   render() {
     const {
       variant: i,
-      position: t,
+      position: o,
       heading: a,
       headingLevel: s,
       isDismissible: f,
       isCompact: p,
-      _hasExternalIcon: I,
-      hideIcon: C,
-      _hasIconClass: y,
-      leadingAction: m,
-      supportingAction: _,
-      isOpen: N
+      _hasExternalIcon: y,
+      hideIcon: _,
+      _hasIconClass: O,
+      leadingAction: b,
+      supportingAction: N,
+      isOpen: x,
+      aria: g
     } = this;
-    if (!N)
+    if (!x)
       return c;
-    const b = f && !p;
+    const $ = f && !p;
     return d`
             <div
-                data-test-id="${o}"
+                data-test-id="${t}"
                 class="${h}"
                 variant="${i}"
-                position="${t}"
-                ?isCompact="${p}">
-                ${b ? this.renderCloseButton() : c}
+                position="${o}"
+                ?isCompact="${p}"
+                role="region"
+                aria-live="${i === "error" ? "assertive" : "polite"}"
+                aria-labelledby="${a ? `${t}-heading` : c}"
+                aria-label="${!a && I(g == null ? void 0 : g.label)}">
+                ${$ ? this.renderCloseButton() : c}
 
-                <section class="${h}-content-section" ?isDismissible="${b}">
-                    ${C ? c : this.renderIcon(i, I, y)}
+                <section class="${h}-content-section" ?isDismissible="${$}">
+                    ${_ ? c : this.renderIcon(i, y, O)}
                     <article>
-                        ${a ? this.renderNotificationHeading(a, E(s)) : c}
+                        ${a ? this.renderNotificationHeading(a, w(s)) : c}
                         <slot></slot>
                     </article>
                 </section>
 
-                ${m ? this.renderFooter(m, _) : c}
+                ${b ? this.renderFooter(b, N) : c}
             </div>`;
   }
 }
-n.styles = O(L);
+n.styles = E(F);
 e([
-  l({ type: Boolean })
+  r({ type: Boolean })
 ], n.prototype, "isOpen", 2);
 e([
-  l(),
-  v(o, A, r.variant)
+  r(),
+  m(t, S, l.variant)
 ], n.prototype, "variant", 2);
 e([
-  l(),
-  v(o, S, r.position)
+  r(),
+  m(t, V, l.position)
 ], n.prototype, "position", 2);
 e([
-  l({ type: Boolean })
+  r({ type: Boolean })
 ], n.prototype, "isDismissible", 2);
 e([
-  l({ type: Boolean })
+  r({ type: Boolean })
 ], n.prototype, "isCompact", 2);
 e([
-  l({ type: String })
+  r({ type: String })
 ], n.prototype, "heading", 2);
 e([
-  l(),
-  v(o, z, r.headingLevel)
+  r(),
+  m(t, D, l.headingLevel)
 ], n.prototype, "headingLevel", 2);
 e([
-  l({ type: Boolean })
+  r({ type: Boolean })
 ], n.prototype, "hideIcon", 2);
 e([
-  l({ type: Object })
+  r({ type: Object })
 ], n.prototype, "leadingAction", 2);
 e([
-  l({ type: Object })
+  r({ type: Object })
 ], n.prototype, "supportingAction", 2);
 e([
-  l({ type: Boolean })
+  r({ type: Boolean })
 ], n.prototype, "hasStackedActions", 2);
 e([
-  w({ slot: "icon" })
+  r({ type: Object })
+], n.prototype, "aria", 2);
+e([
+  z({ slot: "icon" })
 ], n.prototype, "_iconSlot", 2);
 e([
-  $()
+  C()
 ], n.prototype, "_hasExternalIcon", 2);
 e([
-  $()
+  C()
 ], n.prototype, "_hasIconClass", 2);
-k(o, n);
+A(t, n);
 export {
-  D as ON_NOTIFICATION_CLOSE_EVENT,
-  T as ON_NOTIFICATION_LEADING_ACTION_CLICK_EVENT,
-  V as ON_NOTIFICATION_OPEN_EVENT,
-  B as ON_NOTIFICATION_SUPPORTING_ACTION_CLICK_EVENT,
+  T as ON_NOTIFICATION_CLOSE_EVENT,
+  L as ON_NOTIFICATION_LEADING_ACTION_CLICK_EVENT,
+  B as ON_NOTIFICATION_OPEN_EVENT,
+  P as ON_NOTIFICATION_SUPPORTING_ACTION_CLICK_EVENT,
   n as PieNotification,
   h as componentClass,
-  o as componentSelector,
-  r as defaultProps,
-  z as headingLevels,
-  S as positions,
-  A as variants
+  t as componentSelector,
+  l as defaultProps,
+  D as headingLevels,
+  V as positions,
+  S as variants
 };

package/dist/react.d.ts

@@ -17,6 +17,11 @@ export declare type ActionProps = {
     ariaLabel?: string;
 };
 
+export declare type AriaProps = {
+    close?: string;
+    label?: string;
+};
+
 export declare const componentClass = "c-notification";
 
 export declare const componentSelector = "pie-notification";
@@ -29,11 +34,11 @@ export declare const headingLevels: readonly ["h2", "h3", "h4", "h5", "h6"];
 
 export declare interface NotificationProps {
     /**
-     * Set the variant of the notification.
+     * Sets the variant of the notification.
      */
     variant?: typeof variants[number];
     /**
-     * The position of the notification defining proper styles if the component appear within the content or at the top of the interface.
+     * Defines the proper styles, whether the component appears within the content or at the top of the interface
      */
     position?: typeof positions[number];
     /**
@@ -41,7 +46,7 @@ export declare interface NotificationProps {
      */
     isDismissible?: boolean;
     /**
-     * When true, the footer aligns to the header and icons which makes the component compact.
+     * When true, aligns the footer with the header and icons, making the component compact.
      */
     isCompact?: boolean;
     /**
@@ -53,7 +58,7 @@ export declare interface NotificationProps {
      */
     headingLevel?: typeof headingLevels[number];
     /**
-     * Option to hide the icon regardless its variant or if user provided an icon.
+     * When true, the icon will be hidden.
      */
     hideIcon?: boolean;
     /**
@@ -69,9 +74,14 @@ export declare interface NotificationProps {
      */
     supportingAction?: ActionProps;
     /**
-     * When true, the notification will stack the action buttons on narrow screens.
+     * When true, action buttons will stack on narrow screens.
      */
     hasStackedActions?: boolean;
+    /**
+     * The ARIA labels used for various parts of the notification.
+     * Only pass label if there is no heading to ensure the region is announced with a title
+     */
+    aria?: AriaProps;
 }
 
 /**
@@ -117,12 +127,13 @@ declare class PieNotification_2 extends LitElement implements NotificationProps
     position: NonNullable<NotificationProps['position']>;
     isDismissible: boolean;
     isCompact: boolean;
-    heading: string;
+    heading?: string;
     headingLevel: NonNullable<NotificationProps['headingLevel']>;
     hideIcon: boolean;
     leadingAction: NotificationProps['leadingAction'];
     supportingAction: NotificationProps['supportingAction'];
     hasStackedActions: boolean;
+    aria: NotificationProps['aria'];
     _iconSlot: Array<HTMLElement>;
     protected _hasExternalIcon: boolean;
     protected _hasIconClass: boolean;
@@ -135,7 +146,6 @@ declare class PieNotification_2 extends LitElement implements NotificationProps
     /**
      * Lifecycle method executed when component is updated.
      * It dispatches an event if notification is opened.
-     * It applies a gutter if there's no heading content in order to avoid the close button overlap the content.
      */
     protected updated(_changedProperties: PropertyValues<this>): void;
     /**

package/dist/react.js

@@ -1,11 +1,12 @@
 import * as i from "react";
 import { createComponent as o } from "@lit/react";
 import { PieNotification as t } from "./index.js";
-import { ON_NOTIFICATION_CLOSE_EVENT as E, ON_NOTIFICATION_LEADING_ACTION_CLICK_EVENT as A, ON_NOTIFICATION_OPEN_EVENT as g, ON_NOTIFICATION_SUPPORTING_ACTION_CLICK_EVENT as L, componentClass as d, componentSelector as k, defaultProps as F, headingLevels as S, positions as V, variants as u } from "./index.js";
+import { ON_NOTIFICATION_CLOSE_EVENT as A, ON_NOTIFICATION_LEADING_ACTION_CLICK_EVENT as g, ON_NOTIFICATION_OPEN_EVENT as L, ON_NOTIFICATION_SUPPORTING_ACTION_CLICK_EVENT as d, componentClass as k, componentSelector as F, defaultProps as S, headingLevels as V, positions as u, variants as v } from "./index.js";
 import "lit";
 import "lit/static-html.js";
 import "@justeattakeaway/pie-webc-core";
 import "lit/decorators.js";
+import "lit/directives/if-defined.js";
 import "@justeattakeaway/pie-button";
 import "@justeattakeaway/pie-icon-button";
 import "@justeattakeaway/pie-icons-webc/dist/IconAlertCircle.js";
@@ -28,17 +29,17 @@ const n = o({
     onPieNotificationOpen: "pie-notification-open"
     // When the notification is opened.
   }
-}), T = n;
+}), l = n;
 export {
-  E as ON_NOTIFICATION_CLOSE_EVENT,
-  A as ON_NOTIFICATION_LEADING_ACTION_CLICK_EVENT,
-  g as ON_NOTIFICATION_OPEN_EVENT,
-  L as ON_NOTIFICATION_SUPPORTING_ACTION_CLICK_EVENT,
-  T as PieNotification,
-  d as componentClass,
-  k as componentSelector,
-  F as defaultProps,
-  S as headingLevels,
-  V as positions,
-  u as variants
+  A as ON_NOTIFICATION_CLOSE_EVENT,
+  g as ON_NOTIFICATION_LEADING_ACTION_CLICK_EVENT,
+  L as ON_NOTIFICATION_OPEN_EVENT,
+  d as ON_NOTIFICATION_SUPPORTING_ACTION_CLICK_EVENT,
+  l as PieNotification,
+  k as componentClass,
+  F as componentSelector,
+  S as defaultProps,
+  V as headingLevels,
+  u as positions,
+  v as variants
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@justeattakeaway/pie-notification",
   "description": "PIE Design System Notification built using Web Components",
-  "version": "0.6.1",
+  "version": "0.8.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/defs.ts

@@ -4,6 +4,11 @@ export const variants = ['neutral', 'neutral-alternative', 'info', 'success', 'w
 export const headingLevels = ['h2', 'h3', 'h4', 'h5', 'h6'] as const;
 export const positions = ['inline-content', 'full-width'] as const;
 
+export type AriaProps = {
+  close?: string;
+  label?: string;
+};
+
 export type ActionProps = {
   /**
    * The text to display inside the button.
@@ -18,12 +23,12 @@ export type ActionProps = {
 
 export interface NotificationProps {
   /**
-   * Set the variant of the notification.
+   * Sets the variant of the notification.
    */
   variant?: typeof variants[number];
 
   /**
-   * The position of the notification defining proper styles if the component appear within the content or at the top of the interface.
+   * Defines the proper styles, whether the component appears within the content or at the top of the interface
    */
   position?: typeof positions[number];
 
@@ -33,7 +38,7 @@ export interface NotificationProps {
   isDismissible?: boolean;
 
   /**
-   * When true, the footer aligns to the header and icons which makes the component compact.
+   * When true, aligns the footer with the header and icons, making the component compact.
    */
   isCompact?: boolean;
 
@@ -48,7 +53,7 @@ export interface NotificationProps {
   headingLevel?: typeof headingLevels[number];
 
   /**
-   * Option to hide the icon regardless its variant or if user provided an icon.
+   * When true, the icon will be hidden.
    */
   hideIcon?: boolean;
 
@@ -68,9 +73,15 @@ export interface NotificationProps {
   supportingAction?: ActionProps;
 
   /**
-   * When true, the notification will stack the action buttons on narrow screens.
+   * When true, action buttons will stack on narrow screens.
    */
   hasStackedActions?: boolean;
+
+  /**
+    * The ARIA labels used for various parts of the notification.
+    * Only pass label if there is no heading to ensure the region is announced with a title
+    */
+  aria?: AriaProps;
 }
 
 export const componentSelector = 'pie-notification';

package/src/index.ts

@@ -8,6 +8,7 @@ import {
 import { type StaticValue, html, unsafeStatic } from 'lit/static-html.js';
 import { defineCustomElement, validPropertyValues, dispatchCustomEvent } from '@justeattakeaway/pie-webc-core';
 import { property, queryAssignedElements, state } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import {
     type NotificationProps,
     type ActionProps,
@@ -61,7 +62,7 @@ export class PieNotification extends LitElement implements NotificationProps {
     public isCompact = defaultProps.isCompact;
 
     @property({ type: String })
-    public heading!: string;
+    public heading?: string;
 
     @property()
     @validPropertyValues(componentSelector, headingLevels, defaultProps.headingLevel)
@@ -79,6 +80,9 @@ export class PieNotification extends LitElement implements NotificationProps {
     @property({ type: Boolean })
     public hasStackedActions = defaultProps.hasStackedActions;
 
+    @property({ type: Object })
+    public aria: NotificationProps['aria'];
+
     @queryAssignedElements({ slot: 'icon' }) _iconSlot!: Array<HTMLElement>;
 
     @state()
@@ -103,7 +107,6 @@ export class PieNotification extends LitElement implements NotificationProps {
     /**
      * Lifecycle method executed when component is updated.
      * It dispatches an event if notification is opened.
-     * It applies a gutter if there's no heading content in order to avoid the close button overlap the content.
      */
     protected updated (_changedProperties: PropertyValues<this>): void {
         if (_changedProperties.has('isOpen') && this.isOpen) {
@@ -147,7 +150,12 @@ export class PieNotification extends LitElement implements NotificationProps {
      * @private
      */
     private renderNotificationHeading (heading: NotificationProps['heading'], headingTag: StaticValue): TemplateResult {
-        return html`<${headingTag} class="${componentClass}-heading" data-test-id="${componentSelector}-heading">${heading}</${headingTag}>`;
+        return html`<${headingTag}
+                        id="${componentSelector}-heading"
+                        class="${componentClass}-heading"
+                        data-test-id="${componentSelector}-heading">
+                            ${heading}
+                    </${headingTag}>`;
     }
 
     /**
@@ -234,6 +242,7 @@ export class PieNotification extends LitElement implements NotificationProps {
                 class="${componentClass}-icon-close"
                 data-test-id="${componentSelector}-icon-close"
                 @click="${this.handleCloseButton}"
+                aria-label="${ifDefined(this.aria?.close)}"
                 >
                 <icon-close></icon-close>
             </pie-icon-button>`;
@@ -319,6 +328,7 @@ export class PieNotification extends LitElement implements NotificationProps {
             leadingAction,
             supportingAction,
             isOpen,
+            aria,
         } = this;
 
         if (!isOpen) {
@@ -333,7 +343,11 @@ export class PieNotification extends LitElement implements NotificationProps {
                 class="${componentClass}"
                 variant="${variant}"
                 position="${position}"
-                ?isCompact="${isCompact}">
+                ?isCompact="${isCompact}"
+                role="region"
+                aria-live="${variant === 'error' ? 'assertive' : 'polite'}"
+                aria-labelledby="${heading ? `${componentSelector}-heading` : nothing}"
+                aria-label="${!heading && ifDefined(aria?.label)}">
                 ${showCloseButton ? this.renderCloseButton() : nothing}
 
                 <section class="${componentClass}-content-section" ?isDismissible="${showCloseButton}">