@inploi/plugin-feedback 6.1.0 → 6.2.0

package/dist/components/feedback-widget.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/feedback.d.ts

@@ -31,9 +31,18 @@ export type FeedbackPluginParams = {
         negative: PaletteParams;
     };
     terms: Partial<FeedbackTranslationTerms>;
+    locale?: string;
     size: 'sm' | 'md' | 'lg';
+    /**
+     * The rating to show, for a host that draws the same key's ratings in more than one place: each follows the one
+     * rating (pass back what `onScore` reports). Absent, the widget keeps its own.
+     */
+    score?: 0 | 1 | -1;
     onLeaveComment?: () => void;
+    /** A rating, once it has been logged. */
     onRate?: (rate: 0 | 1 | -1) => void;
+    /** The rating as it's pressed (1 or -1), or cleared (0: pressed again, which logs nothing, or its log failed). */
+    onScore?: (score: 0 | 1 | -1) => void;
 };
 export interface FeedbackPluginRenderParams extends FeedbackPluginParams {
     host?: HTMLElement;
@@ -62,6 +71,8 @@ export declare const feedbackPlugin: () => ({ apiClient, logger, analytics }: {
     }>;
     /** Renders the Job Alerts Plugin inside the container element. */
     render: (params: FeedbackPluginRenderParams) => Promise<void>;
+    /** Release one target's widget (and its portals), leaving any other target's. */
+    unmount: (target: HTMLElement) => void;
     /** Release components, portals and document listeners when an owning widget unmounts. */
     destroy: () => void;
     '~brand': "@inploi/plugin-feedback";

package/dist/i18n.d.ts

@@ -1,6 +1,8 @@
 export declare const TranslationProvider: (props: {
     terms?: Partial<import('@inploi/i18n/translation').TranslationDict<{
         readonly a11y_label: "How was your experience?";
+        readonly positive_label: "Good";
+        readonly negative_label: "Bad";
         readonly positive_heading: "Thanks!";
         readonly negative_heading: "We’re sorry to hear that";
         readonly positive_text: "Would you like to tell us more about your experience?";
@@ -10,11 +12,14 @@ export declare const TranslationProvider: (props: {
         readonly skip: "No, thanks";
         readonly submitted_heading: "Thank you!";
         readonly submitted_text: "Your feedback has been sent and will be used to improve our products.";
+        readonly comment_minimum: "Please type more characters in the comment box";
     }>> | undefined;
     locale: string | undefined;
     children?: import('preact').ComponentChildren;
 }) => import("preact").JSX.Element, createTFunction: <T extends {
     readonly a11y_label: "How was your experience?";
+    readonly positive_label: "Good";
+    readonly negative_label: "Bad";
     readonly positive_heading: "Thanks!";
     readonly negative_heading: "We’re sorry to hear that";
     readonly positive_text: "Would you like to tell us more about your experience?";
@@ -24,8 +29,11 @@ export declare const TranslationProvider: (props: {
     readonly skip: "No, thanks";
     readonly submitted_heading: "Thank you!";
     readonly submitted_text: "Your feedback has been sent and will be used to improve our products.";
+    readonly comment_minimum: "Please type more characters in the comment box";
 } = {
     readonly a11y_label: "How was your experience?";
+    readonly positive_label: "Good";
+    readonly negative_label: "Bad";
     readonly positive_heading: "Thanks!";
     readonly negative_heading: "We’re sorry to hear that";
     readonly positive_text: "Would you like to tell us more about your experience?";
@@ -35,9 +43,12 @@ export declare const TranslationProvider: (props: {
     readonly skip: "No, thanks";
     readonly submitted_heading: "Thank you!";
     readonly submitted_text: "Your feedback has been sent and will be used to improve our products.";
+    readonly comment_minimum: "Please type more characters in the comment box";
 }>(options: {
     overrides: Partial<import('@inploi/i18n/translation').TranslationDict<{
         readonly a11y_label: "How was your experience?";
+        readonly positive_label: "Good";
+        readonly negative_label: "Bad";
         readonly positive_heading: "Thanks!";
         readonly negative_heading: "We’re sorry to hear that";
         readonly positive_text: "Would you like to tell us more about your experience?";
@@ -47,10 +58,13 @@ export declare const TranslationProvider: (props: {
         readonly skip: "No, thanks";
         readonly submitted_heading: "Thank you!";
         readonly submitted_text: "Your feedback has been sent and will be used to improve our products.";
+        readonly comment_minimum: "Please type more characters in the comment box";
     }>>;
     locale: string | undefined;
 }) => import('@inploi/i18n/translation').TFn<T>, useTranslation: <T extends {
     readonly a11y_label: "How was your experience?";
+    readonly positive_label: "Good";
+    readonly negative_label: "Bad";
     readonly positive_heading: "Thanks!";
     readonly negative_heading: "We’re sorry to hear that";
     readonly positive_text: "Would you like to tell us more about your experience?";
@@ -60,8 +74,11 @@ export declare const TranslationProvider: (props: {
     readonly skip: "No, thanks";
     readonly submitted_heading: "Thank you!";
     readonly submitted_text: "Your feedback has been sent and will be used to improve our products.";
+    readonly comment_minimum: "Please type more characters in the comment box";
 } = {
     readonly a11y_label: "How was your experience?";
+    readonly positive_label: "Good";
+    readonly negative_label: "Bad";
     readonly positive_heading: "Thanks!";
     readonly negative_heading: "We’re sorry to hear that";
     readonly positive_text: "Would you like to tell us more about your experience?";
@@ -71,6 +88,7 @@ export declare const TranslationProvider: (props: {
     readonly skip: "No, thanks";
     readonly submitted_heading: "Thank you!";
     readonly submitted_text: "Your feedback has been sent and will be used to improve our products.";
+    readonly comment_minimum: "Please type more characters in the comment box";
 }>() => {
     t: import('@inploi/i18n/translation').TFn<T>;
     locale: string | undefined;

package/dist/plugin-feedback.cjs

@@ -5348,6 +5348,8 @@ var createTranslation = (defaultTerms) => {
 };
 const { TranslationProvider, createTFunction, useTranslation } = createTranslation({
   a11y_label: "How was your experience?",
+  positive_label: "Good",
+  negative_label: "Bad",
   positive_heading: "Thanks!",
   negative_heading: "We’re sorry to hear that",
   positive_text: "Would you like to tell us more about your experience?",
@@ -5356,7 +5358,8 @@ const { TranslationProvider, createTFunction, useTranslation } = createTranslati
   submitting: "Sending feedback...",
   skip: "No, thanks",
   submitted_heading: "Thank you!",
-  submitted_text: "Your feedback has been sent and will be used to improve our products."
+  submitted_text: "Your feedback has been sent and will be used to improve our products.",
+  comment_minimum: "Please type more characters in the comment box"
 });
 var COLOR_SHADES = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"];
 var OKLCH_PRESETS = {
@@ -5617,12 +5620,12 @@ function noop() {
 }
 const options = [
   {
-    label: "Good",
+    label: "positive_label",
     icon: /* @__PURE__ */ u$1(Icon, { name: "happy" }),
     value: 1,
     variant: "positive"
   },
-  { label: "Bad", icon: /* @__PURE__ */ u$1(Icon, { name: "sad" }), value: -1, variant: "negative" }
+  { label: "negative_label", icon: /* @__PURE__ */ u$1(Icon, { name: "sad" }), value: -1, variant: "negative" }
 ];
 const submitWithMetaEnter = (e2) => {
   const isSubmitCombo = e2.key === "Enter" && e2.metaKey;
@@ -5640,41 +5643,65 @@ const Label = () => {
 const FeedbackWidget = ({ analytics, params, logger }) => {
   const variants = getThemeVariants(params.theme).join(" ");
   const id = g$1();
-  const [score, setScore] = d(0);
+  const ratings = A$1(null);
+  const t2 = T$1(
+    () => createTFunction({ overrides: params.terms ?? {}, locale: params.locale }),
+    [params.terms, params.locale]
+  );
+  const [score, setScore] = d(params.score ?? 0);
+  const presses = A$1(0);
+  const held = A$1(params.score);
+  held.current = params.score;
+  y(() => {
+    if (params.score !== void 0)
+      setScore(params.score);
+  }, [params.score]);
   const [open, setOpen] = d();
-  return /* @__PURE__ */ u$1(TranslationProvider, { locale: void 0, terms: params.terms, children: /* @__PURE__ */ u$1("div", { role: "group", "aria-labelledby": `${id}-label`, class: variants, children: [
+  return /* @__PURE__ */ u$1(TranslationProvider, { locale: params.locale, terms: params.terms, children: /* @__PURE__ */ u$1("div", { role: "group", "aria-labelledby": `${id}-label`, class: variants, children: [
     /* @__PURE__ */ u$1("span", { id: `${id}-label`, className: "sr-only", children: /* @__PURE__ */ u$1(Label, {}) }),
-    /* @__PURE__ */ u$1("div", { class: "isolate flex", children: options.map((option) => /* @__PURE__ */ u$1(
+    /* @__PURE__ */ u$1("div", { ref: ratings, class: "isolate flex", children: options.map((option) => /* @__PURE__ */ u$1(
       $cb5cc270b50c6fcd$export$be92b6f5f03c0fe9,
       {
         open: open === option.value,
-        onOpenChange: () => {
-          if (!open)
-            return setOpen(option.value);
-          setOpen(void 0);
+        onOpenChange: (next) => {
+          if (next)
+            setOpen(option.value);
+          else
+            setOpen((current) => current === option.value ? void 0 : current);
         },
         children: [
           /* @__PURE__ */ u$1(
             $cb5cc270b50c6fcd$export$41fb9f06171c75f4,
             {
-              "aria-label": option.label,
+              "aria-label": t2(option.label),
               "aria-pressed": score === option.value,
               class: buttonClass({ colorScheme: option.variant, size: params.size }),
               onClick: (e2) => {
+                var _a, _b;
                 const newVal = option.value === score ? 0 : option.value;
+                const press = ++presses.current;
                 setScore(newVal);
                 if (newVal === 0) {
                   e2.preventDefault();
                   setOpen(void 0);
+                  (_a = params.onScore) == null ? void 0 : _a.call(params, 0);
                   return;
                 }
-                analytics.log({ event: "FEEDBACK", properties: { key: params.key, score: newVal } }).then(() => {
-                  var _a;
-                  (_a = params.onRate) == null ? void 0 : _a.call(params, newVal);
-                }).catch((e22) => {
-                  logger.error(e22);
-                  setScore(0);
-                });
+                (_b = params.onScore) == null ? void 0 : _b.call(params, newVal);
+                analytics.log({ event: "FEEDBACK", properties: { key: params.key, score: newVal } }).then(
+                  () => {
+                    var _a2;
+                    return (_a2 = params.onRate) == null ? void 0 : _a2.call(params, newVal);
+                  },
+                  (e22) => {
+                    var _a2;
+                    logger.error(e22);
+                    if (press !== presses.current || held.current !== void 0 && held.current !== newVal)
+                      return;
+                    setScore(0);
+                    (_a2 = params.onScore) == null ? void 0 : _a2.call(params, 0);
+                  }
+                );
               },
               children: /* @__PURE__ */ u$1("div", { class: "ease-expo-out duration-medium scale-75 transition-transform group-aria-[pressed=true]:scale-100", children: option.icon })
             }
@@ -5682,10 +5709,26 @@ const FeedbackWidget = ({ analytics, params, logger }) => {
           /* @__PURE__ */ u$1($cb5cc270b50c6fcd$export$602eac185826482c, { container: params.host, children: /* @__PURE__ */ u$1("div", { "data-widget": FEEDBACK_WIDGET_ID, "data-key": params.key, children: /* @__PURE__ */ u$1("div", { class: clsx$1("absolute isolate z-50", variants), children: /* @__PURE__ */ u$1(
             $cb5cc270b50c6fcd$export$7c6e2c02157bb7d2,
             {
+              "aria-labelledby": `${id}-${option.value}-heading`,
+              onInteractOutside: (event) => {
+                var _a;
+                const target = event.detail.originalEvent.target;
+                if (target instanceof Element && ((_a = ratings.current) == null ? void 0 : _a.contains(target.closest("button[aria-pressed]"))))
+                  event.preventDefault();
+              },
               collisionPadding: 16,
               class: "data-[state=open]:animate-slideDownAndFade bg-lowest ring-neutral-5 shadow-surface-lg isolate w-64 max-w-[var(--radix-popover-content-available-width)] rounded-lg p-2 ring-1 will-change-[transform,opacity]",
               sideOffset: 5,
-              children: /* @__PURE__ */ u$1(CommentForm, { analytics, params, onClose: () => setOpen(0), score })
+              children: /* @__PURE__ */ u$1(
+                CommentForm,
+                {
+                  analytics,
+                  params,
+                  onClose: () => setOpen(0),
+                  score,
+                  headingId: `${id}-${option.value}-heading`
+                }
+              )
             }
           ) }) }) })
         ]
@@ -5698,20 +5741,40 @@ const CommentForm = ({
   params,
   onClose,
   score,
-  analytics
+  analytics,
+  headingId
 }) => {
   const { t: t2 } = useTranslation();
   const id = g$1();
+  const form = A$1(null);
+  const success = A$1(null);
+  const transferFocus = A$1(false);
   const [submission, setSubmission] = d({ state: "idle" });
+  _(() => {
+    var _a;
+    if (submission.state === "success" && transferFocus.current)
+      (_a = success.current) == null ? void 0 : _a.focus({ preventScroll: true });
+  }, [submission.state]);
   if (submission.state === "success") {
-    return /* @__PURE__ */ u$1("div", { class: "text-balance flex flex-col gap-1 p-4 text-center", children: [
-      /* @__PURE__ */ u$1("p", { class: "text-neutral-12 text-pretty text-base font-semibold leading-tight tracking-tight", children: t2("submitted_heading") }),
-      /* @__PURE__ */ u$1("p", { class: "text-neutral-11 text-pretty text-sm leading-tight", children: t2("submitted_text") })
-    ] });
+    return /* @__PURE__ */ u$1(
+      "div",
+      {
+        ref: success,
+        tabIndex: -1,
+        role: "status",
+        "aria-labelledby": headingId,
+        class: "flex flex-col gap-1 text-balance p-4 text-center",
+        children: [
+          /* @__PURE__ */ u$1("p", { id: headingId, class: "text-neutral-12 text-pretty text-base font-semibold leading-tight tracking-tight", children: t2("submitted_heading") }),
+          /* @__PURE__ */ u$1("p", { class: "text-neutral-11 text-pretty text-sm leading-tight", children: t2("submitted_text") })
+        ]
+      }
+    );
   }
   return /* @__PURE__ */ u$1(
     "form",
     {
+      ref: form,
       class: "flex flex-col gap-2.5 p-2",
       onSubmit: (e2) => {
         e2.preventDefault();
@@ -5719,7 +5782,7 @@ const CommentForm = ({
         const formData = new FormData(e2.currentTarget);
         const comment = formData.get("comment");
         if (typeof comment !== "string" || comment.length <= 5) {
-          setSubmission({ state: "error", error: "Please type more characters in the comment box" });
+          setSubmission({ state: "error", error: t2("comment_minimum") });
           return;
         }
         Promise.all([
@@ -5727,8 +5790,9 @@ const CommentForm = ({
           /** Min delay of 500ms so it feels like it’s doing stuff */
           new Promise((resolve) => setTimeout(resolve, 1e3))
         ]).then(() => {
-          var _a;
+          var _a, _b, _c;
           (_a = params.onLeaveComment) == null ? void 0 : _a.call(params);
+          transferFocus.current = Boolean((_c = (_b = form.current) == null ? void 0 : _b.closest('[role="dialog"]')) == null ? void 0 : _c.contains(document.activeElement));
           setSubmission({ state: "success" });
         }).catch((e22) => {
           if (e22 instanceof Error) {
@@ -5742,7 +5806,7 @@ const CommentForm = ({
         /* @__PURE__ */ u$1("input", { type: "hidden", name: "key", value: params.key }),
         /* @__PURE__ */ u$1("fieldset", { class: "flex flex-col gap-4", children: [
           /* @__PURE__ */ u$1("label", { htmlFor: id, class: "flex flex-col gap-1", children: [
-            /* @__PURE__ */ u$1("p", { class: "text-neutral-12 text-pretty text-base font-semibold leading-tight tracking-tight", children: t2(score === -1 ? "negative_heading" : "positive_heading") }),
+            /* @__PURE__ */ u$1("p", { id: headingId, class: "text-neutral-12 text-pretty text-base font-semibold leading-tight tracking-tight", children: t2(score === -1 ? "negative_heading" : "positive_heading") }),
             /* @__PURE__ */ u$1("p", { class: "text-neutral-11 text-pretty text-sm leading-tight", children: t2(score === -1 ? "negative_text" : "positive_text") })
           ] }),
           /* @__PURE__ */ u$1("div", { class: "flex flex-col gap-2", children: [
@@ -5756,7 +5820,7 @@ const CommentForm = ({
                 id
               }
             ),
-            submission.state === "error" ? /* @__PURE__ */ u$1("div", { role: "alert", class: "text-balance flex gap-1 text-xs", children: [
+            submission.state === "error" ? /* @__PURE__ */ u$1("div", { role: "alert", class: "flex gap-1 text-balance text-xs", children: [
               /* @__PURE__ */ u$1(Icon, { name: "warning", class: "size-[1lh] flex-none" }),
               submission.error
             ] }) : null
@@ -6760,6 +6824,11 @@ const feedbackPlugin = () => sdk.createPlugin(({ apiClient, logger, analytics })
       targets.add(target);
       fn2(_$2(App, { params }), target);
     },
+    /** Release one target's widget (and its portals), leaving any other target's. */
+    unmount: (target) => {
+      J$1(null, target);
+      targets.delete(target);
+    },
     /** Release components, portals and document listeners when an owning widget unmounts. */
     destroy: () => {
       for (const target of targets)

package/dist/plugin-feedback.js

@@ -5346,6 +5346,8 @@ var createTranslation = (defaultTerms) => {
 };
 const { TranslationProvider, createTFunction, useTranslation } = createTranslation({
   a11y_label: "How was your experience?",
+  positive_label: "Good",
+  negative_label: "Bad",
   positive_heading: "Thanks!",
   negative_heading: "We’re sorry to hear that",
   positive_text: "Would you like to tell us more about your experience?",
@@ -5354,7 +5356,8 @@ const { TranslationProvider, createTFunction, useTranslation } = createTranslati
   submitting: "Sending feedback...",
   skip: "No, thanks",
   submitted_heading: "Thank you!",
-  submitted_text: "Your feedback has been sent and will be used to improve our products."
+  submitted_text: "Your feedback has been sent and will be used to improve our products.",
+  comment_minimum: "Please type more characters in the comment box"
 });
 var COLOR_SHADES = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"];
 var OKLCH_PRESETS = {
@@ -5615,12 +5618,12 @@ function noop() {
 }
 const options = [
   {
-    label: "Good",
+    label: "positive_label",
     icon: /* @__PURE__ */ u$1(Icon, { name: "happy" }),
     value: 1,
     variant: "positive"
   },
-  { label: "Bad", icon: /* @__PURE__ */ u$1(Icon, { name: "sad" }), value: -1, variant: "negative" }
+  { label: "negative_label", icon: /* @__PURE__ */ u$1(Icon, { name: "sad" }), value: -1, variant: "negative" }
 ];
 const submitWithMetaEnter = (e2) => {
   const isSubmitCombo = e2.key === "Enter" && e2.metaKey;
@@ -5638,41 +5641,65 @@ const Label = () => {
 const FeedbackWidget = ({ analytics, params, logger }) => {
   const variants = getThemeVariants(params.theme).join(" ");
   const id = g$1();
-  const [score, setScore] = d(0);
+  const ratings = A$1(null);
+  const t2 = T$1(
+    () => createTFunction({ overrides: params.terms ?? {}, locale: params.locale }),
+    [params.terms, params.locale]
+  );
+  const [score, setScore] = d(params.score ?? 0);
+  const presses = A$1(0);
+  const held = A$1(params.score);
+  held.current = params.score;
+  y(() => {
+    if (params.score !== void 0)
+      setScore(params.score);
+  }, [params.score]);
   const [open, setOpen] = d();
-  return /* @__PURE__ */ u$1(TranslationProvider, { locale: void 0, terms: params.terms, children: /* @__PURE__ */ u$1("div", { role: "group", "aria-labelledby": `${id}-label`, class: variants, children: [
+  return /* @__PURE__ */ u$1(TranslationProvider, { locale: params.locale, terms: params.terms, children: /* @__PURE__ */ u$1("div", { role: "group", "aria-labelledby": `${id}-label`, class: variants, children: [
     /* @__PURE__ */ u$1("span", { id: `${id}-label`, className: "sr-only", children: /* @__PURE__ */ u$1(Label, {}) }),
-    /* @__PURE__ */ u$1("div", { class: "isolate flex", children: options.map((option) => /* @__PURE__ */ u$1(
+    /* @__PURE__ */ u$1("div", { ref: ratings, class: "isolate flex", children: options.map((option) => /* @__PURE__ */ u$1(
       $cb5cc270b50c6fcd$export$be92b6f5f03c0fe9,
       {
         open: open === option.value,
-        onOpenChange: () => {
-          if (!open)
-            return setOpen(option.value);
-          setOpen(void 0);
+        onOpenChange: (next) => {
+          if (next)
+            setOpen(option.value);
+          else
+            setOpen((current) => current === option.value ? void 0 : current);
         },
         children: [
           /* @__PURE__ */ u$1(
             $cb5cc270b50c6fcd$export$41fb9f06171c75f4,
             {
-              "aria-label": option.label,
+              "aria-label": t2(option.label),
               "aria-pressed": score === option.value,
               class: buttonClass({ colorScheme: option.variant, size: params.size }),
               onClick: (e2) => {
+                var _a, _b;
                 const newVal = option.value === score ? 0 : option.value;
+                const press = ++presses.current;
                 setScore(newVal);
                 if (newVal === 0) {
                   e2.preventDefault();
                   setOpen(void 0);
+                  (_a = params.onScore) == null ? void 0 : _a.call(params, 0);
                   return;
                 }
-                analytics.log({ event: "FEEDBACK", properties: { key: params.key, score: newVal } }).then(() => {
-                  var _a;
-                  (_a = params.onRate) == null ? void 0 : _a.call(params, newVal);
-                }).catch((e22) => {
-                  logger.error(e22);
-                  setScore(0);
-                });
+                (_b = params.onScore) == null ? void 0 : _b.call(params, newVal);
+                analytics.log({ event: "FEEDBACK", properties: { key: params.key, score: newVal } }).then(
+                  () => {
+                    var _a2;
+                    return (_a2 = params.onRate) == null ? void 0 : _a2.call(params, newVal);
+                  },
+                  (e22) => {
+                    var _a2;
+                    logger.error(e22);
+                    if (press !== presses.current || held.current !== void 0 && held.current !== newVal)
+                      return;
+                    setScore(0);
+                    (_a2 = params.onScore) == null ? void 0 : _a2.call(params, 0);
+                  }
+                );
               },
               children: /* @__PURE__ */ u$1("div", { class: "ease-expo-out duration-medium scale-75 transition-transform group-aria-[pressed=true]:scale-100", children: option.icon })
             }
@@ -5680,10 +5707,26 @@ const FeedbackWidget = ({ analytics, params, logger }) => {
           /* @__PURE__ */ u$1($cb5cc270b50c6fcd$export$602eac185826482c, { container: params.host, children: /* @__PURE__ */ u$1("div", { "data-widget": FEEDBACK_WIDGET_ID, "data-key": params.key, children: /* @__PURE__ */ u$1("div", { class: clsx$1("absolute isolate z-50", variants), children: /* @__PURE__ */ u$1(
             $cb5cc270b50c6fcd$export$7c6e2c02157bb7d2,
             {
+              "aria-labelledby": `${id}-${option.value}-heading`,
+              onInteractOutside: (event) => {
+                var _a;
+                const target = event.detail.originalEvent.target;
+                if (target instanceof Element && ((_a = ratings.current) == null ? void 0 : _a.contains(target.closest("button[aria-pressed]"))))
+                  event.preventDefault();
+              },
               collisionPadding: 16,
               class: "data-[state=open]:animate-slideDownAndFade bg-lowest ring-neutral-5 shadow-surface-lg isolate w-64 max-w-[var(--radix-popover-content-available-width)] rounded-lg p-2 ring-1 will-change-[transform,opacity]",
               sideOffset: 5,
-              children: /* @__PURE__ */ u$1(CommentForm, { analytics, params, onClose: () => setOpen(0), score })
+              children: /* @__PURE__ */ u$1(
+                CommentForm,
+                {
+                  analytics,
+                  params,
+                  onClose: () => setOpen(0),
+                  score,
+                  headingId: `${id}-${option.value}-heading`
+                }
+              )
             }
           ) }) }) })
         ]
@@ -5696,20 +5739,40 @@ const CommentForm = ({
   params,
   onClose,
   score,
-  analytics
+  analytics,
+  headingId
 }) => {
   const { t: t2 } = useTranslation();
   const id = g$1();
+  const form = A$1(null);
+  const success = A$1(null);
+  const transferFocus = A$1(false);
   const [submission, setSubmission] = d({ state: "idle" });
+  _(() => {
+    var _a;
+    if (submission.state === "success" && transferFocus.current)
+      (_a = success.current) == null ? void 0 : _a.focus({ preventScroll: true });
+  }, [submission.state]);
   if (submission.state === "success") {
-    return /* @__PURE__ */ u$1("div", { class: "text-balance flex flex-col gap-1 p-4 text-center", children: [
-      /* @__PURE__ */ u$1("p", { class: "text-neutral-12 text-pretty text-base font-semibold leading-tight tracking-tight", children: t2("submitted_heading") }),
-      /* @__PURE__ */ u$1("p", { class: "text-neutral-11 text-pretty text-sm leading-tight", children: t2("submitted_text") })
-    ] });
+    return /* @__PURE__ */ u$1(
+      "div",
+      {
+        ref: success,
+        tabIndex: -1,
+        role: "status",
+        "aria-labelledby": headingId,
+        class: "flex flex-col gap-1 text-balance p-4 text-center",
+        children: [
+          /* @__PURE__ */ u$1("p", { id: headingId, class: "text-neutral-12 text-pretty text-base font-semibold leading-tight tracking-tight", children: t2("submitted_heading") }),
+          /* @__PURE__ */ u$1("p", { class: "text-neutral-11 text-pretty text-sm leading-tight", children: t2("submitted_text") })
+        ]
+      }
+    );
   }
   return /* @__PURE__ */ u$1(
     "form",
     {
+      ref: form,
       class: "flex flex-col gap-2.5 p-2",
       onSubmit: (e2) => {
         e2.preventDefault();
@@ -5717,7 +5780,7 @@ const CommentForm = ({
         const formData = new FormData(e2.currentTarget);
         const comment = formData.get("comment");
         if (typeof comment !== "string" || comment.length <= 5) {
-          setSubmission({ state: "error", error: "Please type more characters in the comment box" });
+          setSubmission({ state: "error", error: t2("comment_minimum") });
           return;
         }
         Promise.all([
@@ -5725,8 +5788,9 @@ const CommentForm = ({
           /** Min delay of 500ms so it feels like it’s doing stuff */
           new Promise((resolve) => setTimeout(resolve, 1e3))
         ]).then(() => {
-          var _a;
+          var _a, _b, _c;
           (_a = params.onLeaveComment) == null ? void 0 : _a.call(params);
+          transferFocus.current = Boolean((_c = (_b = form.current) == null ? void 0 : _b.closest('[role="dialog"]')) == null ? void 0 : _c.contains(document.activeElement));
           setSubmission({ state: "success" });
         }).catch((e22) => {
           if (e22 instanceof Error) {
@@ -5740,7 +5804,7 @@ const CommentForm = ({
         /* @__PURE__ */ u$1("input", { type: "hidden", name: "key", value: params.key }),
         /* @__PURE__ */ u$1("fieldset", { class: "flex flex-col gap-4", children: [
           /* @__PURE__ */ u$1("label", { htmlFor: id, class: "flex flex-col gap-1", children: [
-            /* @__PURE__ */ u$1("p", { class: "text-neutral-12 text-pretty text-base font-semibold leading-tight tracking-tight", children: t2(score === -1 ? "negative_heading" : "positive_heading") }),
+            /* @__PURE__ */ u$1("p", { id: headingId, class: "text-neutral-12 text-pretty text-base font-semibold leading-tight tracking-tight", children: t2(score === -1 ? "negative_heading" : "positive_heading") }),
             /* @__PURE__ */ u$1("p", { class: "text-neutral-11 text-pretty text-sm leading-tight", children: t2(score === -1 ? "negative_text" : "positive_text") })
           ] }),
           /* @__PURE__ */ u$1("div", { class: "flex flex-col gap-2", children: [
@@ -5754,7 +5818,7 @@ const CommentForm = ({
                 id
               }
             ),
-            submission.state === "error" ? /* @__PURE__ */ u$1("div", { role: "alert", class: "text-balance flex gap-1 text-xs", children: [
+            submission.state === "error" ? /* @__PURE__ */ u$1("div", { role: "alert", class: "flex gap-1 text-balance text-xs", children: [
               /* @__PURE__ */ u$1(Icon, { name: "warning", class: "size-[1lh] flex-none" }),
               submission.error
             ] }) : null
@@ -6758,6 +6822,11 @@ const feedbackPlugin = () => createPlugin(({ apiClient, logger, analytics }) =>
       targets.add(target);
       fn2(_$2(App, { params }), target);
     },
+    /** Release one target's widget (and its portals), leaving any other target's. */
+    unmount: (target) => {
+      J$1(null, target);
+      targets.delete(target);
+    },
     /** Release components, portals and document listeners when an owning widget unmounts. */
     destroy: () => {
       for (const target of targets)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inploi/plugin-feedback",
-  "version": "6.1.0",
+  "version": "6.2.0",
   "type": "module",
   "main": "dist/plugin-feedback.js",
   "types": "dist/index.d.ts",
@@ -56,9 +56,9 @@
     "clsx": "^2.0.0",
     "zustand": "^4.5.2",
     "zustand-context": "^1.0.0",
-    "@inploi/core": "1.21.0",
+    "@inploi/core": "1.22.0",
     "@inploi/design-tokens": "0.2.1",
-    "@inploi/sdk": "2.3.2",
+    "@inploi/sdk": "2.7.0",
     "eslint-config-custom": "0.1.0",
     "@inploi/i18n": "0.1.5"
   },
@@ -73,6 +73,7 @@
     "build:cdn": "VITE_MOCKS=false vite build --mode=cdn",
     "preview": "vite preview",
     "_test": "bun test src/",
+    "test:coverage": "bun test src/ --coverage --coverage-reporter=lcov",
     "_test:watch": "bun test src/ --watch",
     "_test:int": "playwright test",
     "_test:ui": "playwright test --ui",