@supersoniks/concorde 4.9.98-visual-stack.1 → 4.9.98-visual-stack.2

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

@@ -1,5 +1,9 @@
 # Alert
 
+Inline message in the page: title (`label`), body (`text` or default slot), icon from `status`. For HTML or actions, use the slot instead of `label` / `text` (plain text only).
+
+Use **`status`**: `default`, `info`, `success`, `warning`, `error`.
+
 <sonic-code>
   <template>
     <sonic-alert status="error" label="Email error" text="This address is already in use" background></sonic-alert>
@@ -8,15 +12,52 @@
 
 ## Status
 
+Color and icon follow `status`. With no `status`, behavior is `default`.
+
 <sonic-code>
   <template>
-  <div class="grid gap-4">
-  <sonic-alert label="Default"> This address is already in use. </sonic-alert>
-  <sonic-alert status="success" label="Success"> This address is already in use. </sonic-alert>
-  <sonic-alert status="error" label="Error"> This address is already in use. </sonic-alert>
-  <sonic-alert status="warning" label="Warning"> This address is already in use. </sonic-alert>
-  <sonic-alert status="info" label="Info"> This address is already in use. </sonic-alert>
-  </div>
+    <div class="grid gap-4">
+      <sonic-alert label="Default">This address is already in use.</sonic-alert>
+      <sonic-alert status="success" label="Success">This address is already in use.</sonic-alert>
+      <sonic-alert status="error" label="Error">This address is already in use.</sonic-alert>
+      <sonic-alert status="warning" label="Warning">This address is already in use.</sonic-alert>
+      <sonic-alert status="info" label="Info">This address is already in use.</sonic-alert>
+    </div>
+  </template>
+</sonic-code>
+
+## Accessibility (`announce`)
+
+By default, an alert already in the DOM is **not** announced (no `role` / `aria-live`). Set **`announce`** when the message appears **after** user action (API response, validation, etc.): screen readers get `role="alert"` for `error`, otherwise `role="status"` and `aria-live="polite"`.
+
+`sonic-alert-messages` sets `announce` on every rendered alert.
+
+<sonic-code>
+  <template>
+    <sonic-alert announce status="success" label="Saved" text="Your changes were saved."></sonic-alert>
+  </template>
+</sonic-code>
+
+## Content and icon
+
+`label` and `text` accept plain text only. The default slot is rendered after `text`. Use the **`icon`** slot to replace the default `sonic-icon`. **`noIcon`** hides the icon.
+
+<sonic-code>
+  <template>
+    <sonic-alert status="info" noIcon label="No icon" text="Informational message."></sonic-alert>
+  </template>
+</sonic-code>
+
+## Custom icon slot
+
+Project any markup into **`slot="icon"`** (emoji, image, custom component). Keep it decorative with `aria-hidden="true"` when the message text already conveys meaning.
+
+<sonic-code>
+  <template>
+    <sonic-alert status="success" label="Achievement unlocked" background>
+      <span slot="icon" aria-hidden="true" class="text-lg leading-none">🎉</span>
+      You unlocked a new badge.
+    </sonic-alert>
   </template>
 </sonic-code>
 
@@ -24,98 +65,113 @@
 
 <sonic-code>
   <template>
-  <div class="grid gap-4">
-  <sonic-alert status="error" label="Email error" size="2xs">
-    This address is already in use. Lorem ipsum dolor sit amet.
-  </sonic-alert>
-  <sonic-alert status="error" label="Email error" size="xs">
-    This address is already in use. Lorem ipsum dolor sit amet.
-  </sonic-alert>
-  <sonic-alert status="error" label="Email error" size="sm">
-    This address is already in use. Lorem ipsum dolor sit amet.
-  </sonic-alert>
-  <sonic-alert status="error" label="Email error">
-    This address is already in use. Lorem ipsum dolor sit amet.
-  </sonic-alert>
-  <sonic-alert status="error" label="Email error" size="lg">
-    This address is already in use. Lorem ipsum dolor sit amet.
-  </sonic-alert>
-  <sonic-alert status="error" label="Email error" size="xl">
-    This address is already in use. Lorem ipsum dolor sit amet.
-  </sonic-alert>
-  <sonic-alert status="error" label="Email error" size="2xl">
-    This address is already in use. Lorem ipsum dolor sit amet.
-  </sonic-alert>
-  </div>
+    <div class="grid gap-4">
+      <sonic-alert status="error" label="Email error" size="2xs">
+        This address is already in use. Lorem ipsum dolor sit amet.
+      </sonic-alert>
+      <sonic-alert status="error" label="Email error" size="xs">
+        This address is already in use. Lorem ipsum dolor sit amet.
+      </sonic-alert>
+      <sonic-alert status="error" label="Email error" size="sm">
+        This address is already in use. Lorem ipsum dolor sit amet.
+      </sonic-alert>
+      <sonic-alert status="error" label="Email error">
+        This address is already in use. Lorem ipsum dolor sit amet.
+      </sonic-alert>
+      <sonic-alert status="error" label="Email error" size="lg">
+        This address is already in use. Lorem ipsum dolor sit amet.
+      </sonic-alert>
+      <sonic-alert status="error" label="Email error" size="xl">
+        This address is already in use. Lorem ipsum dolor sit amet.
+      </sonic-alert>
+      <sonic-alert status="error" label="Email error" size="2xl">
+        This address is already in use. Lorem ipsum dolor sit amet.
+      </sonic-alert>
+    </div>
   </template>
 </sonic-code>
 
 ## Alert with link
 
+Rich content in the slot (buttons, links).
+
 <sonic-code>
   <template>
-  <sonic-alert status="info" label="New messages !">
-    You have 2 unread messages<br />
-    <div class="flex gap-2 mt-1">
-      <sonic-button variant="outline" type="info" size="xs">See messages</sonic-button>
-      <sonic-button variant="ghost" type="info" size="xs">dismiss</sonic-button>
-    </div>
-  </sonic-alert>
+    <sonic-alert status="info" label="New messages !">
+      You have 2 unread messages<br />
+      <div class="flex gap-2 mt-1">
+        <sonic-button variant="outline" type="info" size="xs">See messages</sonic-button>
+        <sonic-button variant="ghost" type="info" size="xs">Dismiss</sonic-button>
+      </div>
+    </sonic-alert>
   </template>
 </sonic-code>
 
 ## Background
 
+Tinted background from the `status` color (`color-mix` on `currentColor`).
+
 <sonic-code>
   <template>
-  <div class="grid gap-4">
-  <sonic-alert background label="Lorem ipsum dolor">
-    This address is already in use.
-  </sonic-alert>
-  <sonic-alert status="success" background label="Lorem ipsum dolor">
-    This address is already in use.
-  </sonic-alert>
-  <sonic-alert status="error" background label="Lorem ipsum dolor">
-    This address is already in use.
-  </sonic-alert>
-  <sonic-alert status="warning" background label="Lorem ipsum dolor">
-    This address is already in use.
-  </sonic-alert>
-  <sonic-alert status="info" background label="Lorem ipsum dolor">
-    This address is already in use.
-  </sonic-alert>
-  </div>
+    <div class="grid gap-4">
+      <sonic-alert background label="Lorem ipsum dolor">This address is already in use.</sonic-alert>
+      <sonic-alert status="success" background label="Lorem ipsum dolor">
+        This address is already in use.
+      </sonic-alert>
+      <sonic-alert status="error" background label="Lorem ipsum dolor">
+        This address is already in use.
+      </sonic-alert>
+      <sonic-alert status="warning" background label="Lorem ipsum dolor">
+        This address is already in use.
+      </sonic-alert>
+      <sonic-alert status="info" background label="Lorem ipsum dolor">
+        This address is already in use.
+      </sonic-alert>
+    </div>
   </template>
 </sonic-code>
 
 ## Dismissible
 
+`dismissible` removes the alert from the DOM when the close control is clicked (i18n aria label). **`dismissible`** and **`background`** are independent: without `background`, close sits at the end of the row; with `background`, top-right.
+
 <sonic-code>
   <template>
-  <sonic-alert class="mb-3" dismissible label="Lorem ipsum dolor">
-    This address is already in use.
-  </sonic-alert>
-  <sonic-alert status="success" class="mb-3" dismissible label="Lorem ipsum dolor">
-    This address is already in use.
-  </sonic-alert>
-  <sonic-alert status="error" class="mb-3" dismissible label="Lorem ipsum dolor">
-    This address is already in use.
-  </sonic-alert>
-  <sonic-alert status="warning" class="mb-3" dismissible label="Lorem ipsum dolor">
-    This address is already in use.
-  </sonic-alert>
-  <sonic-alert status="info" class="mb-3" dismissible label="Lorem ipsum dolor">
-    This address is already in use.
-  </sonic-alert>
+    <sonic-alert status="info" class="mb-3" dismissible label="This address is already in use.">
+    </sonic-alert>
+    <sonic-alert class="mb-3" dismissible background label="Lorem ipsum dolor">
+      This address is already in use.
+    </sonic-alert>
+    <sonic-alert status="success" class="mb-3" dismissible background label="Lorem ipsum dolor">
+      This address is already in use.
+    </sonic-alert>
+    <sonic-alert status="error" class="mb-3" dismissible background label="Lorem ipsum dolor">
+      This address is already in use.
+    </sonic-alert>
+    <sonic-alert status="warning" class="mb-3" dismissible background label="Lorem ipsum dolor">
+      This address is already in use.
+    </sonic-alert>
+    <sonic-alert status="info" class="mb-3" dismissible background label="Lorem ipsum dolor">
+      This address is already in use.
+    </sonic-alert>
   </template>
 </sonic-code>
 
 ## Dismiss forever
 
+With **`dismissForever`**, dismissal is stored in `localStorage` (key `sonic-alert-dismissed`). A stable **`id`** on the element is **required**; without `id`, a warning is logged and nothing is persisted.
+
 <sonic-code>
   <template>
-  <sonic-alert class="mb-3" dismissible dismissForever label="Lorem ipsum dolor" id="addressUniqueId">
-    This address is already in use.
-  </sonic-alert>
+    <sonic-alert
+      class="mb-3"
+      dismissible
+      background
+      dismissForever
+      label="Lorem ipsum dolor"
+      id="addressUniqueId"
+    >
+      This address is already in use.
+    </sonic-alert>
   </template>
 </sonic-code>

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);
   }
 }