@supersoniks/concorde 5.0.0 → 5.0.2

package/src/core/components/ui/alert/alert.spec.ts

@@ -0,0 +1,145 @@
+import { expect, vi } from "vitest";
+import TestUtils from "@supersoniks/concorde/test-utils/TestUtils";
+import "./alert";
+import { Alert } from "./alert";
+
+async function create(attributes: string) {
+  const element = TestUtils.bootstrap(
+    `<sonic-alert ${attributes}></sonic-alert>`
+  )[0] as Alert;
+  await element.updateComplete;
+  return element;
+}
+
+describe("SonicAlert", () => {
+  it("utilise status=default par défaut", async () => {
+    const elt = await create("");
+    expect(elt.getAttribute("status")).toBe("default");
+  });
+
+  it("conserve status=error", async () => {
+    const elt = await create('status="error"');
+    expect(elt.status).toBe("error");
+    expect(elt.getAttribute("status")).toBe("error");
+  });
+
+  it.each(["warning", "success", "info"])(
+    "accepte status=%s",
+    async (value) => {
+      const elt = await create(`status="${value}"`);
+      expect(elt.getAttribute("status")).toBe(value);
+    }
+  );
+
+  it("n'expose pas role ni aria-live sans announce", async () => {
+    const elt = await create('status="error"');
+    expect(elt.hasAttribute("role")).toBe(false);
+    expect(elt.hasAttribute("aria-live")).toBe(false);
+  });
+
+  it("avec announce, role=alert pour error sans aria-live explicite", async () => {
+    const error = await create('announce status="error"');
+    expect(error.getAttribute("role")).toBe("alert");
+    expect(error.hasAttribute("aria-live")).toBe(false);
+  });
+
+  it("avec announce, role=status et aria-live=polite pour les autres status", async () => {
+    const info = await create('announce status="info"');
+    expect(info.getAttribute("role")).toBe("status");
+    expect(info.getAttribute("aria-live")).toBe("polite");
+  });
+
+  it("retire role et aria-live quand announce repasse à false", async () => {
+    const elt = await create("announce status=info");
+    expect(elt.getAttribute("role")).toBe("status");
+    elt.announce = false;
+    await elt.updateComplete;
+    expect(elt.hasAttribute("role")).toBe(false);
+    expect(elt.hasAttribute("aria-live")).toBe(false);
+  });
+
+  it("affiche un bouton de fermeture uniquement si dismissible", async () => {
+    const dismissible = await create("dismissible");
+    expect(dismissible.shadowRoot?.querySelector(".close-btn")).not.toBeNull();
+    const plain = await create("");
+    expect(plain.shadowRoot?.querySelector(".close-btn")).toBeNull();
+  });
+
+  it("retire l'alerte au clic sur le bouton dismissible", async () => {
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    container.innerHTML = '<sonic-alert dismissible text="msg"></sonic-alert>';
+    const elt = container.querySelector("sonic-alert") as Alert;
+    await elt.updateComplete;
+    const closeBtn = elt.shadowRoot?.querySelector(
+      ".close-btn"
+    ) as HTMLElement | null;
+    expect(closeBtn).not.toBeNull();
+    closeBtn!.click();
+    expect(container.querySelector("sonic-alert")).toBeNull();
+    container.remove();
+  });
+
+  it("masque l'icône décorative aux lecteurs d'écran", async () => {
+    const elt = await create('status="info"');
+    expect(
+      elt.shadowRoot?.querySelector("sonic-icon")?.getAttribute("aria-hidden")
+    ).toBe("true");
+  });
+
+  it("n'affiche pas l'icône si noIcon", async () => {
+    const elt = await create("noIcon");
+    expect(elt.shadowRoot?.querySelector("sonic-icon")).toBeNull();
+  });
+
+  it("traduit le libellé de fermeture selon la langue du document", async () => {
+    const previous = document.documentElement.lang;
+    document.documentElement.lang = "fr";
+    const fr = await create("dismissible");
+    expect(
+      (fr.shadowRoot?.querySelector(".close-btn") as HTMLElement & {
+        ariaLabel?: string;
+      })?.ariaLabel
+    ).toBe("Fermer");
+    document.documentElement.lang = "it";
+    const it = await create("dismissible");
+    expect(
+      (it.shadowRoot?.querySelector(".close-btn") as HTMLElement & {
+        ariaLabel?: string;
+      })?.ariaLabel
+    ).toBe("Chiudi");
+    document.documentElement.lang = previous;
+  });
+
+  it("n'interprète pas le HTML du label", async () => {
+    const elt = await create('label="<b>x</b>"');
+    expect(elt.shadowRoot?.querySelector(".label b")).toBeNull();
+    expect(elt.shadowRoot?.querySelector(".label")?.textContent).toBe(
+      "<b>x</b>"
+    );
+  });
+
+  it("mémorise la fermeture avec dismissForever et un id", async () => {
+    localStorage.clear();
+    const elt = await create('dismissForever id="my-alert"');
+    elt.close();
+    expect(JSON.parse(localStorage.getItem("sonic-alert-dismissed")!)).toEqual(
+      { "my-alert": true }
+    );
+    const children = TestUtils.bootstrap(
+      '<sonic-alert dismissForever id="my-alert"></sonic-alert>'
+    );
+    expect(children.length).toBe(0);
+  });
+
+  it("ne mémorise rien avec dismissForever sans id", async () => {
+    localStorage.clear();
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const elt = await create("dismissForever");
+    elt.close();
+    expect(localStorage.getItem("sonic-alert-dismissed")).toBeNull();
+    expect(warn).toHaveBeenCalled();
+    warn.mockRestore();
+  });
+
+});

package/src/core/components/ui/alert/alert.ts

@@ -1,20 +1,28 @@
-import { html, LitElement, css, nothing } from "lit";
+import { html, LitElement, css, nothing, PropertyValues } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import {
   fontSize,
   Size,
 } from "@supersoniks/concorde/core/components/ui/_css/size";
-import { unsafeHTML } from "lit/directives/unsafe-html.js";
-const icon = {
-  warning: "warning-circled-outline",
-  success: "check-circled-outline",
-  error: "warning-circled-outline",
-  info: "info-empty",
-  default: "info-empty",
-};
-
-export type AlertStatus = keyof typeof icon;
+import {
+  StatusIconKey,
+  statusAriaLive,
+  statusAriaRole,
+  statusColor,
+  statusIcon,
+} from "@supersoniks/concorde/core/components/ui/_css/type";
+import {
+  isDismissed,
+  markDismissed,
+} from "@supersoniks/concorde/core/utils/dismissed";
+import {
+  resolveUiLabel,
+  uiAriaLabels,
+} from "@supersoniks/concorde/core/components/ui/_i18n/ui-aria-labels";
+
+export type AlertStatus = StatusIconKey;
 const tagName = "sonic-alert";
+const dismissStorageKey = "sonic-alert-dismissed";
 
 /**
  * Affiche un message en ligne.
@@ -24,66 +32,29 @@ const tagName = "sonic-alert";
 export class Alert extends LitElement {
   static styles = [
     fontSize,
+    statusColor,
     css`
       :host {
-        --sc_color: var(--sc-base-content, #000);
-        --sc_rounded: var(--sc-rounded);
-        --sc_fw: var(--sc-font-weight-base, 400);
-        --sc_fst: var(--sc-font-style-base, normal);
-        --sc_label-fw: bold;
-
-        font-weight: var(--sc_fw);
-        font-style: var(--sc_fst);
-        color: var(--sc_color);
+        --sc-_rounded: var(--sc-rounded);
         position: relative;
         display: flex;
         gap: 0.4em;
-        border-radius: var(--sc_rounded);
+        border-radius: var(--sc-_rounded);
       }
 
       .label {
-        font-weight: var(--sc_label-fw);
+        font-weight: bold;
         margin-bottom: 0.15em;
         display: block;
       }
 
-      :host([status="warning"]) {
-        --sc_color: var(--sc-warning, var(--sc-base-content, #000));
-      }
-      :host([status="error"]) {
-        --sc_color: var(--sc-danger, var(--sc-base-content, #000));
-      }
-      :host([status="info"]) {
-        --sc_color: var(--sc-info, var(--sc-base-content, #000));
-      }
-      :host([status="success"]) {
-        --sc_color: var(--sc-success, var(--sc-base-content, #000));
-      }
-
       /*background*/
-      :host([dismissible]),
       :host([background]) {
-        background: var(--sc-base, #fff);
-        padding: 0.8em 1.15em;
-      }
-      :host([dismissible]):before,
-      :host([background]):before {
-        background-color: currentColor;
-        content: "";
-        display: block;
-        position: absolute;
-        left: 0;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        opacity: 0.08;
-        border-radius: var(--sc_rounded);
-        pointer-events: none;
+        background: color-mix(in srgb, currentColor 8%, var(--sc-base, #fff));
+        padding: 0.8em;
       }
 
       .content {
-        z-index: 2;
-        position: relative;
         flex: 1;
       }
 
@@ -91,30 +62,34 @@ export class Alert extends LitElement {
         display: block;
       }
 
-      .hidden {
-        display: none !important;
-      }
-
       /*Rounded*/
       :host([size="2xs"]),
       :host([size="xs"]),
       :host([size="sm"]) {
-        --sc_rounded: var(--sc-rounded-sm);
+        --sc-_rounded: var(--sc-rounded-sm);
       }
 
       /*Dismissible*/
-      :host([dismissible]) {
+      .close-btn {
+        flex-shrink: 0;
+        align-self: flex-start;
+        border-left: var(--sc-border-width, 1px) solid currentColor;
+        padding-left: 0.5em;
+        margin-left: 0.5em;
+      }
+      :host([dismissible][background]) {
         padding-right: 3rem;
       }
-      :host([dismissible]) .close-btn {
+      :host([dismissible][background]) .close-btn {
         position: absolute;
         top: 0.4rem;
         right: 0.3rem;
+        border-left: none;
       }
     `,
   ];
   /**
-   * Titre du message d'erreur
+   * Titre du message (texte brut, utiliser le slot pour du contenu riche)
    */
   @property({ type: String }) label = "";
 
@@ -125,8 +100,6 @@ export class Alert extends LitElement {
    */
   @property({ type: String }) text = "";
 
-  @property({ type: String }) id = new Date().getTime().toString();
-
   @property({ type: String, reflect: true }) size?: Size;
 
   @property({ type: Boolean, reflect: true }) dismissible = false;
@@ -135,33 +108,58 @@ export class Alert extends LitElement {
 
   @property({ type: String, reflect: true }) status: AlertStatus = "default";
 
+  /**
+   * Mémorise la fermeture dans le localStorage. Nécessite un `id`.
+   */
   @property({ type: Boolean, reflect: true }) dismissForever = false;
 
+  /**
+   * Annonce le message aux lecteurs d'écran (role alert/status).
+   * À activer pour les messages injectés dynamiquement, pas pour une alerte déjà dans la page.
+   */
+  @property({ type: Boolean, reflect: true }) announce = false;
+
   connectedCallback() {
-    if (this.dismissForever) {
-      const dismissed = localStorage.getItem("sonic-alert-dismissed") || "{}";
-      const dismissedObj = JSON.parse(dismissed);
-      if (dismissedObj[this.id]) {
-        this.remove();
-      }
-    }
     super.connectedCallback();
+    if (
+      this.dismissForever &&
+      this.id &&
+      isDismissed(dismissStorageKey, this.id)
+    ) {
+      this.remove();
+    }
+  }
+
+  willUpdate(changed: PropertyValues<this>) {
+    if (changed.has("announce") || changed.has("status")) {
+      this._syncAnnounceA11y();
+    }
+  }
+
+  private _syncAnnounceA11y() {
+    if (!this.announce) {
+      this.removeAttribute("role");
+      this.removeAttribute("aria-live");
+      return;
+    }
+    this.setAttribute("role", statusAriaRole(this.status));
+    const live = statusAriaLive(this.status);
+    if (live) this.setAttribute("aria-live", live);
+    else this.removeAttribute("aria-live");
   }
 
   render() {
     return html`
-      <slot name="icon" class="${this.noIcon ? "hidden" : ""}"
-        >${!this.noIcon
-          ? html`<div>
-              ${this.status &&
-              html`<sonic-icon name=${icon[this.status]}></sonic-icon>`}
-            </div>`
-          : nothing}</slot
-      >
+      ${this.noIcon
+        ? nothing
+        : html`<slot name="icon">
+            <sonic-icon
+              aria-hidden="true"
+              name=${statusIcon[this.status] ?? statusIcon.default}
+            ></sonic-icon>
+          </slot>`}
       <div class="content">
-        ${this.label
-          ? html`<span class="label">${unsafeHTML(this.label)}</span>`
-          : nothing}
+        ${this.label ? html`<span class="label">${this.label}</span>` : nothing}
         <div>${this.text}<slot></slot></div>
       </div>
       ${this.dismissible
@@ -171,6 +169,7 @@ export class Alert extends LitElement {
             variant="unstyled"
             shape="circle"
             icon
+            .ariaLabel=${resolveUiLabel(uiAriaLabels.closeAlert)}
           >
             <sonic-icon name="cancel"></sonic-icon>
           </sonic-button>`
@@ -180,15 +179,11 @@ export class Alert extends LitElement {
 
   close() {
     this.remove();
-    // if dismiss forever, save in localstorage
-    if (this.dismissForever) {
-      const dismissed = localStorage.getItem("sonic-alert-dismissed") || "{}";
-      const dismissedObj = JSON.parse(dismissed);
-      dismissedObj[this.id] = true;
-      localStorage.setItem(
-        "sonic-alert-dismissed",
-        JSON.stringify(dismissedObj)
-      );
+    if (!this.dismissForever) return;
+    if (!this.id) {
+      console.warn("sonic-alert : dismissForever nécessite un id.");
+      return;
     }
+    markDismissed(dismissStorageKey, this.id);
   }
 }

package/src/core/components/ui/alert-messages/alert-messages.ts

@@ -4,7 +4,6 @@ import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
 import { Message } from "@supersoniks/concorde/core/_types/types";
 import { map } from "lit/directives/map.js";
 import { Size } from "@supersoniks/concorde/core/components/ui/_css/size";
-
 import { ifDefined } from "lit/directives/if-defined.js";
 import { APIResult } from "@supersoniks/concorde/core/components/ui/toast/message-subscriber";
 
@@ -37,6 +36,7 @@ export class AlertMessages extends Subscriber(LitElement, {} as APIResult) {
       ${map(this.messages, (message) => {
         if (message.type == "public") {
           return html`<sonic-alert
+            announce
             status=${message.status || "default"}
             text=${ifDefined(message.content)}
             size=${this.size}